html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var data = getData();

​

  var chart = anychart.ganttProject();

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

​

  var timeLine = chart.getTimeline();

​

  var milestones = timeLine.milestones();

  var preview = milestones.preview();

  preview.enabled(true);

  milestones.height(25);

​

  // Set milestone preview drawing only on collapsed tasks.

  preview.drawOnCollapsedOnly(true);

​

  chart.title('Milestone preview draws only on collapsed');

  chart.container('container');

  chart.draw();

  chart.fitAll();

  chart.collapseAll();

});

​

function getData() {

  return [

    {id: 1, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},

    {id: 2, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29'},

    {id: 3, name: 'Define business vision', parent: 2, progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connector: [{connectTo: 4}]},

    {id: 4, name: 'Identify available skills, information and support', parent: 2, progressValue: 0, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connector: [{connectTo: 5}]},

    {id: 5, name: 'Decide whether to proceed', parent: 2, progressValue: 0, actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connector: [{connectTo: 6}]},

    {id: 6, name: 'Define the Opportunity', parent: 1, progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},

    {id: 7, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-02-26T08:00'}

  ];

}