1 files changed, 44 insertions, 10 deletions

diff --git a/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
index b77add4962..012e5e8bc1 100644
--- a/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
+++ b/plugins/CoreVisualizations/javascripts/jqplotEvolutionGraph.js
@@ -96,19 +96,53 @@
                 .on('jqplotPiwikTickOver', function (e, tick) {
                     lastTick = tick;
                     var label;
-                    if (typeof self.jqplotParams.axes.xaxis.labels != 'undefined') {
-                        label = self.jqplotParams.axes.xaxis.labels[tick];
-                    } else {
-                        label = self.jqplotParams.axes.xaxis.ticks[tick];
-                    }
 
-                    var text = [];
-                    for (var d = 0; d < self.data.length; d++) {
-                        var value = self.formatY(self.data[d][tick], d);
+                    var dataByAxis = {};
+                    for (var d = 0; d < self.data.length; ++d) {
+                        var valueUnformatted = self.data[d][tick];
+                        if (typeof valueUnformatted === 'undefined' || valueUnformatted === null) {
+                            continue;
+                        }
+
+                        var axis = self.jqplotParams.series[d]._xaxis || 'xaxis';
+                        if (!dataByAxis[axis]) {
+                            dataByAxis[axis] = [];
+                        }
+
+                        var value = self.formatY(valueUnformatted, d);
                         var series = self.jqplotParams.series[d].label;
-                        text.push('<strong>' + value + '</strong> ' + piwikHelper.htmlEntities(series));
+
+                        var seriesColor = self.jqplotParams.seriesColors[d];
+
+                        dataByAxis[axis].push('<span class="tooltip-series-color" style="background-color: ' + seriesColor + ';"/>' + '<strong>' + value + '</strong> ' + piwikHelper.htmlEntities(series));
+                    }
+
+                    var xAxisCount = 0;
+                    Object.keys(self.jqplotParams.axes).forEach(function (axis) {
+                        if (axis.substring(0, 1) === 'x') {
+                            ++xAxisCount;
+                        }
+                    });
+
+                    var content = '';
+                    for (var i = 0; i < xAxisCount; ++i) {
+                        var axisName = i === 0 ? 'xaxis' : 'x' + (i + 1) + 'axis';
+                        if (!dataByAxis[axisName] || !dataByAxis[axisName].length) {
+                            continue;
+                        }
+
+                        if (typeof self.jqplotParams.axes[axisName].labels != 'undefined') {
+                            label = self.jqplotParams.axes[axisName].labels[tick];
+                        } else {
+                            label = self.jqplotParams.axes[axisName].ticks[tick];
+                        }
+
+                        if (typeof label === 'undefined') { // sanity check
+                            continue;
+                        }
+
+                        content += '<h3 class="evolution-tooltip-header">'+piwikHelper.htmlEntities(label)+'</h3>'+dataByAxis[axisName].join('<br />');
                     }
-                    var content = '<h3>'+piwikHelper.htmlEntities(label)+'</h3>'+text.join('<br />');
 
                     $(this).tooltip({
                         track:   true,