JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css">
<div id="chart">
<svg></svg>
</div>
CSS
/* #chart svg {
height: 400px;
width: 600px;
} */
JavaScript
//var testing = document.getElementById('jsondata').innerHTML;
var width = 250, height = 100;
nv.addGraph(function () {
var chart = nv.models.multiChart()
.width(width)
.height(height)
.margin({
left: 75,
right: 50
});
chart.xAxis.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'));
chart.yAxis.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'));
//var myData = jQuery.parseJSON(testing);
d3.select('#chart svg')
.datum(myData)
.transition().attr('width', width).attr('height', height).duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function myData() {
return data = [{
"values": [{
"x": 0,
"y": 3235
}, {
"x": 173,
"y": 2114
}, {
"x": 347,
"y": 1724
}, {
"x": 526,
"y": 2703
}, {
"x": 700,
"y": 2980
}, {
"x": 931,
"y": 3086
}, {
"x": 1058,
"y": 2881
}, {
"x": 1220,
"y": 2817
}, {
"x": 1399,
"y": 2242
}, {
"x": 1584,
"y": 2639
}, {
"x": 1752,
"y": 3122
}, {
"x": 1983,
"y": 3157
}, {
"x": 2105,
"y": 3391
}, {
"x": 2284,
"y": 3441
}, {
"x": 2469,
"y": 3356
}, {
"x": 2637,
"y": 3498
}, {
"x": 2811,
"y": 3753
}, {
"x": 3042,
"y": 3384
}, {
"x": 3169,
"y": 3399
}, {
"x": 3331,
"y": 3399
}, {
"x": 3522,
"y": 2164
}, {
"x": 3690,
...