A candleline chart is a style of financial chart used to describe price movements of a security, derivative, or currency.

The <CandleLine2DChart> element tag is used to create a candleline chart in KoolChart, and the series element tag for the candleline chart is <CandleLine2DSeries>.

This sample chart is to show how to create a candleline 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.

<DualChart ... >					
    <CandleLine2DChart lazyJsFunction="lazyDataFunc" ... >
        <CandleLine2DSeries yField="open" ... >
    <Column2DChart ... >
    <DualScrollBar visibleItemSize="20" />


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;


yField The yField attribute is used to set the field name of the vertical axis ( verticalAxis ).


visibleItemSize The visibleItemSize attribute determines the number of data displayed in the chart.

© 2017 KoolChart. All rights reserved.