Bus Schedule

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-resource.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/light_earth.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 () {
	// set chart theme
anychart.theme('lightEarth');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/resource-charts/bus-schedule/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/resource-charts/bus-schedule/data.json',
        function (data) {
          var chart = anychart.resource();
          chart.data(data);
          chart
            .timeTrackingMode('availability-per-chart')
            .currentStartDate('2016-10-01')
            .pixPerHour(20);

          var activities = chart.activities();
          activities.stroke('#fff');
          activities.labels().padding(10);

          chart
            .grid()
            .oddHolidayHatchFill('backward-diagonal', 'green 0.25', 1.5, 15)
            .evenHolidayHatchFill('backward-diagonal', 'green 0.25', 1.5, 15);

          var resourceList = chart.resourceList();
          resourceList
            .names({
              fontColor: '#008CC3'
            })
            .types({
              fontColor: '#606166',
              fontSize: 13,
              fontWeight: 700
            })
            .descriptions({
              fontColor: '#606166',
              fontWeight: 400
            });
          resourceList.descriptions().margin().right(15);

          // Set tags settings.
          resourceList
            .tags()
            .background('#E5007D')
            .fontColor('#fff')
            .fontSize(12);

          // set container id for the chart
          chart.container('container');
          // initiate chart drawing
          chart.draw();
        }
      );
    });
  
</script>
</body>
</html>
Resource Charts are great for planning resources and time. They look like tables with a header displaying the dates or time periods and the first column is usually used for displaying the resource list.
Warning!

Bus Schedule

Bus Schedule
