JSFiddle - React, Tailwind, and code Playground

by wrxsti85

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: 400px; height: 400px; margin: 0 auto"></div>


<br /><br /><br />


<table id="statTable" width="95%" border="1"><tbody><tr bgcolor="#CCCCCC"><td align="left" width="30%"><b>Time</b></td><td align="center" width="15%"><b>Offered</b></td><td align="center" width="15%"><b>Processed</b></td><td align="center" width="15%"><b>% Handled</b></td><td align="right" width="15%"><b>Avg. Handling Time</b></td></tr><tr class="stat" bgcolor="#FFFFFF"><td><b>Sunday -- 12/23</b></td><td align="center">1</td><td align="center">1</td><td align="center">100%</td><td align="right">00:00:00</td></tr><tr class="stat" bgcolor="#EEEEEE"><td>01:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr class="stat" bgcolor="#FFFFFF"><td>02:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>03:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>04:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>05:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>06:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>07:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>08:00:00</td><td...

JavaScript

$(function() {
    
    var arrayCount = 0;
    var offeredVal = new Array();
    
    $('.stat').each(function(){
        offeredVal[arrayCount] = $(this).children('td').eq(1).html();  
        arrayCount = arrayCount + 1;        
    });
     
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Calls Offered vs Processed',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Daily Stats',
                x: -20
            },
            xAxis: {
                categories: ['12am', '1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm']
            },
            yAxis: {
                title: {
                    text: 'Amount of Calls'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'}]
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Calls Offered',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},
            {
                name: 'Calls Processed',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}]
        });
    });

});