JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

<div id="statgraph-master-container" style="height: 100px"></div>
<div id="statgraph-detail-container" style="height: 300px"></div>

JavaScript

var firstdate = [2011, 8, 28];
var newestdate = [2011, 10, 27];
var startdate = [2011, 9, 27];
var data = [328.35, 328.68, 327.9, 330.16, 329.72, 330.12, 329.97, 329.92, 330.11, 330.54, 331.27, 330.97, 330.12, 331.05, 336.12, 339.16, 338.96, 339.97, 339.66, 340.02, 341.54, 342.42, 340.84, 342.04, 342.33, 342.94, 343.09, 343.45, 343.41, 343.43, 344.08, 344.99, 344.39, 344.22, 345.15, 345.41, 345.16, 345.25, 345.74, 346.26, 346.79, 342.88, 341.44, 341.73, 340.62, 340.78, 340.49, 339.82, 340.23, 339.6, 339.52, 339.99, 340.22, 340.45, 340.93, 340.23, 336.67, 319.42, 315.8, 316.4, 314.94];
var stat = 'Level';


var masterChart, detailChart;
         
jQuery(document).ready(function() {
         
    // create the master chart
    function createMaster() {
        masterChart = new Highcharts.Chart({
            chart: {
                renderTo: 'statgraph-master-container',
                reflow: false,
                borderWidth: 0,
                backgroundColor: null,
                marginLeft: 50,
                marginRight: 20,
                zoomType: 'x',
                events: {
                     
                    // listen to the selection event on the master chart to update the 
                    // extremes of the detail chart
                    selection: function(event) {
                        var extremesObject = event.xAxis[0],
                        min = extremesObject.min,
                        max = extremesObject.max,
                        detailData = [],
                        xAxis = this.xAxis[0];
                        
                        // reverse engineer the last part of the data
                        jQuery.each(this.series[0].data, function(i, point) {
                            if (point.x > min && point.x < max) {
                                detailData.push({
                                    x: point.x,
                                    y: point.y
                                });
          ...