diff --git a/examples/app.js b/examples/app.js
index 5141f28..5d6c218 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -2,7 +2,8 @@
   'use strict';
 
   $(document).on('ready', function(){
-  	var state = new recline.Model.ObjectState();
+    console.log('1..');
+    var state = new recline.Model.ObjectState();
     var sharedObject = {state: state};
 
   	var msv = new MultiStageView({
diff --git a/examples/index.html b/examples/index.html
index 8f840f6..0b7e620 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -12,11 +12,14 @@
   <link rel="stylesheet" href="../vendor/chosen-bootstrap/chosen.bootstrap.css">
   <link rel="stylesheet" href="../css/slickgrid.css">
   <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/ve_chart.css">
+  <link rel="stylesheet" href="../vendor/spectrum/spectrum.css">
   <link rel="stylesheet" href="../vendor/nvd3/build/nv.d3.css">
 
   <!-- 3rd party JS libraries -->
   <script src="../vendor/slickgrid/lib/jquery-1.7.min.js"></script>
   <script src="../vendor/chosen/chosen.jquery.min.js"></script>
+  <script src="../vendor/spectrum/spectrum.js"></script>
   <script src="../vendor/csv.js/csv.js"></script>
   <script src="../vendor/recline.backend.gdocs/backend.gdocs.js"></script>
   <script src="../vendor/lodash/dist/lodash.js"></script>
diff --git a/examples/view.js b/examples/view.js
index 1aeb60c..5ac16af 100644
--- a/examples/view.js
+++ b/examples/view.js
@@ -15,6 +15,7 @@
     var model = new recline.Model.Dataset(state.get('model'));
     model.queryState.attributes.size = 10000000;
     model.fetch().done(function(){
+      console.log('fetch view', state.get('graphType'));
       window.chart = new recline.View.nvd3[state.get('graphType')]({
           model: model,
           state: state,
diff --git a/src/ChartOptionsView.js b/src/ChartOptionsView.js
index 92f36b2..7229807 100644
--- a/src/ChartOptionsView.js
+++ b/src/ChartOptionsView.js
@@ -45,6 +45,7 @@
               '</div>',
     initialize: function(options){
       var self = this;
+      console.log('chart option view init');
       self.options = _.defaults(options || {}, self.options);
       self.state = self.options.state;
       self.stepInfo = {
@@ -53,30 +54,34 @@
       };
     },
     render: function(){
+      console.log("render options view");
       var self = this;
       var graphType = self.state.get('graphType');
-
       self.state.set('group', true, {silent:true});
       self.$el.html(Mustache.render(self.template, self.state.toJSON()));
-
+      
       // Common controls for all the charts.
       self.baseControls = new recline.View.nvd3.BaseControl({
         model: self.state.get('model'),
         state: self.state,
-        parent: self
+        parent: self,
       });
-
+            
       // Controls available only for this graphType.
       self.extendedControls = new recline.View.nvd3[graphType + 'Controls']({
         model: self.state.get('model'),
-        state: self.state
+        state: self.state,
+        renderQueryEditor : true,
+        renderFilterEditor : true,
+        parent : self
       });
-
+      
       // Chart itself.
       self.graph = new recline.View.nvd3[graphType]({
         model: self.state.get('model'),
         state: self.state
       });
+      
       // Grid
       self.grid = new recline.View.SlickGrid({
         model: self.state.get('model'),