JSFiddle - React, Tailwind, and code Playground

by sym3tri

HTML

<body>
    <div id="container"></div>
    <script src="https://raw.github.com/racker/glimpse.js/v0.0.8/glimpse.js"></script>

    <script>

        var oneHr = 1000 * 60 * 60;
        var latencyData = [
            { "time": 0,       "latency": 100 },
            { "time": oneHr,   "latency": 50 },
            { "time": oneHr*2, "latency": 25 },
            { "time": oneHr*8, "latency": 25 }
          ];


        // Configure which data to show.
        var dataConfig = [
          {
            id: 'latencyDfw',
            title: 'Time to Connect (DFW)',
            data: latencyData,
            dimensions: {
              x: 'time',
              y: 'latency'
            }
          }
        ];

        // Create and render a line graph.
        var lineGraph = glimpse.graphBuilder().create('line')
          .config('yAxisUnit', 'GB')
          .data(dataConfig)
          .render('#container');

    </script>