Next
Update
Prev
Default

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" >
  ...
  <series>
    <Column2DSeries yField="Data1" ... />
    <Column2DSeries yField="Data2" ... />
  </series>
  ...
  <horizontalAxis>
    <CategoryLinearAxis id="hAxis" categoryField="index" padding="0.5"/>	
  </horizontalAxis>
  
  <horizontalAxisRenderers>
    <ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="10"/>
  </horizontalAxisRenderers>
  ...
</Column2DChart>
...

<Column2DChart>

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 = "http://www.koolchart.com/hsyu/makeLazyData.php?index=";
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) {
      if(xhr.responseXML.xml)
        data = xhr.responseXML.xml;
      else
        data = xhr.responseXML;
      document.getElementById(id).setData(data,"push");
      index += 20;
    }
  }
  ajax(param);
}

<CategoryLinearAxis>

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

<ScrollableAxisRenderer>

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.