diff --git a/test/index.html b/test/index.html
index 5d4831dd..7a102b4f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -55,6 +55,7 @@
   <script type="text/javascript" src="../src/view.slickgrid.js"></script>
   <script type="text/javascript" src="../src/view.transform.js"></script>
   <script type="text/javascript" src="../src/view.graph.js"></script>
+  <script type="text/javascript" src="../src/view.flot.js"></script>
   <script type="text/javascript" src="../src/view.map.js"></script>
   <script type="text/javascript" src="../src/view.timeline.js"></script>
   <script type="text/javascript" src="../src/widget.pager.js"></script>
@@ -66,6 +67,7 @@
   <script type="text/javascript" src="view.grid.test.js"></script>
   <script type="text/javascript" src="view.slickgrid.test.js"></script>
   <script type="text/javascript" src="view.graph.test.js"></script>
+  <script type="text/javascript" src="view.flot.test.js"></script>
   <script type="text/javascript" src="view.map.test.js"></script>
   <script type="text/javascript" src="view.timeline.test.js"></script>
   <script type="text/javascript" src="view.multiview.test.js"></script>
diff --git a/test/view.flot.test.js b/test/view.flot.test.js
new file mode 100644
index 00000000..4bf761f6
--- /dev/null
+++ b/test/view.flot.test.js
@@ -0,0 +1,71 @@
+module("View - Flot");
+
+test('basics', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.Flot({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+  equal(view.state.get('graphType'), 'lines-and-points');
+  // view will auto render ...
+  assertPresent('.editor', view.elSidebar);
+  view.remove();
+});
+
+test('initialize', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.Flot({
+    model: dataset,
+    state: {
+      'graphType': 'lines',
+      'group': 'x',
+      'series': ['y', 'z']
+    }
+  });
+  $('.fixtures').append(view.el);
+  equal(view.state.get('graphType'), 'lines');
+  deepEqual(view.state.get('series'), ['y', 'z']);
+
+  // check we have updated editor with state info
+  equal(view.elSidebar.find('.editor-type select').val(), 'lines');
+  equal(view.elSidebar.find('.editor-group select').val(), 'x');
+  var out = _.map(view.elSidebar.find('.editor-series select'), function($el) {
+    return $($el).val();
+  });
+  deepEqual(out, ['y', 'z']);
+
+  view.remove();
+});
+
+test('dates in graph view', function () {
+  expect(0);
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.Flot({
+    model: dataset,
+    state: {
+      'graphType': 'lines',
+      'group': 'date',
+      'series': ['y', 'z']
+    }
+  });
+  $('.fixtures').append(view.el);
+
+  view.remove();
+});
+
+test('FlotControls basics', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.FlotControls({
+    model: dataset,
+    state: {
+      graphType: 'bars',
+      series: [] 
+    }
+  });
+  $('.fixtures').append(view.el);
+  equal(view.state.get('graphType'), 'bars');
+  // view will auto render ...
+  assertPresent('.editor', view.el);
+  view.remove();
+});
+