ALIAS: zoomline

Example of Zoom line Chart:

JavaScript embedding code:

    <script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "zoomline",
            "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 Titles and Axis Names

These attributes let you customize the various headings and titles for a chart, like the caption, sub-caption, x-axis and y-axis names etc.

Chart Caption Cosmetics

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

X-axis Name Cosmetics

These attributes let you control the cosmetic properties for the x-axis label.

Y-axis Name Cosmetics

These attributes let you control the cosmetic properties for the y-axis label.

Chart Cosmetics

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

Data Plot Cosmetics

These attributes let you customize the cosmetics (columns, lines, area, pie or any data that you're plotting) of the data plots in the chart.

If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes.

Various other controls over plot cosmetics can be attained using this set of attributes.

Data Value Cosmetics

These attributes let you customize the font, background, and border cosmetics of the data values on the chart.

Scroll Properties

These attributes let you configure the scroll properties.

Anchors

Anchors (or marker points) are polygons which appear at the joint of two consecutive lines/area points. These are indicators to show the position of data points.

The anchors handle tool tips and links for the data points. So, if you opt to not render anchors on a chart, the tool tips and links won't function. You can, however, hide them by setting their transparency to 0 and still enable tool tips and links. In area charts, anchors are set transparent by default. In case you wish to show the anchor, use anchorAlpha="100" attribute.

These attributes let you configure and customize the anchors on your chart.

Divisional Lines and Grids

Divisional lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis, thus aiding the users in interpreting the chart.

The zero plane is a 2D/3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won't see a visible zero plane.

Alternate color bands are colored blocks between two successive divisional lines.

These attributes let you configure the cosmetics for the divisional lines and grids.

Legend Properties

In multi-series charts, by default, the series name of each dataset shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same. Also, the legend can be placed at the bottom of the chart or to the right of the chart. Using legends you can correlate a data plot to its series name using its color representation in the legend.

These attributes let you configure the functional and cosmetic properties of the legend.

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.

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.

Data Plot Hover Effects

If you wish to show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over it, you can apply the hover effects to a data plot.

These attributes let you configure the hover effect for all data plots in the chart.

Chart Paddings & Margins

FusionCharts 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 FusionCharts 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, FusionCharts XT will not plot anything in that space.

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

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

The <categories> Element

These attributes of the <categories> element let you control the font properties of data labels. It can also be used to define the cosmetics of vertical chart lines.

The <dataset> Element

Each <dataset> element contains a series of data.You can provide data-set level cosmetics so that all data within that data-set will be plotted in the same color/alpha/etc.

These attributes let you customize the cosmetic properties for a data-set.

The <set> Element

Each <set> element (child of <dataset> element) represents a set of data which is to be plotted on the graph and determines a set of data which will appear on the chart.

For a multi-series chart, a typical <set> element will look like:

<dataset seriesName='2006'>
    <set value='35445' />
    <set value='35675' />
    .... and so on ....
</dataset>

These attributes let you configure individual data values in a data-set.

Vertical Trend-lines and Trend-zones

vLines are vertical separator lines that help you separate blocks of data. These lines run through the height of the chart, thereby segregating data into different blocks.

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

    "data": [{
        ...
    },
    {
        "linePosition": "0.8",
        "vLine": "true"
    },
    ...

These attributes let you configure the functional and cosmetic properties for vertical trend-lines and trend-zones.

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.