Next
Update
Prev
Default

A From-To chart shows the distance between two data points using bar scales or area measures. You can create the From-To chart using <Bar2DChart>, <Bar3DChart>, <Column2DChart>, <Column3DChart>, <Area2DChart> in KoolChart.

This sample chart is to show how to create a waterfall type of the from-to chart.

...
<Column2DChart showDataTips="true" ... >
  ...
  <series>
    <Column2DSeries minField="from" yField="to" labelPosition="outside" outsideLabelJsFunction="labelFunc" fillJsFunction="fillFunc" outsideLabelYOffset="0">
    ...
    </Column2DSeries>
  </series>
  ...
</Column2DChart>
...
function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values) {
  var fromVal = data['from'];
  var toVal = data['to'];
  
  if (index >= 12)
    return "<font color='#0000FF'>" + values[0] + "</font>" + "<br/>" + insertComma(toVal) + ",000 exceeded";
    
  return "<font color='#0000FF'>" + values[0] + "</font>" + "<br/>Amount increased: "  + insertComma((toVal - fromVal)) + ",000";
}

function labelFunc(seriesId, index, data, values) {
  return insertComma(Number(data["to"]) - Number(data["from"]));
}

function insertComma(n) {
  var reg = /(^[+-]?\d+)(\d{3})/;
  n += "";
  while (reg.test(n))
    n = n.replace(reg, '$1' + "," + '$2');
    
  return  n;
}

function fillFunc(seriesId, index, data, values) {
  if (index >= 12)
    return "#81d733";
  else if (data["to"] > data["from"])
    return "#ffd100";
  else
    return "#ff812d";
}

<Area2DSeries>

minField The minField attribute determines the field name for the beginning value of two data points in the vertical axis ( verticalAxis ).
yField The yField attribute determines the field name for the ending value of two data points in the vertical axis ( verticalAxis ).
outsideLabelJsFunction The outsideLabelJsFunction attribute is used to set the user-defined JavaScript function when labelPosition="outside". The valid value is the name of JavaScript function.
fillJsFunction The fillJsFunction attribute is used to set the user-defined JavaScript function which is to be used to fill color in the rectangle ( bar or column ). The valid value is the name of JavaScript function.

© 2017 KoolChart. All rights reserved.