JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<script src="http://dygraphs.com/extras/smooth-plotter.js"></script>
<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div class='many' id="graph"></div>

CSS

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
.many .dygraph-legend > span { display: none; }
.many .dygraph-legend > span.highlight { display: inline; }
 .dygraph-title {
    color: gray;
}

JavaScript

var testData = {
    "APGRAPH": {
        "": {
            "RSSI": "-75",
            "Width": "20",
            "Channel": "1"
        },
        "ATT696": {
            "RSSI": "-89",
            "Width": "20",
            "Channel": "11"
        },
        "Yummy_Public": {
            "RSSI": "-85",
            "Width": "20",
            "Channel": "6"
        },
        "TestNetwork24ghz": {
            "RSSI": "-93",
            "Width": "20",
            "Channel": "11"
        },
        "Pelly's Liquor": {
            "RSSI": "-77",
            "Width": "20",
            "Channel": "11"
        },
        "ATT227": {
            "RSSI": "-77",
            "Width": "20",
            "Channel": "1"
        },
        "HOME-C627": {
            "RSSI": "-83",
            "Width": "20",
            "Channel": "1"
        },
        "HP-Print-91-LaserJet 200": {
            "RSSI": "-65",
            "Width": "20",
            "Channel": "6"
        },
        "AirMusic": {
            "RSSI": "-45",
            "Width": "20",
            "Channel": "2"
        },
        "MandRandC": {
            "RSSI": "-83",
            "Width": "20",
            "Channel": "11"
        },
        "GoingConcern": {
            "RSSI": "-83",
            "Width": "20",
            "Channel": "6"
        },
        "Carroll": {
            "RSSI": "-85",
            "Width": "20",
            "Channel": "6"
        },
        "HP-Print-ED-Officejet Pro 8620": {
            "RSSI": "-85",
            "Width": "20",
            "Channel": "6"
        },
        "HOME-7766": {
            "RSSI": "-39",
            "Width": "20",
            "Channel": "11"
        },
        "NETGEAR58": {
            "RSSI": "-83",
            "Width": "20",
            "Channel": "1"
        },
        "belkin.54e": {
            "RSSI": "-73",
            "Width": "20",
            "Channel": "11"
        },
        "trickss": {
            "RSSI": "-89",
            "Width": "20",
     ...