index.html
<!DOCTYPE html>
<html meta-charset="utf-8">
<script src = "//d3js.org/d3.v3.js"></script>
<script src = "//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
<link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
<div id = "chart1">
<svg></svg>
</div>
<script>
d3.csv("data.csv",function(err,data){
var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})
.map(function(k){
return {"key":k,"values":data.map(function(d){
return {
"x":d3.time.format("%Y-%b-%d").parse("2014-" + d.date + "-01"),
"y":+d[k]
}
})}
})
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.transitionDuration(350)
.reduceXTicks(true)
.rotateLabels(0)
.showControls(true)
.groupSpacing(0.1)
;
chart.xAxis
.tickFormat(d3.time.format('%b'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(dataToPlot)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
})
</script>
</html>
data.csv
date,Equipment:Electricity:LGF,Equipment:Electricity:GF,Equipment:Electricity:1st,Equipment:Electricity:2nd
jan,6726.864146,5648.080727,2598.709507,2042.260163
feb,6405.091236,5377.910358,2474.402801,1944.570663
mar,6727.448125,5648.571054,2598.935109,2042.437457
apr,6433.12227,5401.446071,2485.231698,1953.080819
may,6993.742947,5872.160325,2701.809623,2123.28394
jun,6433.12227,5401.446071,2485.231698,1953.080819
jul,6727.448125,5648.571054,2598.935109,2042.437457
aug,6993.742947,5872.160325,2701.809623,2123.28394
sep,6166.827448,5177.8568,2382.357183,1872.234336
oct,6993.742947,5872.160325,2701.809623,2123.28394
nov,6699.417092,5625.035342,2588.106212,2033.927301
dec,6167.411428,5178.347127,2382.582785,1872.411631