Two or more charts on one page

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.