html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function(){

​

  // data tree settings

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

​

  // chart type

  var chart = anychart.ganttResource();

​

  // chart data

  chart.data(treeData);

​

  // data tree width

  chart.splitterPosition(170);

​

  var dataGrid = chart.dataGrid();

​

  // settings for first column

  dataGrid.column(0).width(30).title().text("#");

​

  // settings for the second column

  dataGrid.column(1).width(140).format(function(item) {

    return item.get("name");

  }).title().text("Person");

​

  // chart container

  chart.container("container");

​

  // initiate drawing

  chart.draw();

​

  chart.fitAll();

});

​

// data

var data = [

  {

    'id': 0,

    'project_number': 675023,

    'name': 'Phase 1 - Strategic Plan',

    'periods': [{"id": "1_1", "start": Date.UTC(2007, 1, 13), "end": Date.UTC(2007, 2, 1)}],

    'markers': [

      {'value': Date.UTC(2007, 1, 14), 'type': "diagonalCross", 'fill': "#CF3E3E 0.7", 'stroke': 'none'},

      {'value': Date.UTC(2007, 1, 20), 'type': "star4", 'fill': "gold", 'stroke': 'darkorange'}

    ]

  },

  {

    "id": "2",

    "name": "Self-Assessment",

    "periods": [

      {"id": "2_1", "start": Date.UTC(2007, 0, 15), "end": Date.UTC(2007, 1, 20)}]

  },

  {

    "id": "3",

    "name": "Define business vision",

    "periods": [

      {"id": "3_1", "start": Date.UTC(2007, 3, 2), "end": Date.UTC(2007, 3, 28)}],

    'markers': [

      {'value': Date.UTC(2007, 3, 20), 'type': "star5", 'fill': "#0d47a1 0.07", 'stroke': 'red'}

    ]

  },

  {

    "id": "4",

    "name": "Identify available skills, information and support",

    "periods": [

      {"id": "4_1", "start": Date.UTC(2007, 3, 15), "end": Date.UTC(2007, 4, 1)}],

    'markers': [

      {'value': Date.UTC(2007, 3, 20), 'type': "star4",

'fill': {

  angle: 90,

  keys: ["#CFC0A9", "#E6D5BC", "#E8D9C3"]

}, 'stroke': {

  keys: ["#AFA4A4", "#C2B6B6", "#C8BDBD"],

  thickness: 2

}}

    ]

  },

  {

    "id": "5",

    "name": "Decide whether to proceed",

    "periods": [

      {"id": "5_1", "start": Date.UTC(2007, 2, 12), "end": Date.UTC(2007, 2, 13)}]

  },

  {

    "id": "6",

    "name": "Define the Opportunity",

    "periods": [

      {"id": "6_1", "start": Date.UTC(2007, 3, 11), "end": Date.UTC(2007, 3, 19)}]

  }

];