JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style=""></div>

JavaScript

var data = '{"openedl2":[[1431950922000,68],[1432206174000,68],[1435941140000,68],[1437940967000,68],[1438043746000,68],[1438143097000,68],[1438143447000,68],[1438939069000,68],[1438939160000,68],[1438940991000,68],[1438949101000,68],[1438951581000,68],[1439214495000,68],[1439214501000,68],[1478944046000,68]],"openedl3":[[1431950922000,0],[1432206174000,0],[1435941140000,0],[1437940967000,0],[1438043746000,0],[1438143097000,0],[1438143447000,0],[1438939069000,0],[1438939160000,0],[1438940991000,0],[1438949101000,0],[1438951581000,0],[1439214495000,0],[1439214501000,0],[1478944046000,0]],"tobevalidated":[[1431950922000,30],[1432206174000,30],[1435941140000,30],[1437940967000,30],[1438043746000,30],[1438143097000,30],[1438143447000,30],[1438939069000,30],[1438939160000,30],[1438940991000,30],[1438949101000,30],[1438951581000,30],[1439214495000,30],[1439214501000,30],[1478944046000,30]],"closed":[[1431950922000,21],[1432206174000,21],[1435941140000,21],[1437940967000,21],[1438043746000,21],[1438143097000,21],[1438143447000,21],[1438939069000,21],[1438939160000,21],[1438940991000,21],[1438949101000,21],[1438951581000,21],[1439214495000,21],[1439214501000,21],[1478944046000,21]]}';

var graphData = JSON.parse(data);
var seriesOptions = [];

for (key in graphData) {
    if (graphData.hasOwnProperty(key)) {
        seriesOptions.push({
            data: graphData[key],
            name: key
        });
    }
}

// draw highchart
$('#container').highcharts('StockChart', {
    rangeSelector: {
        selected: 4
    },

    credits: {
        enabled: false
    },
    chart: {
        zoomType: 'x'
    },
    legend: {
        enabled: true
    },
    title: {
        text: "Previous Records of Itwebds status"
    },

    series: seriesOptions
});