block by timelyportfolio c7c9dbc75975df7322bd

attempt at http://stackoverflow.com/questions/24951042

Full Screen

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>
  //$(document).ready(function(){
    d3.csv("data.csv",function(err,data){
      
      //get each key of the data that is not date
      //these will be our key in the key/value pair
      //the values x and y will be month and the value
      var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})
        .map(function(k){
          return {"key":k,"values":data.map(function(d){
           return {
             //let's make this a real date
             "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)   //If 'false', every single x-axis tick label will be rendered.
          .rotateLabels(0)      //Angle to rotate x-axis labels.
          .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
          .groupSpacing(0.1)    //Distance between each group of bars.
        ;
    
        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