diff --git a/addons/web_graph/static/src/js/charts.js b/addons/web_graph/static/src/js/charts.js
index 6944aef9672..e0b41eaff41 100644
--- a/addons/web_graph/static/src/js/charts.js
+++ b/addons/web_graph/static/src/js/charts.js
@@ -1,75 +1,77 @@
 
-function draw_chart (svg, mode, pivot) {
-    Charts[mode](pivot);
-}
-
-function format_chart_data (pivot) {
-    var values = _.map(pivot.rows.headers[0].children.reverse(), function (pt) {
-        var val = pivot.get_value(pt.id, 2);
+function draw_chart (mode, pivot) {
+    var values = _.map(pivot.rows.main.children, function (pt) {
+        var val = pivot.get_value(pt.id, pivot.cols.main.id);
         return {x: pt.name, y: val};
     });
-    return [{key: 'Bar chart', values: values}];
 
+    switch (mode) {
+        case 'bar_chart':
+            bar_chart(values);
+            break;
+        case 'line_chart':
+            line_chart(values);
+            break;
+        case 'pie_chart':
+            pie_chart(values);
+            break;
+    }
+}
+
+function bar_chart (data) {
+    nv.addGraph(function () {
+      var chart = nv.models.discreteBarChart()
+            .tooltips(false)
+            .showValues(true)
+            .staggerLabels(true)
+            .width(650)
+            .height(400);
+
+        d3.select('.graph_main_content svg')
+            .datum([{key: 'Bar chart', values:data}])
+            .attr('width', 650)
+            .attr('height', 400)
+            .call(chart);
+
+        nv.utils.windowResize(chart.update);
+        return chart;
+    });
 };
 
-var Charts = {
-    bar_chart : function (pivot) {
-        var data = format_chart_data(pivot);
-        nv.addGraph(function () {
-          var chart = nv.models.discreteBarChart()
-                .tooltips(false)
-                .showValues(true)
-                .staggerLabels(true)
-                .width(650)
-                .height(400);
+function line_chart (data) {
+    nv.addGraph(function () {
+        var chart = nv.models.lineChart()
+            .x(function (d,u) { return u; })
+            .width(600)
+            .height(300)
+            .margin({top: 30, right: 20, bottom: 20, left: 60});
 
-            d3.select('.graph_main_content svg')
-                .datum(data)
-                .attr('width', 650)
-                .attr('height', 400)
-                .call(chart);
+        d3.select('.graph_main_content svg')
+            .attr('width', 600)
+            .attr('height', 300)
+            .datum([{key: 'Bar chart', values: data}])
+            .call(chart);
 
-            nv.utils.windowResize(chart.update);
-            return chart;
-        });
-    },
+        return chart;
+      });
+};
 
-    line_chart: function (pivot) {
-        data = format_chart_data(pivot);
-        nv.addGraph(function () {
-            var chart = nv.models.lineChart()
-                .x(function (d,u) { return u; })
-                .width(600)
-                .height(300)
-                .margin({top: 30, right: 20, bottom: 20, left: 60});
+function pie_chart(data) {
+    nv.addGraph(function () {
+        var chart = nv.models.pieChart()
+            .color(d3.scale.category10().range())
+            .width(650)
+            .height(400);
 
-            d3.select('.graph_main_content svg')
-                .attr('width', 600)
-                .attr('height', 300)
-                .datum(data)
-                .call(chart);
+        d3.select('.graph_main_content svg')
+            .datum(data)
+            .transition().duration(1200)
+            .attr('width', 650)
+            .attr('height', 400)
+            .call(chart);
 
-            return chart;
-          });
-    },
+        nv.utils.windowResize(chart.update);
+        return chart;
+    });
+};
 
-    pie_chart: function (pivot) {
-        data = format_chart_data(pivot);
-        nv.addGraph(function () {
-            var chart = nv.models.pieChart()
-                .color(d3.scale.category10().range())
-                .width(650)
-                .height(400);
-
-            d3.select('.graph_main_content svg')
-                .datum(data[0].values)
-                .transition().duration(1200)
-                .attr('width', 650)
-                .attr('height', 400)
-                .call(chart);
-
-            nv.utils.windowResize(chart.update);
-            return chart;
-        });
-    },
-};
\ No newline at end of file
diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index 5dbe4b780cb..0a1dcdd001b 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -178,7 +178,6 @@ instance.web_graph.GraphView = instance.web.View.extend({
     },
 
     switch_mode: function (mode) {
-        var self = this;
         this.mode = mode;
         if (mode === 'pivot') {
             this.table.css('display', 'block');
@@ -188,7 +187,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
             this.svg.remove();
             this.svg = $('<div><svg></svg></div>');
             this.$el.filter('.graph_main_content').append(this.svg);
-            draw_chart(this.svg, mode, this.pivot_table);
+            draw_chart(mode, this.pivot_table);
 
         }
     },
@@ -326,9 +325,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
                 cell.append((value === undefined) ? '' : value);
                 if ((self.heat_map_mode) && (value !== undefined)) {
-                    // heat map
-                    var ratio = Math.floor(70 + 185*(pivot.total - value)/pivot.total);
-                    cell.css("background-color", "rgb(255," + ratio + "," + ratio + ")");
+                    var color = Math.floor(50 + 205*(pivot.total - value)/pivot.total);
+                    cell.css("background-color", "rgb(255," + color + "," + color + ")");
                 } 
                 html_row.append(cell);
             }