JSFiddle - React, Tailwind, and code Playground

by Shabeer Sheffa

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<h2>Cumulative Chart</h2>

<div id="multiBarChart">
    <svg style="height:350px;"></svg>
</div>

JavaScript

nv.addGraph(function () {
    var chart = nv.models.cumulativeLineChart()
        .x(function (d) {
        return d[0]
    })
        .y(function (d) {
        return d[1]
    })
        .color(d3.scale.category10().range());
    chart.xAxis.tickFormat(function (d) {
        return d3.time.format('%H:%M:%S')(new Date(d))
    });
    chart.yAxis.tickFormat(d3.format(',.2f'));

    var svg = d3.select(elem) //elem is the div, we add data here
    .append("#chart svg")
        .datum(data)
        .transition().duration(500)
        .call(chart);

    var svg2 = d3.select(elem) //I try to add title as text
    .append("text")
        .attr("x", 200)
        .attr("y", 100)
        .attr("font-family", "sans-serif")
        .attr("font-size", "20px")
        .attr("fill", "black")
        .text("Water Pump Force");

    nv.utils.windowResize(chart.update);
    return chart;
});

data = [{
    "key": "Series 1",
        "values": [
        [1025409600000, 0],
        [1028088000000, -6.3382185140371],
        [1030766400000, -5.9507873460847],
        [1033358400000, -11.569146943813],
        [1036040400000, -5.4767332317425],
        [1038632400000, 0.50794682203014],
        [1041310800000, -5.5310285460542],
        [1043989200000, -5.7838296963382],
        [1046408400000, -7.3249341615649], ]
}, {
    "key": "Series 2",
        "values": [
        [1025409600000, 0],
        [1064894400000, 0],
        [1028088000000, 0],
        [1030766400000, 0],
        [1033358400000, 0],
        [1036040400000, 0],
        [1038632400000, 0],
        [1041310800000, 0],
        [1043989200000, 0],
        [1046408400000, 0], ]
}, ]