Configuring a Zoom Line Chart

FusionCharts Suite XT allows you to configure several functional and cosmetic properties for zoom line charts.

In this section, you will be shown how you can:

  • Limit the maximum number of data labels

  • Set the distance between consecutive data plots

  • Set the criteria for anchor display

  • Pre-select the number of visible data plots

  • Customize the appearance of a zoom line chart

Limiting the Maximum Number of Visible Data Labels

By default the zoom line chart displays as many data labels as can be accommodated without causing a clutter. However, it is also possible to limit the maximum number of data labels that are visible at any given time.

A zoom line chart with the maximum number of labels limited looks like this:

FusionCharts should load here..

In the above chart, the number of labels rendered on one screen is 12. To look at the preceding or following labels, you will need to use the scroll bar.

Given below is a brief description of the attribute used to limit the maximum number of visible data labels:

Attribute Name Description
numVisibleLabels It is used to specify the maximum number of labels that will be rendered in one screen when the chart is first loaded.

The data structure needed to limit the number of visible labels is given below:

...

numVisibleLabels attribute only limits the number of visible data labels, it has no effect on the number of visible data points.

Setting the Distance between Consecutive Data Plots

FusionCharts XT zoom line chart allows configuration of the distance between consecutive data plots.

A zoom line chart with the distance between the consecutive data plots configured looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to set distance between consecutive data plots:

Attribute Name Description
pixelsPerPoint It is used to specify the number of pixels that will be used to render a data point. A greater number of pixels will result in a higher quality display. This attribute is also used to set the distance between consecutive data plots.

The data structure needed to set the consecutive distance between data plots for a zoom line chart is given below:

...

Setting the Criteria for Anchor Display

In order to reduce clutter, you can make anchors visible only when the distance between consecutive data points reaches a certain minimum value. For instance, you can instruct the chart to show anchors only when consecutive data points are 25 pixels apart. If the chart contains plenty of data, then anchors will not be visible in macroscopic view, where the distance between consecutive data points is less than 25 pixels. The anchors become visible only when the chart is zoomed and the distance between consecutive data points increases to 25 pixels or above.

A zoom line chart with the criteria for anchor display defined looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to set the criteria for anchor display:

Attribute Name Description
anchorMinRenderDistance It is used to specify the minimum distance, in pixels, between consecutive data points.

The data structure needed to set the anchor display criteria is given below:

...

Preselecting the Number of Visible Data Plots

By default, the zoom line chart displays all the data plots in a single screen. However, it is possible to pre-select the maximum number of data plots that will be visible on a single screen at the time of rendering.

A zoom line chart rendered with pre-selected number of data plots looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to pre-select the number of visible data points:

Attribute Name Description
displayStartIndex It is used to specify the index of the data label that will appear to the extreme left of the chart.
displayEndIndex It is used to specify the index of the data label that will appear to the extreme right of the chart.

The data structure needed to pre-select the number of visible data plots is given below:

...

Customizing the Appearance of a Zoom Line Chart

FusionCharts Suite XT includes several options for customizing the appearance of a zoom line chart. Appearance of chart elements such as the scroll bar and toolbar can be configured with great deal of intricacy. Following table lists some of the customization attributes that are exclusive to the zoom line chart:

Given below is a brief description of some of the attributes that are exclusive to the customization of a zoom line chart::

Attribute Name Description
palette It is used to specify the hex code for a color theme that will be applied throughout the chart.
toolbarButtonColor It is used to specify the hex code for the color of the toolbar buttons.
zoomPaneBgColor It is used to specify the hex code for the background color of the zoom pane.
zoomPaneBgAlpha It is used to specify the alpha of the zoom pane. Range: 0 to 100.
pinLineThicknessDelta It is used to specify the thickness of the pinned line when the chart is put to pin line mode.
pinPaneBgColor It is used to specify the background color of the pin pane.
pinPaneBgAlpha It is used to specify the alpha of the pin pane.
showToolBarButtonTooltext It is used to enable/disable the display of tooltips for toolbar buttons.
btnResetChartTooltext It is used to replace the default tooltext of theReset Chart button with provided string.
btnZoomOutTooltext It is used to replace the default tooltext of the Zoom Out button with provided string.
btnSwitchToZoomModeTooltext It is used to replace the default tooltext of Switch to Zoom Mode with provided string.
btnSwitchToPinModeTooltext It is used to replace the default tooltext of Switch to Pin Mode button with provided string.
scrollColor It is used to specify the hex code of the color for the scroll bar.
scrollHeight It is used to specify the height for scroll bar.

There! You have now seen how you can configure zoom line charts.