html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // data

    var data = [

        {id: '1', duration: 30, name: '1', fullName: 'Aerodynamics'},

        {id: '2', duration: 50, name: '2', fullName: 'Build & Test Model'},

        {id: '3', duration: 35, name: '3', fullName: 'Structure'},

        {id: '4', duration: 50, name: '4', dependsOn: ['1'], fullName: 'Propulsion'},

        {id: '5', duration: 60, name: '5', dependsOn: ['2'], fullName: 'Build Prototype'},

        {id: '6', duration: 40, name: '6', dependsOn: ['3'], fullName: 'Control & Stability'},

        {id: '7', duration: 20, name: '7', dependsOn: ['4'], fullName: 'Wind Tunnel'},

        {id: '8', duration: 20, name: '8', dependsOn: ['6'], fullName: 'Computation'},

        {id: '9', duration: 45, name: '9', dependsOn: ['7'], fullName: 'Review'},

        {id: '10', duration: 30, name: '10', dependsOn: ['8'], fullName: 'Flight Simulation'},

        {id: '11', duration: 50, name: '11', dependsOn: ['9'], fullName: 'Research flights'},

        {id: '12', duration: 45, name: '12', dependsOn: ['10'], fullName: 'Revise & Review'},

        {id: '13', duration: 25, name: '13', dependsOn: ['5'], fullName: 'Finalize'}

    ];

​

    // set filling method for tree

    var treeData = anychart.data.tree(data, "as-table");

​

    // create PERT chart

    var chart = anychart.pert();

    // set spacing between milestones

    chart.horizontalSpacing('18.7%');

    // set padding for chart

    chart.padding([25, 50, 0, 50]);

    // set data

    chart.data(treeData);

​

    // get duration project

    var duration = chart.getStat("pertChartProjectDuration");

​

    // set settings for tasks

    var tasks = chart.tasks();

    // format upper label task

    tasks.upperLabels().format(function () {

        return this.item.get('fullName');

    });

​

    // format lower label task

    tasks.lowerLabels().format(function () {

        return this.duration + ' days';

    });

    decorateLabels(tasks);

​

    // create tasks tooltip

    var taskTooltip = tasks.tooltip();

    // tooltip settings

    taskTooltip.separator().enabled(true);

    taskTooltip.titleFormat(function () {

        // return fullName from data

        return this.item.get('fullName');

    }).title().useHtml('true');

​

    // set settings for critical tasks

    var critTasks = chart.criticalPath().tasks();

    // format upper label task

    critTasks.upperLabels().format(function () {

        return this.item.get('fullName');

    });

​

    // format lower label task

    critTasks.lowerLabels().format(function () {

        return this.duration + ' days';

    });

    decorateLabels(critTasks);

​

    // create tasks tooltip

    var critTasksTooltip = critTasks.tooltip();

    // tooltip settings

    critTasksTooltip.separator().enabled(true);

    critTasksTooltip.titleFormat(function () {

        // return fullName from data

        return this.item.get('fullName');

    }).title().useHtml('true');

​

    // set settings for milestones

    var milestones = chart.milestones();

    // set milestones color

    milestones.color('#2C81D5');

​

    milestones.tooltip().format(defuaultMilesoneTooltipformat);

​

    milestones.hovered().fill(function () {

        return anychart.color.lighten(this.sourceColor, 0.25);

    });

    // set milestones item size

    milestones.size('6.5%');

​

    // set settings for critical milestones

    var critMilestones = chart.criticalPath().milestones();

    // set color

    critMilestones.color('#E24B26');

    // set critMilestones item size

    critMilestones.size('6.5%');

    // format label

    critMilestones.labels().format(function () {

        return this['creator'] ? this['creator'].get('name') : this['isStart'] ? 'Start' : 'Finish';

    });

​

    critMilestones.tooltip().format(defuaultMilesoneTooltipformat);

​

    // fill color for critMilestones item

    critMilestones.fill(function () {

        return this['creator'] ? this.sourceColor : this['isStart'] ? '#60727B' : '#60727B';

    });

    // hoverFill color for critMilestones item

    critMilestones.hovered().fill(function () {

        return this['creator'] ? anychart.color.lighten(this.sourceColor, 0.25) : this['isStart'] ? '#60727b' : '#60727b';

    });

    // hoverStroke color for critMilestones item

    critMilestones.hovered().stroke(function () {

        return this['creator'] ? '1.5 #a94e3d' : null;

    });

​

    // set container id for the chart

    chart.container('container');

    // initiate chart drawing

    chart.draw();

});

​

function decorateLabels(tasks) {

    decorateUpperLabels(tasks.upperLabels());

    decorateUpperLabels(tasks.hovered().upperLabels(), true);

    decorateUpperLabels(tasks.selected().upperLabels(), true);

    decorateLowerLabels(tasks.lowerLabels());

    decorateLowerLabels(tasks.hovered().lowerLabels(), true);

    decorateLowerLabels(tasks.selected().lowerLabels(), true);

}

​

function decorateUpperLabels(labels, opt_isBold) {

    labels.padding({'top': 0, 'right': 15, 'bottom': 0, 'left': 15})

        .fontSize(10).fontWeight(opt_isBold ? 'bold' : 'normal');

}

​

function decorateLowerLabels(labels, opt_isBold) {

    labels.padding({'top': 0, 'right': 5, 'bottom': 0, 'left': 5})

        .fontSize(9).fontOpacity(0.5).fontWeight(opt_isBold ? 'bold' : 'normal');

}

​

function defuaultMilesoneTooltipformat() {

    var result = '';

    var i = 0;

    if (this['successors'] && this['successors'].length) {

        result += 'Successors:';

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

            result += '\n - ' + this['successors'][i].get('fullName');

        }

        if (this['predecessors'] && this['predecessors'].length)

            result += '\n\n';

    }

    if (this['predecessors'] && this['predecessors'].length) {

        result += 'Predecessors:';

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

            result += '\n - ' + this['predecessors'][i].get('fullName');

        }

    }

    return result;

}