How to add several charts on the web page

Overview

If you have already studied Simple Chart Sample or JavaScript Library you can read this tutorial to learn how to insert several chart into web page and build some kind of sales dashboard using AnyChart. However you should look at AnyChart Dashboards if you want to create really flexible and interactive dashboards.

HTML Sales Dashboard Sample

For this sample we have created three XML files with data about ACME Corp. sales: sales per retail channel, sales growth per seasons and sales ratio per city districts. You can find these files in sample archive.

Launch the sample with several charts on the page: Open the Sample

Download the sample with several charts on the page sample: Download the Sample

First we will create layout using div's and table:

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td colspan="2" width="60%">
    <div id="chartDiv-1"></div>
  </td>
  <td width="40%">
    <div id="chartDiv-2"></div>
  </td>
</tr>
<tr>
  <td colspan="3" width="100%">
    <div id="chartDiv-3"></div>
  </td>
</tr>
</table>

Then we will add code to body onload event that will load charts when page is loaded:

<body onLoad="init()">

And, at last code for adding charts to the page, they are placed in table cells (where divs are placed).

<script type="text/javascript" language="javascript">
//<![CDATA[
// Set SWF file for all charts
AnyChart.swfFile = './swf/AnyChart.swf';

// Function that creates charts will be launched when page loads
function init(){

var chart1 = new AnyChart();

chart1.setXMLFile('./data-1.xml');
chart1.write(chartDiv-1);

var chart2 = new AnyChart();

chart2.setXMLFile('./data-2.xml');
chart2.write(chartDiv-2);

var chart3 = new AnyChart();

chart3.width = "100%";
chart3.height = "200";

chart3.setXMLFile('./data-3.xml');
chart3.write('chartDiv-3');
}
//]]>
</script>

That's it - you can add and place charts into the page, set their heights and widths in pixels or percents and create any layout for them.

to top