html, body, #container {

    width: 100%;

    height: 99%;

    margin: 0;

    padding: 0;

}

    anychart.onDocumentReady(function () {

​

      // create data

      var data = [

        {

          id: "1",

          name: "Development",

          actualStart: "2018-01-15",

          actualEnd: "2018-03-10",

          children: [

            {

              id: "1_1",

              name: "Analysis",

              actualStart: "2018-01-15",

              actualEnd: "2018-01-25"

            },

            {

              id: "1_2",

              name: "Design",

              actualStart: "2018-01-20",

              actualEnd: "2018-02-04"

            },

            {

              id: "1_3",

              name: "Meeting",

              actualStart: "2018-02-05",

              actualEnd: "2018-02-05"

            },

            {

              id: "1_4",

              name: "Implementation",

              actualStart: "2018-02-05",

              actualEnd: "2018-02-24"

            },

            {

              id: "1_5",

              name: "Testing",

              actualStart: "2018-02-25",

              actualEnd: "2018-03-10"

            }

        ]}

      ];

​

      var data2 = [

        {

          id: "1",

          name: "New Development",

          actualStart: "2024-01-15",

          actualEnd: "2024-03-10",

          children: [

            {

              id: "1_1",

              name: "New Analysis",

              actualStart: "2024-01-25",

              actualEnd: "2024-02-15"

            },

            {

              id: "1_2",

              name: "New Design",

              actualStart: "2024-01-15",

              actualEnd: "2024-02-10"

            },

            {

              id: "1_3",

              name: "New Meeting",

              actualStart: "2024-02-01",

              actualEnd: "2024-02-01"

            },

        ]}

      ];

​

      var chart;

​

      function createChart(){

        if(chart){

          console.log("Chart already exists. Please dispose it before creating a new one.");

          return;

        }

        // create a chart

        chart = anychart.ganttProject();

​

        // set the container id

        chart.container("container");

​

        // initiate drawing the chart

        chart.draw();

        console.log("Chart created.");

      }

​

      function disposeChart() {

        if (chart) {

          chart.dispose();

          chart = null;

          console.log("Chart disposed.");

        } else {

          console.log("No chart to dispose.");

        }

      }

​

      function setChartData(data){

        if(chart){

          // create a data tree

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

          // set the data

          chart.data(treeData);

          chart.fitAll();

        } else {

          console.log("Chart isn't rendered. Please create the chart first.");

        }

      }

​

      document.getElementById('disposeChart').addEventListener('click', disposeChart);

      document.getElementById('createChart').addEventListener('click', createChart);

      document.getElementById('setFirstData').addEventListener('click', ()=>setChartData(data));

      document.getElementById('setSecondData').addEventListener('click', ()=>setChartData(data2));

    })