PERT Chart Quick Start

Getting started with PERT Chart

1. Include PERT Chart into Your Web Page

Include the JavaScript file in the <head> section of your web page – visit the download page for those or use CDN as shown below:

<head>
    <script src="//cdn.anychart.com/js/latest/anygantt.min.js" type="text/javascript"></script> 
</head>

2. Create a Container for the Chart

Add a block-based HTML element into your page, set the id, width and height attributes. AnyChart charting library uses 100% of the container if other behaviour is not specified.

<body>
    <div id="container" style="width: 500px; height: 400px;"></div>
</body>

3. Prepare Your Data

There are two ways to set data for PERT charts, both based on Anychart Data Tree Model: nodes and connections between them can be set either simultaneously or separately, in two sets of data. In this sample, the first way is shown:

// raw data
var data = [
    {id: "1", duration: 1, name: "Task A"},
    {id: "2", duration: 3, name: "Task B"},
    {id: "3", duration: 3, name: "Task C"},
    {id: "4", duration: 1, name: "Task D"},
    {id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
    {id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
];

4. Create a Chart

Add the JavaScript tag <script> with the following code anywhere in the page. This code example uses JavaScript API to create a chart, but you also can use JSON or XML format. See Supported Data Formats to learn more about available formats.

<script>
anychart.onDocumentReady(function () {
	   
	// raw data
	var data = [
	    {id: "1", duration: 1, name: "Task A"},
	    {id: "2", duration: 3, name: "Task B"},
	    {id: "3", duration: 3, name: "Task C"},
	    {id: "4", duration: 1, name: "Task D"},
	    {id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
	    {id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
	];

	// create a PERT chart
	chart = anychart.pert();

	// set chart data
	chart.data(data, "asTable");

	// set the title of the chart
	chart.title("PERT Chart");

	// set the container id for the chart
	chart.container("container");

	// initiate drawing the chart
	chart.draw();
});
</script>

The Result

See the Result

After all these steps you should have the following result. This example, like any other on our site, can be launched and explored using AnyChart Playground.

JsFiddle Playground

Full Source Code

You can copy this to a file on your computer and open it in your browser to display the PERT Chart shown above:

<!doctype html>
<html>
  <head>
    <script src="http://cdn.anychart.com/js/develop/anychart-bundle.min.js"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
	anychart.onDocumentReady(function () {
		   
		// raw data
		var data = [
		    {id: "1", duration: 1, name: "Task A"},
		    {id: "2", duration: 3, name: "Task B"},
		    {id: "3", duration: 3, name: "Task C"},
		    {id: "4", duration: 1, name: "Task D"},
		    {id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
		    {id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
		];

		// create a PERT chart
		chart = anychart.pert();

		// set chart data
		chart.data(data, "asTable");

		// set the title of the chart
		chart.title("PERT Chart");

		// set the container id for the chart
		chart.container("container");

		// initiate drawing the chart
		chart.draw();
	});
    </script>
  </body>
</html>
You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.