How to create a simple gantt chart and embed it into a web page

Intro

AnyGantt is a flexible component for creation charts in Web, you can easily create a lot of charts using it, so let's see step by step how to create a page with chart.

to top

Create a web page

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:

to top

Terms

Container page: a page where 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 chart in a single XML File. The structure of this file will be explained later.

Chart SWF: Gantt Charts displayed by AnyGantt is contained in a single swf file - that is why we created an swf subfolder.

AnyGantt JavaScript library: to embed a chart into a web page we’ll use AnyGantt JavaScript Integration Library.

to top

Choosing Chart data and its visual style

As we are creating a gantt chart we need some data for it. Imagine that we want to chart simple project of five tasks - ACME Corp. is going to start the development of a new warehouse building. So, we have the following data:

Task Start Time End Time Current Progress
Architectural Design 2008/01/01 2008/01/02 50%
Interior Design 2008/02/01 2008/03/01 35%
Construction Phase 2008/02/10 2008/04/18 0%
Decoration Phase 2008/04/01 2008/05/10 0%
Opening Celebration 2008/05/20   0%

To transmit this data to AnyGAntt component we need to convert it to XML, like that:

<anygantt>
  
<project_chart>
    
<tasks>
      
<task id="1" name="Architectural Design" actual_start="2008/01/01" actual_end="2008/01/02" progress="50" />
      
<task id="2" name="Interior Design" actual_start="2008/02/01" actual_end="2008/03/01" progress="35" />
      
<task id="3" name="Construction Phase" actual_start="2008/02/10" actual_end="2008/04/18" progress="0" />
      
<task id="4" name="Decoration Phase" actual_start="2008/04/01" actual_end="2008/05/10" progress="0" />
      
<task id="5" name="Opening Celebration" actual_start="2008/05/20" progress="0" />
    
</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:

In tasks node we describe all task that will present in our Gantt Chart.

So every task node in our case has 4 simple attributes:

id is a unique identifier for the program. It's name may be not very euphonic but this is name for the machine and it must be unique and informative to you if you have lots of tasks.

The next node is name. This is what the user sees in datagrid.

Progress is the way of your tasks completing. It's measured in percents, however, to set it, you need to set only numeric value.

And the last two nodes are actual_start and actual_end, defining start and end time of the task correspondingly.

to top

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):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
    <script type="text/javascript" language="javascript">
    //<![CDATA[
    var chart = new AnyChart('./swf/AnyGantt.swf');
    chart.width = 700;
    chart.height = 300;
    chart.setXMLFile('./anychart.xml');
    chart.write();
    //]]>
    </script>
</body>
</html>

Only text in bold is the html code, that you need to embed AnyGantt into a HTML page.

to top

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 is done exactly as described above, you will see the following chart:

Results

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

to top