diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 5942da9ed97..653281ad214 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -35,6 +35,7 @@ return AbstractRenderer.extend({
this._super.apply(this, arguments);
this.isComparison = !!state.comparisonData;
this.stacked = this.isComparison ? false : params.stacked;
+ this.title = params.title || '';
},
/**
* @override
@@ -446,20 +447,39 @@ return AbstractRenderer.extend({
chart.tooltip.chartContainer(self.$('.o_graph_svg_container').last()[0]);
}
}
- var chart1 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.data);
+ var chart = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.data);
// FIXME: When 'orient' is right for Y axis, horizontal lines aren't displayed correctly
- chart1.dispatch.on('renderEnd', function () {
+ chart.dispatch.on('renderEnd', function () {
$('.nv-y .tick > line').attr('x2', function (i, value) {
return Math.abs(value);
});
})
- chartResize(chart1);
+ chartResize(chart);
+
if (this.state.mode === 'pie' && this.isComparison) {
- var chart2 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);
- chartResize(chart2);
- chart1.update();
+ // Render graph title
+ var timeRangeMenuData = this.state.context.timeRangeMenuData;
+ var chartTitle = this.title + ' (' + timeRangeMenuData.timeRangeDescription + ')';
+ this.$('.o_graph_svg_container').last().prepend($('', {
+ text: chartTitle,
+ }));
+
+ // Instantiate comparison graph
+ var comparisonChart = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);
+ // Render comparison graph title
+ var comparisonChartTitle = this.title + ' (' + timeRangeMenuData.comparisonTimeRangeDescription + ')';
+ this.$('.o_graph_svg_container').last().prepend($('', {
+ text: comparisonChartTitle,
+ }));
+ chartResize(comparisonChart);
+
+ chart.update();
+ } else if (this.title) {
+ this.$('.o_graph_svg_container').last().prepend($('', {
+ text: this.title,
+ }));
}
},
/**
diff --git a/addons/web/static/src/js/views/graph/graph_view.js b/addons/web/static/src/js/views/graph/graph_view.js
index 23ab4cecd01..a55da16c6da 100644
--- a/addons/web/static/src/js/views/graph/graph_view.js
+++ b/addons/web/static/src/js/views/graph/graph_view.js
@@ -81,6 +81,7 @@ var GraphView = AbstractView.extend({
this.controllerParams.measures = measures;
this.controllerParams.groupableFields = groupableFields;
this.rendererParams.stacked = this.arch.attrs.stacked !== "False";
+ this.rendererParams.title = this.arch.attrs.title; // TODO: use attrs.string instead
this.loadParams.mode = this.arch.attrs.type || 'bar';
this.loadParams.measure = measure || '__count__';
diff --git a/addons/web/static/src/js/widgets/pie_chart.js b/addons/web/static/src/js/widgets/pie_chart.js
index 85e4a8121ec..663e2b4cc98 100644
--- a/addons/web/static/src/js/widgets/pie_chart.js
+++ b/addons/web/static/src/js/widgets/pie_chart.js
@@ -41,7 +41,6 @@ var PieChart = Widget.extend({
withControlPanel: false,
isEmbedded: true,
mode: 'pie',
- title: modifiers.title || modifiers.measure || '',
};
this.viewInfo = {
diff --git a/addons/web/static/src/xml/pie_chart.xml b/addons/web/static/src/xml/pie_chart.xml
index 31f31b5b8d2..5c3411bc882 100644
--- a/addons/web/static/src/xml/pie_chart.xml
+++ b/addons/web/static/src/xml/pie_chart.xml
@@ -1,7 +1,7 @@
-
+
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 2e74e36e5e1..5c9e5b67d6f 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -106,6 +106,21 @@ QUnit.module('Views', {
graph.destroy();
});
+ QUnit.test('title attribute', function (assert) {
+ assert.expect(1);
+
+ var graph = createView({
+ View: GraphView,
+ model: "foo",
+ data: this.data,
+ arch: '' +
+ '' +
+ '',
+ });
+ assert.strictEqual(graph.$('label').text(), "Partners", "should have 'Partners as title'");
+ graph.destroy();
+ });
+
QUnit.test('switching mode', function (assert) {
assert.expect(6);
diff --git a/doc/reference/views.rst b/doc/reference/views.rst
index 373a31b022a..378ba1fd84a 100644
--- a/doc/reference/views.rst
+++ b/doc/reference/views.rst
@@ -876,6 +876,9 @@ following attributes:
the name of a field to use in the view. If used for grouping (rather
than aggregating)
+``title`` (optional)
+ string displayed on the top of the graph.
+
``type``
indicates whether the field should be used as a grouping criteria or as an
aggregated value within a group. Possible values are: