html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

{id: "1", duration: 1, name: "Task A"},

{id: "2", duration: 3, name: "Task B"},

{id: "3", duration: 4, 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 chart

    var chart = anychart.pert();

​

    // milestones size

    chart.milestones().size(50);

​

    // set chart data

    chart.data(data, "as-table");

​

    // set the title of the chart

    chart.title("PERT Chart");

    // sets selection mode for single selection

    chart.interactivity().selectionMode("single-select");

​

    // pointsselect event

    chart.listen("pointsselect", function(e){

for (var i = 0; i < e.selectedMilestones.length; i++){

    if (e.selectedMilestones[i].isCritical === true) {

        chart.title("This milestone belongs to the critical path");

    }

    else {

        chart.title("This milestone does not belong to the critical path");

    }

}

for (var i = 0; i < e.selectedTasks.length; i++){

    if (e.selectedTasks[i].slack == 0) {

        chart.title("This task belongs to the critical path");

    }

    else {

        chart.title("This task does not belong to the critical path");

    }

}

}

    );

​

    // set the container id for the chart

    chart.container("container");

    // initiate drawing the chart

    chart.draw();

});