You can have any number of charts on one page. To do this, you have to set unique id for each div which should contain chart:
<div id="chart1div" style="width:500px;height:300px;"></div> <div id="chart2div" style="width:500px;height:300px;"></div>
Note, first div has id "chart1div" and the id of the second is "chart2div".
When writing chart to container, you should use these id's. In case you use JavaScript API:
chart1.write("chart1div"); ..... chart2.write("chart2div");
If you are creating charts using JSON config:
var chart1 = AmCharts.makeChart("chart1div", {chart config} ); var chart2 = AmCharts.makeChart("chart2div", {chart config} );
Things to look out for:
- The container for each chart must have a unique "id" property.
- Avoid using the same global variable for different chart instances - it may lead to unexpected results and hard to pinpoint anomalies.
- You can add chart initialization code into single AmCharts.ready() call or use multiple calls.