MDL-55045 core: Remove the hardcoded canvas tag for chart.js
authorFrederic Massart <fred@moodle.com>
Wed, 29 Jun 2016 07:52:03 +0000 (15:52 +0800)
committerDan Poltawski <dan@moodle.com>
Mon, 25 Jul 2016 09:42:49 +0000 (10:42 +0100)
Part of MDL-54987 epic.

lib/amd/build/chart_output_chartjs.min.js
lib/amd/src/chart_output_chartjs.js
lib/outputrenderers.php

index e9144ce..2bc3de8 100644 (file)
Binary files a/lib/amd/build/chart_output_chartjs.min.js and b/lib/amd/build/chart_output_chartjs.min.js differ
index f2a5c53..2a7d24f 100644 (file)
@@ -32,6 +32,14 @@ define([
      */
     function Output() {
         Base.prototype.constructor.apply(this, arguments);
+
+        // Make sure that we've got a canvas tag.
+        this._canvas = this._node;
+        if (this._canvas.prop('tagName') != 'CANVAS') {
+            this._canvas = $('<canvas>');
+            this._node.append(this._canvas);
+        }
+
         this._build();
     }
 
@@ -39,6 +47,7 @@ define([
 
     Output.prototype._config = null;
     Output.prototype._chartjs = null;
+    Output.prototype._canvas = null;
 
     Output.prototype.getDatasets = function() {
         var sets = this._chart.getSeries().map(function(series) {
@@ -56,7 +65,7 @@ define([
 
     Output.prototype._build = function() {
         this._config = this._makeConfig();
-        this._chartjs = new Chartjs(this._node[0], this._config);
+        this._chartjs = new Chartjs(this._canvas[0], this._config);
     };
 
     Output.prototype._makeAxisConfig = function(axis) {
index 65212d7..2907372 100644 (file)
@@ -4319,15 +4319,14 @@ EOD;
      */
     public function render_chart(\core\chart_base $chart) {
         $id = 'chart' . uniqid();
-        // TODO Handle the canvas in the output module rather than here.
-        $canvas = html_writer::tag('canvas', '', ['id' => $id]);
+        $div = html_writer::tag('div', '', ['id' => $id]);
         $js = "require(['core/chart_builder', 'core/chart_output'], function(Builder, Output) {
             Builder.make(" . json_encode($chart) . ").then(function(ChartInst) {
                 new Output('#" . $id . "', ChartInst);
             });
         });";
         $this->page->requires->js_init_code($js, true);
-        return $canvas;
+        return $div;
     }
 
 }