JavaScript History Chart Column Chart

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A history chart scrolls through the navigator that allows the user to control the number of items displayed in the chart dynamically. To create a history chart using KoolChart's JavaScript charting library, the following three elements need to be set within a <HistoryChart> element: <displayerChart>, <navigator>, <selector>.
<HistoryChart>
<displayerChart>

The actual chart is displayed.

</displayerChart>
<navigator>

It functions as a navigator to select the part shown in the actual chart.

</navigator>
<selector>

It sets the number of items to display in the actual chart when the chart is first created.

</selector>
</HistoryChart>
In this JavaScript chart example, a <Column2DSeries> element is set within the <displayerChart> element and a <Area2DSeries> element is set within the <navigator> element and the visibleItemSize attribute of the <HistoryRangeSelector> element is set to 30. (the number of items to display in the actual chart when the chart is first created is set to 30% of the total number of data.)