ALIAS: sparkline

Example of Spark Line Chart:

JavaScript embedding code:

    <script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "sparkline",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
        });
    });
    </script>

Data for this chart:

• JSON
• XML

Chart Attributes

Functional Attributes

These attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.

Chart Caption

These attributes let you configure the chart caption and sub-caption.

Chart Caption Cosmetics

These attributes let you customize the cosmetic properties for the chart caption and sub-caption.

Number Formatting Properties

FusionCharts XT offers you a lot of options to format your numbers on the chart.

These attributes let you control a myriad of options like:

• Formatting of commas and decimals
• Number prefixes and suffixes
• Decimal places to which the numbers will round to
• Scaling of numbers based on a user defined scale
• Custom number input formats

These attributes let you appropriately format the numbers displayed on the chart.

Data Plot Properties

These attributes let you customize the cosmetics of the data plots (the line segments and the anchors).

Open, Close, High, and Low Properties

The spark line chart highlights the open, close, high, and low points and also shows their value. These attributes let you configure the chart to:

• Change color of open, close, high, low points
• Opt whether to highlight each one using anchors
• Whether to show values for each one of them

Period Block Properties

Period blocks are alternate colored bands that help to easily interpret periods on the chart.

These attributes let you customize the cosmetic properties for the period blocks.

Chart Cosmetics

These attributes let you customize chart cosmetics like the background color, background alpha, canvas color, canvas alpha etc.

Font Properties

These attributes let you define the generic font properties for all the text on the chart, allowing you a high level control over font properties.

Tool-tip Properties

These attributes let you configure the functional and cosmetic properties of tool-tips.

Chart Paddings and Margins

FusionWidgets XT allows you to manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionWidgets XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart margins refer to the empty space left on the top, bottom, left, and right of the chart. That means, FusionWidgets XT will not plot anything in that space.

It is not necessary for you to specify any padding/margin values. FusionWidgets XT automatically assumes the best values for the same.

These attributes let you configure the functional and cosmetic properties of chart paddings and margins.

Trend-lines

Using the <trendlines> element (and the children <line> elements), you can define trend lines on the chart.

Trend lines are horizontal lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting sales data of current year, you might want to add previous year's average monthly sales as trend indicator for ease of comparison.

Use the code snippet shown below to render a horizontal trend-line on the chart:

    ...
    "chart": {
                ...
        };

    "trendlines": [{
          "line": [{
              "startvalue": "177500",
              "color": "#00cc00",
              "displayvalue": "Target"
         }]
    }]

    ...

These attributes let you customize the functional and cosmetic properties for trend-lines.