JSFiddle - React, Tailwind, and code Playground

by WhiteHat

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="dashboard_div" class="">
      <input type="button" class="btn btn-info btn-sm" style="background-color: #66aa00; border-color: #66aa00;" id="btnSwitch" data-name="Table" value="Show Table" />
      <input type="hidden" class="btn btn-info btn-sm" name="graphView" id="btnSwitch" value="Table" />
      <input type="hidden" class="btn btn-info btn-sm" name="graphType" value="LineChart" />

      <div class="list_of_columns " style="position:relative; display: inline;">
        <button type="button" class="btn btn-info btn-sm dropdown-toggle" style="background-color: #994499; border-color: #994499;" data-toggle="dropdown">Select Columns<span class="caret"></span></button>
        <ul class="dropdown-menu">
        </ul>
      </div>

    </div>

    <div id="canvasArea">
      <span class="loading hidden"><i class="fa fa-circle-o-notch fa-spin"></i> Loading Data...</span>
      <div id="chart_div" style="width: 100%; height: 600px;"><i class="fa fa-circle-o-notch fa-spin"></i> Loading Data...</div>
      <div id="filter_div" style="width: 100%; height: 50px;"></div>

    </div>

    <div id="toolbar_div" style="width: 100%; height: 50px;"></div>

JavaScript

var tableData = '{"cols":[{"id":"time","label":"Time","type":"datetime"},{"id":"record1","label":"record1","type":"number"},{"id":"record2","label":"record2","type":"number"},{"id":"record3","label":"record3","type":"number"},{"id":"record4","label":"record4","type":"number"},{"id":"record5","label":"record5","type":"number"},{"id":"record6","label":"record6","type":"number"},{"id":"record7","label":"record7","type":"number"},{"id":"record8","label":"record8","type":"number"},{"id":"record9","label":"record9","type":"number"},{"id":"record10","label":"record10","type":"number"},{"id":"record11","label":"record11","type":"number"},{"id":"record12","label":"record12","type":"number"},{"id":"record13","label":"record13","type":"number"},{"id":"record14","label":"record14","type":"number"}], "rows":[{"c":[{"v":"Date(2018,4,10, 14, 33, 36, 0)"},{"v":"72.6"},{"v":"84.4"},{"v":"40.9"},{"v":"80.2"},{"v":"91.7"},{"v":"0"},{"v":"39.8"},{"v":"77"},{"v":"94.8"},{"v":"40.9"},{"v":"82.7"},{"v":"100.2"},{"v":"0"},{"v":"50.2"}]},{"c":[{"v":"Date(2018,4,10, 14, 33, 51, 0)"},{"v":"77.8"},{"v":"89.5"},{"v":"64.8"},{"v":"81.6"},{"v":"100.2"},{"v":"0"},{"v":"44.9"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2018,4,10, 14, 34, 06, 0)"},{"v":"78.1"},{"v":"89.8"},{"v":"65.7"},{"v":"82.7"},{"v":"92.9"},{"v":"0"},{"v":"45.2"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2018,4,10, 14, 34, 21, 0)"},{"v":"77.7"},{"v":"89.5"},{"v":"74.4"},{"v":"82.7"},{"v":"92.9"},{"v":"0"},{"v":"44.9"},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null},{"v":null}]},{"c":[{"v":"Date(2018,4,10, 14, 34, 36, 0)"},{"v":"77.9"},{"v":"89.7"},{"v":"75.1"},{"v":"80.2"},{"v":"91.8"},{"v":"0"},{"v":"45.1"},{"v":"76.8"},{"v":"94.6"},{"v":"68.3"},{"v":"80.9"},{"v":"92"},{"v":"0"},{"v":"50"}]},{"c":[{"v":"Date(2018,4,10, 14, 34, 51,...