diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index af63c78cff1..173f2e8973a 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -1,28 +1,79 @@
 /*---------------------------------------------------------
  * OpenERP web_graph
  *---------------------------------------------------------*/
+/*global openerp:true*/
+/*global $:true*/
+'use strict';
 
 openerp.web_graph = function (instance) {
 
 var _lt = instance.web._lt;
 var _t = instance.web._t;
 
-
 instance.web.views.add('graph', 'instance.web_graph.GraphView');
+
 instance.web_graph.GraphView = instance.web.View.extend({
-    template: "GraphView",
+    template: 'GraphView',
     display_name: _lt('Graph'),
-    view_type: "graph",
+    view_type: 'graph',
+    events: {
+        'click .graph_mode_selection li' : function (event) {
+            event.preventDefault();
+            var mode = event.target.attributes['data-mode'].nodeValue;
+            if (mode == 'data') {
+                this.chart_view.hide();
+                this.pivot_table.show();
+            } else {
+                this.pivot_table.hide();
+                this.chart_view.show(mode);
+            }
+        },
+    },
 
     init: function(parent, dataset, view_id, options) {
         this._super(parent, dataset, view_id, options);
+        this.pivot_table = new PivotTable(this);
+        this.chart_view = new ChartView(this);
+    },
+
+    view_loading: function (fields_view_get) {
+        this.pivot_table.appendTo('.graph_pivot');
+        this.chart_view.appendTo('.graph_chart');
+        this.chart_view.hide();
     },
 
     do_show: function () {
         this.do_push_state({});
         return this._super();
     },
+});
 
+var PivotTable = instance.web.Widget.extend({
+    template: 'pivot_table',
+
+    show: function () {
+        this.$el.css('display', 'block');
+    },
+
+    hide: function () {
+        this.$el.css('display', 'none');
+    },
 
 });
+
+var ChartView = instance.web.Widget.extend({
+    template: 'chart_view',
+
+    show: function () {
+        this.$el.css('display', 'block');
+    },
+
+    hide: function () {
+        this.$el.css('display', 'none');
+    },
+
+});
+
+
+
 };
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index 75e32ee5070..f38dadc74ce 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/addons/web_graph/static/src/xml/web_graph.xml
@@ -1,4 +1,31 @@
-<template>
-    <div t-name="GraphView">
-    </div>
-</template>
+<templates>
+    <t t-name="GraphView">
+    	<div class="graph_header">
+    		<div class="btn-group">
+    			<label type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    				Chart type <span class="caret"></span>
+    			</label>
+    			<ul class="dropdown-menu graph_mode_selection" role="menu">
+    				<li><a data-mode="data" href="#">Pivot table</a></li>
+    				<li><a data-mode="bar_chart" href="#">Bar chart</a></li>
+    				<li><a data-mode="line_chart" href="#">Line Chart</a></li>
+    				<li><a data-mode="pie_chart" href="#">Pie chart</a></li>
+    			</ul>
+    		</div>
+
+    	</div>
+    	<div class="graph_main_content">
+    		<div class="graph_pivot"></div>
+    		<div class="graph_chart"></div>
+    	</div>
+    </t>
+
+    <t t-name="pivot_table">
+    	<div>Hello Pivot</div>
+    </t>
+
+    <t t-name="chart_view">
+    	<svg></svg>
+    </t>
+
+</templates>