JSFiddle - React, Tailwind, and code Playground

by mudBorn

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height:500px; min-width: 600px"></div>

JavaScript

var dataJs=
[[[1384885800000,1],[1384972200000,2],[1385058600000,4],[1385145000000,5],[1385231400000,4],[1385317800000,4],[1386527400000,5],[1389465000000,5],[1418236200000,5]],[[1384885800000,0],[1384972200000,0],[1385058600000,0],[1385145000000,0],[1385231400000,1],[1385317800000,4],[1386527400000,4],[1389465000000,3],[1418236200000,2]],[[1384885800000,0],[1384972200000,1],[1385058600000,1],[1385145000000,1],[1385231400000,1],[1385317800000,2],[1386527400000,2],[1389465000000,3],[1418236200000,4]]];

$( document ).ready(function() {
            $(function() {
                var seriesOptions = [],
                    yAxisOptions = [],
                    seriesCounter = 0,
                    names = ['Requested', 'Submitted', 'Approved'],
                    colors = Highcharts.getOptions().colors;          
                       
      $.parseJSON(dataJs,function (data) {
        alert(data);                          
                 $.each(names, function(i, name) {                
                        seriesOptions[i] = {
                        
                            name: name,
                             step:true,
                            data: data[i]                         
                        };

                        // As we're loading the data asynchronously, we don't know what order it will arrive. So
                        // we keep a counter and create the chart when all the data is loaded.
                        seriesCounter++;

                        if (seriesCounter == names.length) {
                            createChart();
                        }
                    });
                });

                // create the chart when all data is loaded
                function createChart() {
                    Highcharts.setOptions({
                           
                        global: {
                            useUTC: false
                        }
                    });

                   ...