JavaScript Scroll Chart Lazy Loading

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A scroll chart is a chart that allows the user to scroll on the axis where the scroll bar is located. To create a scrollable chart using KoolChart's JavaScript charting library, a <ScrollableAxisRenderer> element must be set within a <verticalAxisRenderers> element or a <horizontalAxisRenderers> element.

In this JavaScript chart example, a <ScrollableAxisRenderer> element is set for a column chart (<Column2DChart>), and the lazyJsFunction attribute of the <Column2DChart> element is set to a JavaScript function name (lazyDataFunc()) in order to receive data dynamically when the scroll bar reaches the end.
<Column2DChart showDataTips="true" gutterRight="10" lazyJsFunction="lazyDataFunc" >
...
<horizontalAxisRenderers>
<ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="9" />
</horizontalAxisRenderers>
</Column2DChart>

var xhr,
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).addData(data);
index += 20;
}
}
ajax(param);
}