Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px; margin: 0 auto"></div>

JavaScript

function getData() {
    var arr = [];
    var timestamp = 133400880000;
    
    var records = 5000;  // Change to 4999 and it works
    var msInterval = 10; // Changing to higher intervals, makes graph more accurate
    
    for (var i = 0; i < records; i = i + 1) {
        timestamp += msInterval;
        arr.push([
            timestamp,
            2 * Math.sin(i / 100) + Math.random()
        ]);
    }
    return arr;
}


var data = getData();

Highcharts.chart('container', {
    chart: {
    		type: 'line',
        zoomType: 'x'
    },
    xAxis: { type: 'datetime' },
    boost: {
        useGPUTranslations: true
    },
    navigator: {
    	enabled: true
    },
    plotOptions: {       
      series: {
        marker: {
          enabled: false,
        }
      }
    },
    tooltip: {
        valueDecimals: 2
    },
    series: [{
        data: data,
        lineWidth: 0.5
    }]
});