Reusing the same config template object for multiple charts
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>
CSS
#chartdiv, #chartdiv2 {
width : 100%;
height : 200px;
font-size : 11px;
}
JavaScript
// custom config cloner function
AmCharts.cloneObject = function (obj) {
return JSON.parse(JSON.stringify(obj));
};
// define config template
var configTemplate = {
"type": "serial",
"theme": "none",
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
}
};
var chartData1 = [{
"country": "USA",
"visits": 2025,
"tempvisit":1015
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}];
var chartData2 = [{
"country": "USA",
"visits": 523
}, {
"country": "China",
"visits": 888
}, {
"country": "Japan",
"visits": 512
}, {
"country": "Germany",
"visits": 320
}, {
"country": "UK",
"visits": 451
}, {
"country": "France",
"visits": 153
}];
// build first chart
var chartConfig1 = AmCharts.cloneObject(configTemplate);
chartConfig1.dataProvider = chartData1;
chartConfig1.graphs[1] = chartConfig1.graphs[0];
chartConfig1.graphs[0].valueField = "visits";
chartConfig1.graphs[1].valueField = "tempvisit" ;
AmCharts.makeChart("chartdiv", chartConfig1);
// build second chart
var chartConfig2 = AmCharts.cloneObject(configTemplate);
chartConfig2.dataProvider = chartData2;
chartConfig1.graphs[1].valueField = "tempvisit" ;
AmCharts.makeChart("chartdiv2", chartConfig2);