JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<script src="http://nvd3.org/assets/js/data/stream_layers.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<input type="button" id="change1" value="Change 1" />
<input type="button" id="change2" value="Change 2" />
<div id="chart">
<svg></svg>
</div>
JavaScript
var dynamic_lineWithFocusChart, lineWithFocusChart;
var width = 500,
height = 500;
nv.addGraph(function () {
var chart = nv.models.lineWithFocusChart().width(width).height(height);
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
dynamic_lineWithFocusChart = d3.select('#chart svg').datum(testData());
dynamic_lineWithFocusChart.transition().duration(1000).call(chart).attr('width', width).attr('height', height);
nv.utils.windowResize(chart.update);
lineWithFocusChart = chart;
return chart;
});
/*
* Simple test data generator
*/
function testData() {
return stream_layers(3, 128, .1).map(function (data, i) {
return {
key: 'Stream' + i,
values: data
};
});
}
/*
* Update the Line Focus chart with the Button Click
*/
$("#change1,#change2 ").click(function () {
dynamic_lineWithFocusChart.datum(testData());
dynamic_lineWithFocusChart.transition().duration(1000).call(lineWithFocusChart);
dynamic_lineWithFocusChart.update
});