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://nvd3.org/assets/js/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<div id="chart">
<svg></svg>
</div>
JavaScript
function generateData() {
var array = [
{ month: "January", md5: 1, ip: 12, url: 10 },
{ month: "February", url: 102, ip: 200 },
{ month: "March", url: 192, ip: 15 },
{ month: "June", ip: 10, url: 50 }
];
var data = [],
data2 = [];
for (var i = 0; i < array.length; i++) {
data.push({ y: array[i].url, x: array[i].month });
data2.push({ y: array[i].ip, x: array[i].month });
}
return [
{
values: data,
key: "URL",
color: "#ff7f0e"
},
{
values: data2,
key: "IP",
color: "#ff7f0e"
}
];
}
nv.addGraph(function() {
var chart = nv.models.lineChart().useInteractiveGuideline(true);
var months = ["January", "February", "March", "April"];
chart.xAxis.axisLabel("Time (ms)").tickFormat(function(index) {
return months[index];
});
chart.x(function(d, i) {
return i;
});
chart.yAxis.axisLabel("Voltage (v)").tickFormat(d3.format(".02f"));
d3
.select("#chart svg")
.datum(generateData())
.transition()
.duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});