diff --git a/src/models/historicalBar.js b/src/models/historicalBar.js
index d12585d..6105e60 100644
--- a/src/models/historicalBar.js
+++ b/src/models/historicalBar.js
@@ -102,7 +102,7 @@ nv.models.historicalBar = function() {
 
 
       var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
-          .data(function(d) { return d });
+          .data(function(d) { return d }, function(d,i) {return getX(d,i)});
 
       bars.exit().remove();
 
diff --git a/src/models/historicalBarChart.js b/src/models/historicalBarChart.js
index 00ca69a..f6acccb 100644
--- a/src/models/historicalBarChart.js
+++ b/src/models/historicalBarChart.js
@@ -85,7 +85,7 @@ nv.models.historicalBarChart = function() {
                              - margin.top - margin.bottom;
 
 
-      chart.update = function() { chart(selection) };
+      chart.update = function() { container.transition().call(chart) };
       chart.container = this;
 
       //set state.disabled
diff --git a/test/lineChartTest.html b/test/lineChartTest.html
index 399c8d3..0203036 100644
--- a/test/lineChartTest.html
+++ b/test/lineChartTest.html
@@ -13,6 +13,7 @@
           <a href="stackedAreaChartTest.html">Stacked Area</a>
           <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
           <a href="ScatterChartTest.html">Scatter</a>
+          <a href="realTimeChartTest.html">Real time test</a>
           <a href="interactiveBisectTest.html">nv.interactiveBisect unit tests</a>
       </div>
       <div class='chart full' id='chart1'>
diff --git a/test/realTimeChartTest.html b/test/realTimeChartTest.html
new file mode 100644
index 0000000..d8a8029
--- /dev/null
+++ b/test/realTimeChartTest.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
+<link href="teststyle.css" rel="stylesheet" type='text/css'>
+
+<body>
+	 <div class='navigation'>
+          Tests:
+          <a href="lineChartTest.html">Line Chart</a>
+          <a href="stackedAreaChartTest.html">Stacked Area</a>
+          <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
+          <a href="ScatterChartTest.html">Scatter</a>
+      </div>
+  <h3>Example showing real time chart updating</h3>
+  The chart below is a historical bar chart, which is ideal for visualizing time series data.<br/>
+  First, you need to update the data model for the chart. In the example, we append a random number
+  every half a second. Then, you call <strong>chart.update()</strong>.
+
+<div id='chart' class='chart half with-transitions'>
+	<svg></svg>
+	<button id='start-stop-button'>Start/Stop Stream</button>
+</div>
+
+
+<script src="../lib/d3.v3.js"></script>
+<script src="../nv.d3.js"></script>
+<script src="../src/tooltip.js"></script>
+<script src="../src/utils.js"></script>
+<script src="../src/interactiveLayer.js"></script>
+<script src="../src/models/legend.js"></script>
+<script src="../src/models/axis.js"></script>
+<script src="../src/models/scatter.js"></script>
+<script src="../src/models/line.js"></script>
+<script src="../src/models/lineChart.js"></script>
+<script src="../src/models/historicalBar.js"></script>
+<script src="../src/models/historicalBarChart.js"></script>
+
+<script>
+var chart;
+var data = [{
+	key: "Stream 1",
+	color: "orange",
+	values: [
+		{x: 1, y: 1}
+	]
+}];
+nv.addGraph(function() {
+  
+  chart = nv.models.historicalBarChart();
+
+  chart
+      .x(function(d,i) { return d.x });
+
+  chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
+      .tickFormat(d3.format(',.1f'))
+      .axisLabel("Time")
+      ;
+
+  chart.yAxis
+      .axisLabel('Random Number')
+      .tickFormat(d3.format(',.4f'));
+
+  chart.showXAxis(true).showYAxis(true).rightAlignYAxis(true).margin({right: 90});
+
+  d3.select('#chart svg')
+      .datum(data)
+      .transition().duration(500)
+      .call(chart);
+
+  nv.utils.windowResize(chart.update);
+
+  return chart;
+});
+
+var x = 2;
+var run = true;
+setInterval(function(){
+	if (!run) return;
+	
+	var spike = (Math.random() > 0.95) ? 10: 1;
+	data[0].values.push({
+		x: x,
+		y: Math.random() * spike
+	});
+
+	if (data[0].values.length > 70) {
+		data[0].values.shift();
+	}
+	x++;
+
+	chart.update();
+}, 500);
+
+d3.select("#start-stop-button").on("click",function() {
+	run = !run;
+});
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
