Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chart-emg1"></div>

CSS

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

JavaScript

// mocked data
var data = [];

for (var i = 0; i < 1000; i++) {
  data.push([i * 3600, Math.random() * 50]);
}

data[10][1] = 55;
data[100][1] = 2;
data[500][1] = 55;

var pointsToHighlight = [{
  x: 10 * 3600,
  y: 55
}, {
  x: 100 * 3600,
  y: 2
}, {
  x: 500 * 3600,
  y: 55
}];

var chart1 = new Highcharts.chart({
  chart: {
    renderTo: 'chart-emg1',
    type: 'line',
    events: {
      load: function() {
        this.series[0].points.forEach(point => {
          const isPointToHighlight = pointsToHighlight.some(
            p => p.x === point.x && p.y === point.y
          );
          if (isPointToHighlight) {
            point.update({
              color: 'red',
              marker: {
                enabled: true
              }
            }, false);
          }
        });

        this.redraw();
      }
    }
  },
  title: {
    text: 'EMG 1'
  },
  xAxis: {
    tickInterval: 1

  },
  yAxis: {
    title: {
      text: 'Voltage'
    }
  },
  series: [{
    data
  }]
});