html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

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

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

      {id: "C", duration: 2, name: "C"},

      {id: "D", duration: 1, name: "D", dependsOn: ["A"]},

      {id: "E", duration: 2, name: "E", dependsOn: ["B"]},

      {id: "F", duration: 2, name: "F", dependsOn: ["C"]},

      {id: "G", duration: 2, name: "G", dependsOn: ["D", "E", "F"]}

    ];

​

    // create a chart

    var chart = anychart.pert();

​

    // set chart data

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

    chart.milestones().labels().fontSize(10);

    chart.milestones().shape("rectangle");

    chart.milestones().size(80);

    chart.milestones().labels().format(function() {

if (this.creator) {

    var result ="";

    var comma, i;

    for (i = 0; i < this.predecessors.length; i++){

        comma = i == this.predecessors.length - 1 ? "" : ",";

        result += this.predecessors[i].get("name") + comma;

    }

    result += " - ";

​

    for (i = 0; i < this.successors.length; i++){

        comma = i == this.successors.length - 1 ? "" : ",";

        result += this.successors[i].get("name") + comma;

    }

    return result;

​

} else {

    return this.isStart ? "S" : "F";

}

    });

​

    chart.criticalPath({milestones: {fill: "#ffcc80", hoverFill: "#ffab91", selectFill: "#ff6e40"}});

​

    // 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();

});