JSFiddle - React, Tailwind, and code Playground

by chrisJamesC

HTML

<script src="http://nvd3.org/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<div id="chart">
  <svg></svg>
</div>

CSS

#chart svg {
  height: 400px;
}

JavaScript

var chart; 
    var data = [{
        "key": "Long",
        "values": getData()
    }];

nv.addGraph(function() {
  chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time (ms)')
      .tickFormat(d3.format(',r'));

  chart.yAxis
      .axisLabel('Voltage (v)')
      .tickFormat(d3.format('.02f'));

  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});


    function redraw() {
        d3.select('#chart svg')
            .datum(data)
            .transition().duration(500)
        .ease("linear")
            //.attr("transform", "translate(" + x(-1) + ")")
            .call(chart);
    }

    function getData() {
        var arr = [];
        var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
        for (var x = 0; x < 30; x++) {
            arr.push({x: new Date(theDate.getTime()), y: Math.random() * 100});
            theDate.setDate(theDate.getDate() + 1);
        }
        return arr;
    }
    setInterval(function () {
        var long = data[0].values;
        var next = new Date(long[long.length - 1].x);
        next.setDate(next.getDate() + 1)
        long.shift();
        long.push({x:next.getTime(), y:Math.random() * 100});
        redraw();
    }, 1500);