JSFiddle - React, Tailwind, and code Playground

by Nhi Nguyen

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!-- <script src="https://code.highcharts.com/stock/highstock.js"></script> -->
<!-- <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> -->
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="./jquery.csv.js"></script>
<div class="options">
  <!-- <label class="align" >Device ID:</label> -->
  <!-- <form action="http://localhost/svo" method= "GET"> -->
  <form class="align">


    <!-- <input class="align" type="text" id="numb" name="rtms_id" autocomplete="off" placeholder="Device ID"> -->
    <input class="device" type="text" id="numb" autocomplete="off" placeholder="Device ID">

    <!-- <form class="align" id="myform" action="http://localhost" method= 'GET'> -->

    <!-- Choose Lane: -->

    <!-- <select id="dropdown_change_lane" name="lane_num"> -->
    <select id="dropdown_change_lane">
      <option value="null">Choose Lane</option>
      <option value="1">Lane 1</option>

      <option value="2">Lane 2</option>

      <option value="3">Lane 3</option>

      <option value="4">Lane 4</option>

      <option value="5">Lane 5</option>

      <option value="6">Lane 6</option>

      <option value="7">Lane 7</option>

      <option value="8">Lane 8</option>

    </select>
  
  </form>
  <button class= "submit" id="button" value="" autocomplete="off">Submit</button>
  <!-- <input type="button" value="Refresh Page"  onClick="window.location.reload()"> -->
  <!-- <div id="containers"> -->
</div>
<div id = "error">

</div>

<div id="container" class="container"></div>
<!-- <div id="container2" class="container"></div> -->
<!-- </div> -->

CSS

body {
  background: #4D5B65;
  font-family: 'Roboto Condensed', sans-serif;
}
.chart {
      min-width: 320px;
    max-width: 800px;
    height: 420px;
    margin: 0 auto;
    border: 5px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1%;
}

.align {
    padding-bottom: 1%;
    padding-top: 3%;
}
.device {
  width: 130px;
}
.options {
    width: 100%;
    //display: flex;
    text-align: center;
}
#error {
  color: white;
  padding-top: 2%;
  text-align: center;
}
input[type=text] {
  padding: 2px;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #A3B8C9;
  color:black;
  font-size: 1em;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #17243B;
}
input[type=text]:focus {
  //border-color: #333;
  //color:black;
}
select{
  //padding: 50px 0;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1em;
}
#dropdown_change_lane{
  background: #A3B8C9;
  color: #17243B;
}

.submit {
  background:#99A7B2;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 0.8em;
  //padding-top: 2%;
}
.container {
  padding-top: 10px;
}

.highcharts-button {
  //display: none;
}


/* .container{
  display: inline-flex;
  flex-direction: column;
  width:50%;
}

.containers{
  display: inline-flex;
  flex-direction: column;
  width:100%
} */


/* http://doc.jsfiddle.net/use/hacks.html#css-panel-hack */

</style> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

JavaScript

/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/



/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
$('#container').bind('mousemove touchmove touchstart', function(e) {
  var chart,
    point,
    i,
    event;

  for (i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    point = chart.series[0].searchPoint(event, true); // Get the hovered point

    if (point) {
      point.highlight(e);
    }
  }
});
/**
 * Override the reset function, we don't need to hide the tooltips and crosshairs.
 */
Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function(event) {
  this.onMouseOver(); // Show the hover marker
  this.series.chart.tooltip.refresh(this); // Show the tooltip
  this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
  var thisChart = this.chart;

  if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
    Highcharts.each(Highcharts.charts, function(chart) {
      if (chart !== thisChart) {
        if (chart.xAxis[0].setExtremes) { // It is null while updating
          chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
            trigger: 'syncExtremes'
          });
        }
      }
    });
  }
}
//Extracts a column from the 2D array into a 1D array
function getCol(matrix, col) {
  var column = [];
  for (var i = 0; i <...