Activity-Oriented Chart

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.js
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.json',
        function (data) {
          // create data tree
          var treeData = anychart.data.tree(data, 'as-table');

          // create project gantt chart
          var chart = anychart.ganttProject();

          // set data for the chart
          chart.data(treeData);

          // set start splitter position settings
          chart.splitterPosition(370);

          // get chart data grid link to set column settings
          var dataGrid = chart.dataGrid();

          // set first column settings
          dataGrid
            .column(0)
            .title('#')
            .width(30)
            .labels({ hAlign: 'center' });

          // set second column settings
          dataGrid.column(1).labels().hAlign('left').width(180);

          // set third column settings
          dataGrid
            .column(2)
            .title('Start Time')
            .width(70)
            .labels()
            .hAlign('right')
            .format(function () {
              var date = new Date(this.actualStart);
              var month = date.getUTCMonth() + 1;
              var strMonth = month > 9 ? month : '0' + month;
              var utcDate = date.getUTCDate();
              var strDate = utcDate > 9 ? utcDate : '0' + utcDate;
              return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
            });

          // set fourth column settings
          dataGrid
            .column(3)
            .title('End Time')
            .width(80)
            .labels()
            .hAlign('right')
            .format(function () {
              var date = new Date(this.actualEnd);
              var month = date.getUTCMonth() + 1;
              var strMonth = month > 9 ? month : '0' + month;
              var utcDate = date.getUTCDate();
              var strDate = utcDate > 9 ? utcDate : '0' + utcDate;
              return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
            });

          // set container id for the chart
          chart.container('container');

          // initiate chart drawing
          chart.draw();

          // zoom chart to specified date
          chart.zoomTo(951350400000, 954201600000);
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Activity-Oriented Chart

Activity-Oriented Chart
