52,000 points with data grouping

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

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

CSS

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/large-dataset.json', function(data) {

  // Pretend data came from Morningstar as JSON
  data = {
    "Security": [{
      "Id": "0P00002D82",
      "HistoryDetail": [{
          "EndDate": "2013-12-02",
          "Value": "63.054322"
        },
        {
          "EndDate": "2013-12-03",
          "Value": "62.8591977"
        }
      ]
    }]
  };


  // Create the basic chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Test Morningstar integration',
      align: 'left'
    },

    series: [{
      // Convert to X/Y where X is a Date timestamp and Y a number
      data: data.Security[0].HistoryDetail.map(
        n => ({
          x: new Date(n.EndDate).getTime(),
          y: parseFloat(n.Value)
        }))
    }]
  });
});