html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

label {

    display: inline-block;

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

var charts = [];

var treemap, sunburst, gantt;

​

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        name: "Root",

        actualStart: Date.UTC(2018, 0, 25),

        actualEnd: Date.UTC(2018, 2, 14),

        children: [

          {

            name: "Child 1",

            value: 65511098,

            actualStart: Date.UTC(2018, 0, 25),

            actualEnd: Date.UTC(2018, 1, 3)

          },

          {

            name: "Child 2",

            value: 64938716,

            actualStart: Date.UTC(2018, 1, 4),

            actualEnd: Date.UTC(2018, 1, 4)

          },

          {

            name: "Child 3",

            value: 59797978,

            actualStart: Date.UTC(2018, 1, 4),

            actualEnd: Date.UTC(2018, 1, 24)

          },

          {

            name: "Child 4",

            value: 46070146,

            actualStart: Date.UTC(2018, 1, 24),

            actualEnd: Date.UTC(2018, 2, 14)

          }

        ]

    }];

​

    // create a data tree

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

​

    // create container for all charts

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

​

    // create a treemap chart and set the data

    treemap = anychart.treeMap(treeData);

    // set the title

    treemap.title("Tree Data Model: Basic Sample");

    // set the container id and draw

    treemap.container(stage).draw();

    charts.push(treemap);

​

    // create a sunburst chart and set the data

    sunburst = anychart.sunburst(treeData);

    // set the title

    sunburst.title("Tree Data Model: Quick Start");

    // set the container id and draw

    sunburst.container(stage).draw();

    sunburst.enabled(false);

    charts.push(sunburst);

​

​

    // create a gantt chart

    gantt = anychart.ganttProject();

    // set the data

    gantt.data(treeData);

    // set the title

    gantt.title("Tree Data Model: Quick Start");

    // set the container id and draw

    gantt.container(stage).draw();

    // fit elements to the width of the timeline

    gantt.fitAll();

    gantt.enabled(false);

    charts.push(gantt);

​

});

​

// switch the chart shown

function switchChart(chart){

  for (var i = 0; i < charts.length; i++) {

    charts[i].enabled(charts[i] === chart);

  }

}