Find Difference between the two sequence of points value in AmCharts? - charts

Question

I am using the AmCharts. I need to display value in the balloon text , that value is not a value field.
For example : X axis Value 0 , Y axis 1, (0,1) is 2 ; (1,2) is 5.
I need to display the Difference between the values (0,1) and (1,2) - that means "3" as Balloon in the point (1,2). Any ideas ?

Answer 1

Yes, the chart on your screenshot is possible to implement.
At first, add additional fields to your chart data, for example, labelGraph1, labelGraph2. Then you can use the labelText property of the AmCharts.AmGraph object.
var chartData = [{
title: "Apples",
value1: 24,
value2: 28,
labelGraph1: null,
labelGraph2: null
}, {
title: "Bananas",
value1: 27,
value2: 31,
labelGraph1: null,
labelGraph2: null
}, {
title: "Cherries",
value1: 27,
value2: 39,
labelGraph1: null,
labelGraph2: null
}];
for(var i = 0; i < chartData.length; i++) {
chartData[i].labelGraph1 = chartData[i].value1;
chartData[i].labelGraph2 = chartData[i].value2 - chartData[i].value1;
}
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "title";
// GRAPHS
var graph1 = new AmCharts.AmGraph();
graph1.valueField = "value1";
graph1.type = "line";
graph1.fillAlphas = 0.6;
graph1.labelText = "[[labelGraph1]]";
chart.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2";
graph2.type = "line";
graph2.fillAlphas = 0.6;
graph2.labelText = "[[labelGraph2]]";
chart.addGraph(graph2);
// WRITE
chart.write("chartdiv")
});
The only one difficulty is to calculate values of the displayed fields.
I did it so, and you should change that function according to your data:
for(var i = 0; i < chartData.length; i++) {
chartData[i].labelGraph1 = chartData[i].value1;
chartData[i].labelGraph2 = chartData[i].value2 - chartData[i].value1;
}