diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index c0ccb80285a..037a07c60ec 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -77,6 +77,11 @@ instance.web_graph.GraphView = instance.web.View.extend({
             this.pivot_table.fold_cols();
             this.draw_table();
         },
+
+        'click label.graph_heat_map' : function (event) {
+            this.heat_map_mode = !this.heat_map_mode;
+            this.draw_table();
+        },
     },
 
     view_loading: function (fields_view_get) {
@@ -90,6 +95,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
             row_groupby = [];
 
         this.pivot_table = null;
+        this.heat_map_mode = false;
 
         // get the default groupbys and measure defined in the field view
         _.each(fields_view_get.arch.children, function (field) {
@@ -300,7 +306,8 @@ instance.web_graph.GraphView = instance.web.View.extend({
     },
 
     draw_row: function (row) {
-        var pivot = this.pivot_table,
+        var self = this,
+            pivot = this.pivot_table,
             html_row = $('<tr></tr>'),
             row_header = this.make_border_cell(1,1)
                 .append(this.make_header_title(row).attr('data-row-id', row.id))
@@ -314,7 +321,17 @@ instance.web_graph.GraphView = instance.web.View.extend({
 
         _.each(pivot.cols.headers, function (col) {
             if (col.children.length === 0) {
-                var cell = $('<td></td>').append(pivot.get_value(row.id, col.id));
+                var value = pivot.get_value(row.id, col.id),
+                    cell = $('<td></td>');
+
+                cell.append((value === undefined) ? '' : value);
+                if ((self.heat_map_mode) && (value !== undefined)) {
+                    // heat map
+                    console.log("heat map", self.heat_map_mode, pivot.total);
+                    var ratio = Math.floor(70 + 185*(pivot.total - value)/pivot.total);
+                    console.log("ratio",ratio);
+                    cell.css("background-color", "rgb(255," + ratio + "," + ratio + ")");
+                } 
                 html_row.append(cell);
             }
         });
diff --git a/addons/web_graph/static/src/js/pivot.js b/addons/web_graph/static/src/js/pivot.js
index 06b8a97a05d..99bc20b1015 100644
--- a/addons/web_graph/static/src/js/pivot.js
+++ b/addons/web_graph/static/src/js/pivot.js
@@ -38,6 +38,7 @@ var PivotTable = openerp.web.Class.extend({
 		this.domain = options.domain;
 		this.measure = options.measure;
 		this.measure_label = options.measure_label;
+		this.total = 0;
 	},
 
 	// Load initial data into the rows, cols and cells array.
@@ -50,6 +51,7 @@ var PivotTable = openerp.web.Class.extend({
 				.then(function (total) {
 					var val = total[0].attributes.aggregates[self.measure];
 					self.set_value(self.rows.main.id, self.cols.main.id, val);
+					self.total = val;
 				});
 
 		return $.when(total, initial_group);
@@ -79,7 +81,7 @@ var PivotTable = openerp.web.Class.extend({
 		var cell = _.find(this.cells, function (c) {
 			return ((c.row_id == row) && (c.col_id == col));
 		});
-		return (cell) ? cell.value : '';
+		return (cell === undefined) ? undefined : cell.value;
 	},
 
 	get_col: function (id) {
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index bce35d40f9c..4881514a8a1 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/addons/web_graph/static/src/xml/web_graph.xml
@@ -12,10 +12,11 @@
     				<li><a data-mode="line_chart" href="#">Line Chart</a></li>
     				<li><a data-mode="pie_chart" href="#">Pie chart</a></li>
     			</ul>
-                <label type="button" class="btn btn-default graph_swap_axis">Swap axis</label>
-                <label type="button" class="btn btn-default graph_fold_rows">Fold rows</label>
-                <label type="button" class="btn btn-default graph_fold_cols">Fold cols</label>
-                <label type="button" class="btn btn-default graph_fold_all">Fold all</label>
+                <label type="button" class="btn btn-default graph_swap_axis">Swap Axis</label>
+                <label type="button" class="btn btn-default graph_fold_rows">Fold Rows</label>
+                <label type="button" class="btn btn-default graph_fold_cols">Fold Cols</label>
+                <label type="button" class="btn btn-default graph_fold_all">Fold All</label>
+                <label type="button" class="btn btn-default graph_heat_map">Heat Map</label>
     		</div>
     	</div>
     	<div class="graph_main_content"></div>