JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 300px"></div>


<div id="fileContent">v0;
1;
2;
3;
4;
5;</div>

JavaScript

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            marginRight: 10,
            events: {
                load: function() {

                    // set up the updating of the chart each half second
                    var series = this.series[0];
                    setInterval(function() {
                        var x = (new Date()).getTime(),
                            // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 500);
                }
            }
        },
        title: {
            text: 'Real Time Line Chart'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'}]
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },

        series: []


    };


/*
Load the data from the TXT file. This is the contents of the file:

v0;
v1;
v2;
v3;
v4;
......
V99;

*/
    //$.get('data.txt', function(data) {
    (function(data){
        var a = [];
        // Split the lines
        var parsed = data.split('\n');
        for (var i = 0; i < 5; i++) {
            a.push(parseInt(parsed[i], 10))
        }
    
        options.series[0] = {
            data: a
        };
    
        var chart = new Highcharts.Chart(options);
    })(...