Next
Update
Prev
-
+
Default

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 ... >					
  <mainChart>
    <CandleLine2DChart lazyJsFunction="lazyDataFunc" ... >
    ...
      <series>
        <CandleLine2DSeries yField="open" ... >
        ...
        </CandleLine2DSeries>
      </series>
      ...
    </CandleLine2DChart>
  </mainChart>
  
  <subChart>
    <Column2DChart ... >
    ...
  </subChart>
  
  <dataSelector>
    <DualScrollBar visibleItemSize="20" />
  </dataSelector>
</DualChart>
...

<CandleLine2DChart>

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);
}

<CandleLine2DSeries>

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

<DualScrollBar>

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

© 2017 KoolChart. All rights reserved.