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 column type of the from-to chart.

...
<Column3DChart showDataTips="true" ... >
  ...
  <series>
    <Column3DSeries minField="min" yField="max" labelPosition="inside" insideLabelJsFunction="labelFunc" color="#ffffff" >
    ...
    </Column3DSeries>
  </series>
  ...
</Column3DChart>
...
function labelFunc(seriesId, index, data, values) {
  return data["maxName"];
}

function dataTipFunc(seriesId, seriesName, index, xName, yName, data, values) {
  var maxVal = insertComma(data'max']);
  var minVal = insertComma(data['min']);
  
  return "<font color='#0000FF'>"+values[0]+"</font>"
    +"<br/>Max Revenue: "+ data['maxName'] + " (" + maxVal + ",000)"
    +"<br/>Min Revenue: "+ data['minName'] + " (" + minVal + ",000)";
}

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

<Column3DSeries>

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 ).
insideLabelJsFunction The insideLabelJsFunction attribute is used to set the user-defined JavaScript function when labelPosition="inside". The valid value is the name of JavaScript function.
The third parameter of the function contains values - data[0]: "cat" Field, data[1]: "min" Field, data[2]: "max" Field, data[3]: "minName" Field, data[4]: "maxName" Field

© 2017 KoolChart. All rights reserved.