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:
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:
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:
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:
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.