Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<div id="container"></div>

CSS

#container {
    height: 400px;
    width: 800px;
}

JavaScript

// random data generation
totalItemCount = 22;
selectedWorkOrderNo = 100000000 + totalItemCount - 1;
workOrderHistory = [];
for (let number = 1; number < totalItemCount; number++) {
  workOrderHistory.push({
    workOrderNo: 100000000 + number,
    switchingPoint: number === 9,
    dateCompleted: `2022-12-${number.toString(10).padStart(2, '0')}`,
    value: Math.floor(Math.random() * 1000)
  })
}

// crosshair management
crosshair = undefined;
drawCrosshair = function(crosshair, lineColor) {
  return function(event) {
    if (crosshair) {
      crosshair.destroy();
    }
    const xAxis = this.xAxis[0];
    this.series[0].data
      .filter(point => point.options.custom.switchingPoint)
      .forEach(point => {
        const tick = xAxis.ticks[point.x];
        if (!tick) {
          return;
        }
        const crosshairXPosition = tick.mark.attr('pathArray')[0][1];
        crosshair = this.renderer.path([
          ['M', crosshairXPosition, this.plotTop],
          ['L', crosshairXPosition, this.plotTop + this.plotHeight]
        ]).attr({
          stroke: lineColor,
          'stroke-width': 3,
          zIndex: 2
        }).add();
      });
  };
};

// tooltip
tooltipFormatter = function() {
  return function(tooltip) {
    return `<table>
            <tr><td>Work Order Number</td><td>: ${this.point.name}</td></tr>
            <tr><td>${this.series.name}</td><td>: ${this.point.y}</td></tr>
            </table>`;
  }
};

// logic to map DTOs to point-options-objects 
convertToChartPoint = function(item, selectedWorkOrderNo) {
  return {
    x: moment(item.dateCompleted).utc(true).valueOf(),
    y: item.value,
    name: item.workOrderNo,
    color: item.workOrderNo === selectedWorkOrderNo ? '#D7DA05' : '#118FB2',
    custom: {
      switchingPoint: item.switchingPoint
    },
  };
};

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
      console.log(this.plotSizeX)
        const minWidth = this.plotSizeX / 9 *...