Embedding multiple charts in a page

Using FusionCharts, you can embed any number of charts in a single - there is no such restriction (even in evaluation). In fact, you can even mix gauges and maps from our other products (FusionWidgets, FusionMaps and PowerCharts) and put them on the same page as charts. Here, we'll quickly see an example.

The process of embedding multiple charts is similar to that of embedding a single chart. You just need to take care of the following:

  • Each chart on the page should reference a different DIV to render.
  • Each chart on the page should have a different ID (specified in the JavaScript container)
  • Each chart has it's own JavaScript variable name (e.g., var chart1 = new FusionCharts(...); var chart2 = new FusionCharts(...); )

Shown below is an example page containing multiple charts. The page is named as MultipleCharts.html and is stored in MyFirstChart folder itself.

<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>

<body bgcolor="#ffffff">
<div id="chart1div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
   var myChart1 = new FusionCharts("../FusionCharts/Column3D.swf", "myChart1Id", "900", "300", "0", "0");
   myChart1.setDataURL("Data.xml");
   myChart1.render("chart1div");
</script>

<div id="chart2div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
   var myChart2 = new FusionCharts("../FusionCharts/Pie3D.swf", "myChart2Id", "500", "300", "0", "0");
   myChart2.setDataURL("Data.xml");
   myChart2.render("chart2div");
</script>

</body>
</html>

As you can see here, we've embedded two charts in a page - a column 3D chart and a pie 3D chart. The column 3D chart has an ID of myChart1Id and its DIV is named as chart1div, with the chart variable as myChart1. The pie chart has different ID, DIV name and chart variable.

When you run this page, you'll see both the charts in the page.