A scroll chart is a scrollable chart which, instead of accommodating all data in the constrained space, uses the scrollbar to scroll to a specific data point. KoolChart supports the scroll function in the column chart, bar chart, line chart, area chart and combination chart.

The <ScrollableAxisRenderer> element tag is used to create a scrollable axis, which can be defined as a child node of the <verticalAxisRenderers> ( or <horizontalAxisRenderers> ) element tag.

The <CategoryLinearAxis> element tag must be defined to use the scroll function, and <CategoryAxis> does not support the scroll function.

This sample chart is to show how to create a multiseries column chart with the horizontal scrollbar and the function which fetches data from the server when users drag the mouse pointer to the left of the chart.

<Column2DChart lazyJsFunction="lazyDataFunc" >
    <Column2DSeries yField="Data1" ... />
    <Column2DSeries yField="Data2" ... />
    <CategoryLinearAxis id="hAxis" categoryField="index" padding="0.5"/>	
    <ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="10"/>


lazyJsFunction The lazyJsFunction attribute is used to set the user-defined JavaScript function which is to be called to acess data when users drag the mouse. The valid value is the name of JavaScript function. Below is a sample code :
var dataURL = "";
var xhr;
var index = 19;

function lazyDataFunc(id) {
  var param = {};
  param.url = dataURL + (index + 1);
  param.success = function() {
    var data;
    if(xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
        data = xhr.responseXML.xml;
        data = xhr.responseXML;
      index += 20;


categoryField The categoryField attribute determines which field in the Data Object will be used as the value of the category axis.


axis The axis attribute determines which axis will be drawn. The valid value is the ID of <horizontalAxis> or <verticalAxis>.
visibleItemSize The visibleItemSize attribute determines how many items will be displayed in the chart.

© 2017 KoolChart. All rights reserved.