Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script type='text/javascript' src='https://code.highcharts.com/gantt/9.1.2/highcharts-gantt.js'></script>
<div id='milestone-chart'></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

(function(H) {
  H.Renderer.prototype.symbols.diamond = H.Renderer.prototype.symbols.triangle;
})(Highcharts);

var originalData = [{
    projectName: "Project 1 Main",
    milestones: [{
        Finish: "2019-07-31T08:00:00",
        Name: "Project 1 Main - PHS-B",
        Type: "PHS-B"
      },
      {
        Finish: "2022-09-30T08:00:00",
        Name: "Project 1 Main - PHS-C",
        Type: "PHS-C"
      },
      {
        Finish: "2024-09-03T08:00:00",
        Name: "Project 1 Main - PHS-D",
        Type: "PHS-D"
      },
      {
        Finish: "2027-02-10T08:00:00",
        Name: "Project 1 Main - PHS-E",
        Type: "PHS-E"
      },
      {
        Finish: "2020-08-12T08:00:00",
        Name: "Project 1 Main - AAR",
        Type: "AAR"
      },
      {
        Finish: "2022-08-15T08:00:00",
        Name: "Project 1 Main - BBR",
        Type: "BBR"
      },
      {
        Finish: "2023-08-09T08:00:00",
        Name: "Project 1 Main - CCR",
        Type: "CCR"
      },
      {
        Finish: "2025-09-05T08:00:00",
        Name: "Project 1 Main - DDR",
        Type: "DDR"
      },
      {
        Finish: "2026-09-08T08:00:00",
        Name: "Project 1 Main - EER",
        Type: "EER"
      },
      {
        Finish: "2027-06-15T08:00:00",
        Name: "Project 1 Main - FFR",
        Type: "LRD"
      }
    ]
  },
  {
    projectName: "SubProject 1",
    milestones: [{
        Finish: "2020-05-15T08:00:00",
        Name: "SubProject 1 AAR",
        Type: "AAR"
      },
      {
        Finish: "2022-05-04T08:00:00",
        Name: "SubProject 1 BBR",
        Type: "BBR"
      },
      {
        Finish: "2023-07-14T08:00:00",
        Name: "SubProject 1 CCR",
        Type: "CCR"
      },
      {
        Finish: "2024-09-03T08:00:00",
        Name: "SubProject 1 DDR",
        Type: "DDR"
      },
      {
        Finish: "2025-04-19T08:00:00",
        Name: "SubProject 1 Deliver XYZ to Project 1 Main",
        Type: "DEL"
      }
    ]
  },
  {
   ...