JSFiddle - React, Tailwind, and code Playground

by Arunkumar Gudelli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

JavaScript

var g1 = '[[{"x":1353060901000,"y":12.87,"z":null},{"x":1353062821000,"y":65.64,"z":null},{"x":1353062881000,"y":-20.08,"z":null},{"x":1353063001000,"y":145.86,"z":null},{"x":1353063841000,"y":31.51,"z":null},{"x":1353071281000,"y":-10.71,"z":null},{"x":1353071521000,"y":37.68,"z":null},{"x":1353071761000,"y":-10.95,"z":null},{"x":1353073861000,"y":11.38,"z":null},{"x":1353073981000,"y":-21.09,"z":null}],[{"x":1353060901000,"y":12.87,"z":null},{"x":1353062821000,"y":65.64,"z":null},{"x":1353062881000,"y":-20.08,"z":null},{"x":1353063001000,"y":145.86,"z":null},{"x":1353063841000,"y":31.51,"z":null},{"x":1353071281000,"y":-10.71,"z":null},{"x":1353071521000,"y":37.68,"z":null},{"x":1353071761000,"y":-10.95,"z":null},{"x":1353073861000,"y":11.38,"z":null},{"x":1353073981000,"y":-21.09,"z":null}],[{"x":1353060901000,"y":12.87,"z":null},{"x":1353062821000,"y":65.64,"z":null},{"x":1353062881000,"y":-20.08,"z":null},{"x":1353063001000,"y":145.86,"z":null},{"x":1353063841000,"y":31.51,"z":null},{"x":1353071281000,"y":-10.71,"z":null},{"x":1353071521000,"y":37.68,"z":null},{"x":1353071761000,"y":-10.95,"z":null},{"x":1353073861000,"y":11.38,"z":null},{"x":1353073981000,"y":-21.09,"z":null}]]';
    var jsonStringtoArray = JSON.parse(g1);
    buildGraph(jsonStringtoArray);


    function buildGraph(activity) {

        $.each(activity, function (i, dataset) {

            //console.log(dataset);
            $('<div class="chart" id="chart' + i + '">')
                .appendTo('#container');
            var s1 = new Date();

            var chartConfig = {
                chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20,
                    renderTo: 'chart' + i,
                    zoomType: 'x'
                },

                tooltip: {
                    formatter: function (e) {
                        var chart, point, i;
                        var current =...