Highcharts Demo

author(s): Torstein Hønsi

by Yonathan Benitah

HTML

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

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

JavaScript

var mails = [{
  x: Date.UTC(2019, 7, 12),
  type: 'personal'
}, {
  x: Date.UTC(2019, 7, 13),
  type: 'personal'
}, {
  x: Date.UTC(2019, 7, 14),
  type: 'personal'
}, {
  x: Date.UTC(2019, 7, 15),
  type: 'personal'
}, {
  x: Date.UTC(2019, 7, 12),
  type: 'business'
}, {
  x: Date.UTC(2019, 7, 12),
  type: 'business'
}, {
  x: Date.UTC(2019, 7, 14),
  type: 'business'
}, {
  x: Date.UTC(2019, 7, 15),
  type: 'business'
}, {
  x: Date.UTC(2019, 7, 12),
  type: 'health'
}, {
  x: Date.UTC(2019, 7, 12),
  type: 'health'
}, {
  x: Date.UTC(2019, 7, 14),
  type: 'health'
}, {
  x: Date.UTC(2019, 7, 15),
  type: 'health'
}];

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    events: {
      load: function() {
        var chart = this,
          seriesData = {},
          occurrences = {};

        mails.forEach(function(mail) {
          if (!seriesData[mail.type]) {
            seriesData[mail.type] = {
              data: []
            };
          }

          if (!occurrences[mail.x]) {
            occurrences[mail.x] = 1;
          } else {
            occurrences[mail.x]++;
          }

          seriesData[mail.type].data.push([mail.x, occurrences[mail.x]]);
        });

        for (var series in seriesData) {
          chart.addSeries({
            name: series,
            data: seriesData[series].data
          }, false);
        }

        chart.redraw();
      }
    }
  },
  title: {
    text: 'Mails'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    tickInterval: 1
  },
  plotOptions: {
    series: {
      marker: {
        symbol: 'circle'
      }
    }
  }
});