Bug 1778451: Show legend in charts

Use correct variable in template when creating the legend for charts.

In Chart.js legendTemplate uses var 'datasets'
or 'segments' depending on the type of charts
  type Doughnut/PolarArea/Pie use segments
  type Line/Radar/Bar use datasets

We have to check which one is defined in the Chart object before
modifying the legend template

Also delayed the updating of page by .5 secs so not to clash with
chart jsons stuff

behatnotneeded

Change-Id: Id3ef35a5037ac2c30d342279e0af7052584f7d16

htdocs/admin/users/statistics.php

@@ -232,13 +232,6 @@ jQuery(function ($) {
 
     $('#messages .alert-success').delay(1000).hide("slow");
     update_table_headers(null);
-
-    if ($('.statinfoblock').length > 0) {
-        var maxHeight = Math.max.apply(null, $(".statinfoblock").map(function () {
-            return $(this).height();
-        }).get());
-        $('.statinfoblock').css('height', maxHeight + 'px');
-    }
 });
 
 JS;

htdocs/js/mahara.js

@@ -873,6 +873,7 @@ jQuery(document).ready(function($) {
  */
 var chartobject;
 var canvascontext;
+var trueMaxHeight = 0;
 function fetch_graph_data(opts) {
 
     if (typeof opts.extradata != 'undefined') {
@@ -916,14 +917,28 @@ function fetch_graph_data(opts) {
             }
             chartobject = new Chart(canvascontext)[json.data.graph](JSON.parse(json.data.datastr),JSON.parse(json.data.configstr));
             legendtype = (typeof chartobject.options.datasetStroke !== 'undefined' && chartobject.options.datasetStroke == true) ? 'stroke' : 'fill';
-            chartobject.options.legendTemplate = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i]." + legendtype + "Color%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>";
-
+            if (typeof chartobject.segments != 'undefined') {
+                chartobject.options.legendTemplate = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++) {%><li><span style=\"background-color:<%=segments[i]." + legendtype + "Color%>\"></span><%if (segments[i].label)  {%><%=segments[i].label%><%}%></li><%}%></ul>";
+            }
+            else {
+                chartobject.options.legendTemplate = "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++) {%><li><span style=\"background-color:<%=datasets[i]." + legendtype + "Color%>\"></span><%if (datasets[i].label)  {%><%=datasets[i].label%><%}%></li><%}%></ul>";
+            }
             var legendHolder = document.createElement('div');
             legendHolder.innerHTML = chartobject.generateLegend();
             document.getElementById(opts.id + 'legend').appendChild(legendHolder.firstChild);
             if (json.data.title) {
                 jQuery('#' + opts.id + 'title').text(json.data.title);
             }
+            if ($('.statinfoblock').length > 0) {
+                function delayResize() {
+                    var maxHeight = Math.max.apply(null, $(".statinfoblock").map(function () {
+                        return $(this).height();
+                    }).get());
+                    trueMaxHeight = Math.max(trueMaxHeight, maxHeight);
+                    $('.statinfoblock').css('height', trueMaxHeight + 'px');
+                }
+                var timeoutID = window.setTimeout(delayResize, 500);
+            }
         }
     });
 }