Embed chart into the page using plain HTML
Overview
We recommend to use AnyGantt JavaScript Library to embed any gantt chart into the page, you can read how to do that in Create Simple Gantt Chart tutorial, to learn why you should do that you can read in JavaScript Library Description.
But if for some reason you don't want to use JavaScript at all - below you will find a tutorial how to embed AnyGantt into the page using plain HTML.
Plain HTML Embedding
First of all we need a plain HTML page that contains a Flash object, and place it to some folder on your web site: Below we've done it, creating AnyChartTest folder in IIS wwwroot folder with the following structure:
- /AnyChartTest
- /swf
- AnyGantt.swf
- anychart.xml
- anychart.html
- /swf
Terms
Container page: a page where gantt chart will be displayed; this page can be HTML, ASP, ASP.NET, CF, PHP, CGI, Perl (or any other scripting language capable to produce HTML output).
Data provider: AnyGantt accepts all data needed to show the gantt chart in a single XML File. The structure of this file will be explained later.
Chart SWF: Gantt Charts displayed by AnyGantt are contained in a single swf file - that is why we created an swf subfolder. Note, however, that AnyGantt uses .swf file that differs from the one used by AnyChart. This file is AnyGantt.swf, while AnyChart uses AnyChart.swf.
Choosing Gantt Chart data and its visual style
As we are creating a gantt chart we need some data for it. Imagine that we want to plant some plant, breed it and eventually get harvest from it. Let's divide the whole process into four phases:
Process | Start time | End time |
---|---|---|
Land cultivation | 2008.04.02 | 2008.04.15 |
Planting | 2008.04.20 | 2008.05.01 |
Plant breeding | 2008.05.01 | 2008.08.31 |
Harvesting | 2008.09.01 | 2008.09.15 |
To transmit this data to AnyGantt component we need to convert it to XML, like that:
<project_chart>
<tasks>
<task id="1" name="Land cultivation" actual_start="2008.04.02" actual_end="2008.04.15" />
<task id="2" name="Planting" actual_start="2008.04.20" actual_end="2008.05.01" />
<task id="3" name="Plant breeding" actual_start="2008.01.01" actual_end="2008.08.31" />
<task id="4" name="Harvesting" actual_start="2008.09.01" actual_end="2008.09.15" />
</tasks>
</project_chart>
</anygantt>
Now copy the above code, open anychart.xml from AnyChartTest folder in any plain text editor and paste code there.
XML structure may look complex, but most of the tags are self descriptive and we can describe everything done in XML in several words:
<anygantt> is the root node that is obligatory for Gantt charts work and contains all other nodes. Further we describe what kind of Gantt chart we want to use: Project Gantt Chart or Resources Gantt Chart. For our purpose it's better to use Project Gantt Chart, so we have a <project_chart> node. Then we place every single <task> subnode inside <tasks> node.
That's all for the nodes. Now every <task> node has a number of attributes. id is a unique identificator of each task. name describes what the user sees in his datagrid. actual_start and actual_end are for describing start and end time respectively. And that's all!
HTML File structure
Only one step remains and we will see our gantt chart on the Web!
Here is the code you should paste in anychart.html (just open it in any text editor and copy-paste the code):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyGantt HTML Sample</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="600" height="300">
<param name="movie" value="swf/AnyGantt.swf" />
<param name="flashvars" value="XMLFile=anychart.xml" />
<embed
type="application/x-shockwave-flash"
src="swf/AnyGantt.swf"
flashvars="XMLFile=anychart.xml"
width="600" height="300">
</embed>
</object>
</body>
</html>
Only text in bold is the html code, that you need to embed AnyGantt into a HTML page.
Final
Now we should launch our html page in a web browser, in our case we can use both:
http://localhost/AnyChartTest/anychart.html
or
C:\Inetpub\wwwroot\AnyChartTest\anychart.html
If everything was done exactly as described above, you will see the following chart:
You can open this sample from here: Open the Simple Chart Sample
You can open folder with sample files from here: Open Folder With Sample
If you want to try to modify sample in a folder other than live sample folder of AnyGantt Documentation you should follow the installation tutorial: Installation of AnyGantt to the Web Server of Local Machine