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:
<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:
And, at last code for adding gantt charts to the page, they are placed in table cells (where divs are placed).
//<![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.