How to add several Gantt Charts on the web page

Overview

If you have already studied Simple Gantt Chart Sample or JavaScript Library you can read this tutorial to learn how to insert several gantt charts into web page and build some kind of dashboard representing task and resources spreading using AnyGantt.

HTML Gantt Dashboard Sample

For this sample we have created three XML files with some random data represented in Project and Resources Gantt Chart. You can find these files in sample folder.

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

Open the folder with several charts on the page sample: Open Folder With 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 gantt charts when page is loaded:

<body onLoad="init()">

And, at last code for adding gantt 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 gantt charts will be launched when page loads
function init(){

var chart1 = new AnyChart();

chart1.width = "100%";
chart1.height = 300;

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

var chart2 = new AnyChart();

chart2.width = "100%";
chart2.height = 300;

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 gantt charts into the page, set their heights and widths in pixels or percents and create any layout for them.

to top