I am drawing a intractive graph using amcharts. I want to draw several line graphs in one single graph. But my code draw only one graph. When I add code for second line graph , it did not show anything due to error. How I can add second line graph in it. Here is .js file.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "100",
"value": 10
}, {
"D": "200",
"value": 20
}, {
"D": "200",
"value": 30
}, {
"D": "400",
"value": 40
}, {
"D": "500",
"value": 50
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}
I found a solution. If you want to plot more linegraphs in one single graph. Just add extra id' in "graph": and add extra valueField inside that id. And add needed points in "dataProvider":. Similarly you can do this for more than 2 graphs by adding ids inside "graph":. And save it with .js extension.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "5",
"value":0.30,
"value1":0.5,
}, {
"D": "10",
"value": 0.29,
"value1":0.27,
}, {
"D": "15",
"value": 0.28,
"value1":0.20,
}, {
"D": "20",
"value": 0.27,
"value1":0.32,
}, {
"D": "25",
"value": 0.26,
"value1":0.25,
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"title": "redpoint",
"valueField": "value"
}, {
"id":"g2",
"balloonText": "[[category]]<br><b><span style='font-size:14px;> [value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#20acd4",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"title": "bluepoint",
"valueField": "value1"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*legend show points value on top*/
"legend": {
"useGraphSettings": true,
"position": "top"
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);/*zoom effect*/
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}