Real time nvd3

Not optimal for transitions

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://tvinci.github.io/webs/chart/nv.d3.js"></script>

<div id="chart">
    <svg />
</div>

CSS

#chart {
  width: 500px;
  height: 300px;
  margin: 10px;
}
svg text{font-size:9px;}

JavaScript

nv.addGraph(function() {
     //var testdata = exampleData();
     var chart = nv.models.linePlusBarChart()
           .margin({top: 30, right: 60, bottom: 50, left: 70})
           .x(function(d,i) { return i });

     chart.xAxis.tickFormat(function(d) { return (d+1)+"-"+(d+22)+"days" })
     chart.y1Axis.tickFormat(d3.format(',f'));
     chart.y2Axis.tickFormat(d3.format(',f'));
 
     //forces the chart to start at 0
     // if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110]
     chart.lines.forceY([0]);
 
     d3.select('#chart svg').datum(eval("overview_data")).transition().duration(500).call(chart);
      d3.selectAll("rect.nv-bar").style("fill", function(d, i){return i > 50 ? "red":"blue";});
     nv.utils.windowResize(chart.update);
 
     return chart;
 });
 
 
var overview_data=[ 
     { "key" : "Achieved" , "bar": true,"values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ]} , 
     { "key" : "Required" ,             "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ]}
    ].map(function(series) {series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });return series;});