JSFiddle - React, Tailwind, and code Playground

by perqa

HTML

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

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

JavaScript

$(function () {
    var noofseries = 3;
    var n = 100;
    var delta = 60; // seconds
    var t0 = Math.round(new Date().getTime()/1000 - n*delta); // seconds

    // test data
    var dataCollection = [];
    var data;
    for (var j  = 0; j<noofseries; j++) {     
        data = [];
        for (var i = 0; i < n; i++) {
            data[i] = [t0+i*delta, getRandomArbitrary(0,20), ];
        }
                       dataCollection[j] = data;                
   }
      function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }


    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        series: [{
            name: 'Random 1',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: dataCollection[0] 
            
        }, {
            name: 'Random 2',
            data: dataCollection[1] 
        }, {
            name: 'Random 3',
            data: dataCollection[2] 
        }]
    });
});