html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // set stage

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

​

  // create data tree on our data

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

​

  // create resource gantt chart

  var resource = anychart.ganttResource();

​

  // set splitter position

  resource.splitterPosition("22%");

​

  // chart size and position

  resource.bounds("0%", "50%", "100%", "50%");

​

  // set data for the chart

  resource.data(treeDataResource);

​

  var treeDataGantt = anychart.data.tree(getGanttData(), "as-tree");

  var gantt = anychart.ganttProject();

  gantt.splitterPosition("22%");

  gantt.bounds(0, 0, "100%", "50%")

​

  var ganttScale = gantt.xScale();

​

  // set scale maximum and minimum

  var min = 1169640800000;

  var max = 1174655390000;

  var dif = max - min;

​

  ganttScale.minimum(min);

  ganttScale.maximum(max);

​

  gantt.zoomTo(min, max);

​

  gantt.data(treeDataGantt);

  gantt.container(stage);    

  gantt.draw();

​

  // enable the scroller

  var scroller = anychart.standalones.scroller();

​

  var resourceScale = resource.xScale();

​

  resourceScale.minimum(min);

  resourceScale.maximum(max);

​

  resource.zoomTo(min, max);

​

  // set event listener on resource scroller

  resource.getTimeline().horizontalScrollBar().listen('scrollChange', function(e) {

    var startDate = Math.round(e.startRatio*dif)+min;

    console.log(dif)

    var endDate = Math.round(e.endRatio*dif)+min;

    gantt.zoomTo(startDate, endDate);

  });

​

  // disable gantt scroller

  gantt.getTimeline().horizontalScrollBar().enabled(false);

​

  resource.container(stage);    

  resource.draw();

});

​

function getGanttData(){

  return [

    {

      "name": "Activities",

      "actualStart": Date.UTC(2007, 0, 25),

      "actualEnd": Date.UTC(2007, 2, 14),

      "children": [

        {

          "name": "Draft plan",

          "actualStart": Date.UTC(2007, 0, 25),

          "actualEnd": Date.UTC(2007, 1, 3)

        },

        {

          "name": "Board meeting",

          "actualStart": Date.UTC(2007, 1, 4),

          "actualEnd": Date.UTC(2007, 1, 4)

        },

        {

          "name": "Research option",

          "actualStart": Date.UTC(2007, 1, 4),

          "actualEnd": Date.UTC(2007, 1, 24)

        },

        {

          "name": "Final plan",

          "actualStart": Date.UTC(2007, 1, 24),

          "actualEnd": Date.UTC(2007, 2, 14)

        }

      ]

    }];

}

​

function getResourceData() {

  return [

    {

      "id": "1",

      "name": "Alex Exler",

      "periods": [

        {"id": "1_1", "start": 1171468800000, "end": 1171987200000}]

    },

    {

      "id": "2",

      "name": "Philip Kineyko",

      "periods": [

        {"id": "2_1", "start": 1173024000000, "end": 1173715200000},

        {"id": "2_2", "start": 1173888000000, "end": 1174406400000}]

    },

    {

      "id": "3",

      "name": "Luke Liakos",

      "periods": [

        {"id": "3_1", "start": 1169740800000, "end": 1170172800000},

        {"id": "3_2", "start": 1171987200000, "end": 1172505600000}]

    },

    {

      "id": "4",

      "name": "Judy Penfold",

      "periods": [

        {"id": "4_1", "start": 1171814400000, "end": 1172419200000},

        {"id": "4_2", "start": 1173628800000, "end": 1174320000000}]

    },

    {

      "id": "5",

      "name": "Patricia Darmon",

      "periods": [

        {"id": "5_1", "start": 1171296000000, "end": 1171382400000},

        {"id": "5_2", "start": 1174233600000, "end": 1174579200000}]

    }

  ];

}