html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    var stage = anychart.graphics.create("container");

​

  var data = [

    {"id": "1", "name": "Self-Assessment", "progressValue": "25", "actualStart": 951350400000},

    {"id": "2", "name": "Define business vision", "progressValue": "0", "actualStart": 951408000000},

    {"id": "3", "name": "Identify available skills, information and support", "progressValue": "0", "actualStart": 951494400000},

    {"id": "4", "name": "Decide whether to proceed", "progressValue": "0", "actualStart": 951609600000}

  ];

  var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.AS_TABLE);

​

  dataGrid = anychart.standalones.dataGrid();

  dataGrid.data(treeData);

  var column0 = dataGrid.column(0);

  column0.title("Raw Data");

  column0.setColumnFormat("progressValue", "text");

  column0.width(100);

  var column1 = dataGrid.column(1);

  column1.title("percent");

  column1.setColumnFormat("progressValue", "percent");

  column1.width(150);

​

  dataGrid.tooltip(false);

  dataGrid.listen("signal", dataGrid.draw);

  dataGrid.container(stage);

  dataGrid.draw();

});