html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

{id: "A",  optimistic: 1, pessimistic: 10, mostLikely: 6,  name: "A"},

{id: "AB", optimistic: 2, pessimistic: 4,  mostLikely: 3,  name: "AB", dependsOn: ["A"]},

{id: "AC", optimistic: 3, pessimistic: 8,  mostLikely: 6,  name: "AC", dependsOn: ["A"]},

{id: "BD", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "BD", dependsOn: ["AB"]},

{id: "CE", optimistic: 2, pessimistic: 12, mostLikely: 6,  name: "CE", dependsOn: ["AC"]},

{id: "CF", optimistic: 4, pessimistic: 18, mostLikely: 12, name: "CF", dependsOn: ["AC"]},

{id: "CG", optimistic: 3, pessimistic: 10, mostLikely: 5,  name: "CG", dependsOn: ["AC"]},

{id: "DH", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "DH", dependsOn: ["BD"]},

{id: "EI", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "EI", dependsOn: ["CE"]},

{id: "FJ", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "FJ", dependsOn: ["CF"]},

{id: "GK", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "GK", dependsOn: ["CG"]},

{id: "HL", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "HL", dependsOn: ["DH"]},

{id: "HM", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "HM", dependsOn: ["DH"]},

{id: "JN", optimistic: 2, pessimistic: 12, mostLikely: 8,  name: "JN", dependsOn: ["FJ"]},

{id: "KO", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "KO", dependsOn: ["GK"]},

{id: "LP", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "LP", dependsOn: ["HL"]},

{id: "MP", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "MP", dependsOn: ["HM"]},

{id: "NQ", optimistic: 2, pessimistic: 12, mostLikely: 6,  name: "NQ", dependsOn: ["JN"]},

{id: "OQ", optimistic: 2, pessimistic: 12, mostLikely: 7,  name: "OQ", dependsOn: ["KO"]},

{id: "PR", optimistic: 2, pessimistic: 12, mostLikely: 4,  name: "PR", dependsOn: ["LP", "MP"]},

{id: "QS", optimistic: 2, pessimistic: 12, mostLikely: 5,  name: "QS", dependsOn: ["NQ", "OQ"]}

    ];

​

    // create a chart

    var chart = anychart.pert();

​

    // set chart data

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

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

    chart.verticalSpacing(80);

    chart.horizontalSpacing("13%");

    chart.milestones().size(30);

    chart.milestones().labels(false);

​

    labels = chart.tasks().lowerLabels();

    labels.format(function(e){

return "Slack: " + e.slack;

    });

    labels.fontColor("red").fontWeight("bold");

​

    chart.criticalPath().tasks().lowerLabels().fontColor("#eee");

    chart.criticalPath().tasks().stroke("#000", 2);

    chart.criticalPath().tasks().fill("#000");

    chart.criticalPath().milestones().stroke("#000", 2);

​

    // set the container id for the chart

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});