MDL-55146 core: Support multiple axes in charts

Part of MDL-54987 epic.

lib/amd/build/chart_base.min.js

@@ -1 +1 @@
-define(["core/chart_series","core/chart_axis"],function(a,b){function c(){this._series=[],this._labels=[],this._xaxes=[],this._yaxes=[],this._setDefaults()}return c.prototype._series=null,c.prototype._labels=null,c.prototype._title=null,c.prototype._xaxes=null,c.prototype._yaxes=null,c.prototype.COLORSET=["red","green","blue","yellow","pink","orange"],c.prototype.TYPE=null,c.prototype.addSeries=function(a){this._validateSerie(a),this._series.push(a),null===a.getColor()&&a.setColor(c.prototype.COLORSET[this._series.length%c.prototype.COLORSET.length])},c.prototype.create=function(c,d){var e=new c;return e.setLabels(d.labels),e.setTitle(d.title),d.series.forEach(function(b){e.addSeries(a.prototype.create(b))}),d.axes.x.forEach(function(a,c){e.setXAxis(b.prototype.create(a),c)}),d.axes.y.forEach(function(a,c){e.setYAxis(b.prototype.create(a),c)}),e},c.prototype.__getAxis=function(a,c,d){var e,f="x"===a?this._xaxes:this._yaxes,g=("x"===a?this.setXAxis:this.setYAxis).bind(this);if(c="undefined"==typeof c?0:c,d="undefined"==typeof d?!1:d,e=f[c],"undefined"==typeof e){if(!d)throw new Error("Unknown axis.");e=new b,g(e,c)}return e},c.prototype.getLabels=function(){return this._labels},c.prototype.getSeries=function(){return this._series},c.prototype.getTitle=function(){return this._title},c.prototype.getType=function(){if(!this.TYPE)throw new Error("The TYPE property has not been set.");return this.TYPE},c.prototype.getXAxes=function(){return this._xaxes},c.prototype.getXAxis=function(a,b){return this.__getAxis("x",a,b)},c.prototype.getYAxes=function(){return this._yaxes},c.prototype.getYAxis=function(a,b){return this.__getAxis("y",a,b)},c.prototype._setDefaults=function(){},c.prototype.setLabels=function(a){if(a.length&&this._series.length&&this._series[0].length!=a.length)throw new Error("Series must match label values.");this._labels=a},c.prototype.setTitle=function(a){this._title=a},c.prototype.setXAxis=function(a,b){b="undefined"==typeof b?0:b,this._xaxes[b]=a},c.prototype.setYAxis=function(a,b){b="undefined"==typeof b?0:b,this._yaxes[b]=a},c.prototype._validateSerie=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount())throw new Error("Series do not have an equal number of values.");if(this._labels.length&&this._labels.length!=a.getCount())throw new Error("Series must match label values.")},c});
+define(["core/chart_series","core/chart_axis"],function(a,b){function c(){this._series=[],this._labels=[],this._xaxes=[],this._yaxes=[],this._setDefaults()}return c.prototype._series=null,c.prototype._labels=null,c.prototype._title=null,c.prototype._xaxes=null,c.prototype._yaxes=null,c.prototype.COLORSET=["red","green","blue","yellow","pink","orange"],c.prototype.TYPE=null,c.prototype.addSeries=function(a){this._validateSeries(a),this._series.push(a),null===a.getColor()&&a.setColor(c.prototype.COLORSET[this._series.length%c.prototype.COLORSET.length])},c.prototype.create=function(c,d){var e=new c;return e.setLabels(d.labels),e.setTitle(d.title),d.series.forEach(function(b){e.addSeries(a.prototype.create(b))}),d.axes.x.forEach(function(a,c){e.setXAxis(b.prototype.create(a),c)}),d.axes.y.forEach(function(a,c){e.setYAxis(b.prototype.create(a),c)}),e},c.prototype.__getAxis=function(a,c,d){var e,f="x"===a?this._xaxes:this._yaxes,g=("x"===a?this.setXAxis:this.setYAxis).bind(this);if(c="undefined"==typeof c?0:c,d="undefined"==typeof d?!1:d,e=f[c],"undefined"==typeof e){if(!d)throw new Error("Unknown axis.");e=new b,g(e,c)}return e},c.prototype.getLabels=function(){return this._labels},c.prototype.getSeries=function(){return this._series},c.prototype.getTitle=function(){return this._title},c.prototype.getType=function(){if(!this.TYPE)throw new Error("The TYPE property has not been set.");return this.TYPE},c.prototype.getXAxes=function(){return this._xaxes},c.prototype.getXAxis=function(a,b){return this.__getAxis("x",a,b)},c.prototype.getYAxes=function(){return this._yaxes},c.prototype.getYAxis=function(a,b){return this.__getAxis("y",a,b)},c.prototype._setDefaults=function(){},c.prototype.setLabels=function(a){if(a.length&&this._series.length&&this._series[0].length!=a.length)throw new Error("Series must match label values.");this._labels=a},c.prototype.setTitle=function(a){this._title=a},c.prototype.setXAxis=function(a,b){b="undefined"==typeof b?0:b,this._validateAxis("x",a,b),this._xaxes[b]=a},c.prototype.setYAxis=function(a,b){b="undefined"==typeof b?0:b,this._validateAxis("y",a,b),this._yaxes[b]=a},c.prototype._validateAxis=function(a,b,c){if(c="undefined"==typeof c?0:c,c>0){var d="x"==a?this._xaxes:this._yaxes;if("undefined"==typeof d[c-1])throw new Error("Missing "+a+" axis at index lower than "+c)}},c.prototype._validateSeries=function(a){if(this._series.length&&this._series[0].getCount()!=a.getCount())throw new Error("Series do not have an equal number of values.");if(this._labels.length&&this._labels.length!=a.getCount())throw new Error("Series must match label values.")},c});

lib/amd/build/chart_output_chartjs.min.js

@@ -1 +1 @@
-define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_pie"],function(a,b,c,d,e){function f(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}return f.prototype=Object.create(d.prototype),f.prototype._config=null,f.prototype._chartjs=null,f.prototype._canvas=null,f.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},f.prototype._makeAxisConfig=function(a){var b={};return a.getPosition()!==c.prototype.POS_DEFAULT&&(b.position=a.getPosition()),null!==a.getLabel()&&(b.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(b.ticks=b.ticks||{},b.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(b.ticks=b.ticks||{},b.ticks.max=a.getMax()),null!==a.getMin()&&(b.ticks=b.ticks||{},b.ticks.min=a.getMin()),b},f.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b)}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor();return{label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b}}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f});
+define(["jquery","core/chartjs","core/chart_axis","core/chart_output_base","core/chart_pie"],function(a,b,c,d,e){function f(){d.prototype.constructor.apply(this,arguments),this._canvas=this._node,"CANVAS"!=this._canvas.prop("tagName")&&(this._canvas=a("<canvas>"),this._node.append(this._canvas)),this._build()}var g=function(a,b){return"axis-"+a+"-"+b};return f.prototype=Object.create(d.prototype),f.prototype._config=null,f.prototype._chartjs=null,f.prototype._canvas=null,f.prototype._build=function(){this._config=this._makeConfig(),this._chartjs=new b(this._canvas[0],this._config)},f.prototype._makeAxisConfig=function(a,b,d){var e={id:g(b,d)};return a.getPosition()!==c.prototype.POS_DEFAULT&&(e.position=a.getPosition()),null!==a.getLabel()&&(e.scaleLabel={display:!0,labelString:a.getLabel()}),null!==a.getStepSize()&&(e.ticks=e.ticks||{},e.ticks.stepSize=a.getStepSize()),null!==a.getMax()&&(e.ticks=e.ticks||{},e.ticks.max=a.getMax()),null!==a.getMin()&&(e.ticks=e.ticks||{},e.ticks.min=a.getMin()),e},f.prototype._makeConfig=function(){var a={type:this._chart.getType(),data:{labels:this._chart.getLabels(),datasets:this._makeDatasetsConfig()},options:{title:{display:null!==this._chart.getTitle(),text:this._chart.getTitle()}}};return this._chart.getXAxes().forEach(function(b,c){a.options.scales=a.options.scales||{},a.options.scales.xAxes=a.options.scales.xAxes||[],a.options.scales.xAxes[c]=this._makeAxisConfig(b,"x",c)}.bind(this)),this._chart.getYAxes().forEach(function(b,c){var d=b.getLabels();a.options.scales=a.options.scales||{},a.options.scales.yAxes=a.options.scales.yAxes||[],a.options.scales.yAxes[c]=this._makeAxisConfig(b,"y",c),null!==d&&(a.options.scales.yAxes[c].ticks.callback=function(a){return d[parseInt(a,10)]||""})}.bind(this)),a},f.prototype._makeDatasetsConfig=function(){var a=this._chart.getSeries().map(function(a){var b=a.hasColoredValues()?a.getColors():a.getColor(),c={label:a.getLabel(),data:a.getValues(),type:a.getType(),fill:!1,backgroundColor:b,borderColor:this._chart.getType()==e.prototype.TYPE?null:b};return null!==a.getXAxis()&&(c.xAxisID=g("x",a.getXAxis())),null!==a.getYAxis()&&(c.yAxisID=g("y",a.getYAxis())),c}.bind(this));return a},f.prototype.update=function(){a.extend(!0,this._config,this._makeConfig()),this._chartjs.update()},f});

lib/amd/build/chart_pie.min.js

@@ -1 +1 @@
-define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="pie",b.prototype.addSeries=function(b){if(null===b.getColor()){for(var c=[],d=0;d<b.getCount();d++)c.push(this.COLORSET[d%a.prototype.COLORSET.length]);b.setColors(c)}return a.prototype.addSeries.apply(this,arguments)},b.prototype._validateSerie=function(){if(this._series.length>=1)throw new Error("Pie charts only support one serie.");return a.prototype._validateSerie.apply(this,arguments)},b});
+define(["core/chart_base"],function(a){function b(){a.prototype.constructor.apply(this,arguments)}return b.prototype=Object.create(a.prototype),b.prototype.TYPE="pie",b.prototype.addSeries=function(b){if(null===b.getColor()){for(var c=[],d=0;d<b.getCount();d++)c.push(this.COLORSET[d%a.prototype.COLORSET.length]);b.setColors(c)}return a.prototype.addSeries.apply(this,arguments)},b.prototype._validateSeries=function(){if(this._series.length>=1)throw new Error("Pie charts only support one serie.");return a.prototype._validateSeries.apply(this,arguments)},b});

lib/amd/build/chart_series.min.js

@@ -1 +1 @@
-define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._colors=[],this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._colors=null,a.prototype._label=null,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setType(b.type),b.colors&&b.colors.length>1?c.setColors(b.colors):c.setColor(b.colors[0]),c},a.prototype.getColor=function(){return this._colors[0]||null},a.prototype.getColors=function(){return this._colors},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.hasColoredValues=function(){return this._colors.length==this.getCount()},a.prototype.setColor=function(a){this._colors=[a]},a.prototype.setColors=function(a){if(a&&a.length!=this.getCount())throw new Error("When setting multiple colors there must be one per value.");this._colors=a||[]},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a});
+define([],function(){function a(a,b){if("string"!=typeof a)throw new Error("Invalid label for series.");if("object"!=typeof b)throw new Error("Values for a series must be an array.");if(b.length<1)throw new Error("Invalid values received for series.");this._colors=[],this._label=a,this._values=b}return a.prototype.TYPE_DEFAULT=null,a.prototype.TYPE_LINE="line",a.prototype._colors=null,a.prototype._label=null,a.prototype._type=a.prototype.TYPE_DEFAULT,a.prototype._values=null,a.prototype._xaxis=null,a.prototype._yaxis=null,a.prototype.create=function(b){var c=new a(b.label,b.values);return c.setType(b.type),c.setXAxis(b.axes.x),c.setYAxis(b.axes.y),b.colors&&b.colors.length>1?c.setColors(b.colors):c.setColor(b.colors[0]),c},a.prototype.getColor=function(){return this._colors[0]||null},a.prototype.getColors=function(){return this._colors},a.prototype.getCount=function(){return this._values.length},a.prototype.getLabel=function(){return this._label},a.prototype.getType=function(){return this._type},a.prototype.getValues=function(){return this._values},a.prototype.getXAxis=function(){return this._xaxis},a.prototype.getYAxis=function(){return this._yaxis},a.prototype.hasColoredValues=function(){return this._colors.length==this.getCount()},a.prototype.setColor=function(a){this._colors=[a]},a.prototype.setColors=function(a){if(a&&a.length!=this.getCount())throw new Error("When setting multiple colors there must be one per value.");this._colors=a||[]},a.prototype.setType=function(a){if(a!=this.TYPE_DEFAULT&&a!=this.TYPE_LINE)throw new Error("Invalid serie type.");this._type=a||null},a.prototype.setXAxis=function(a){this._xaxis=a||null},a.prototype.setYAxis=function(a){this._yaxis=a||null},a});

lib/amd/src/chart_base.js

@@ -107,7 +107,7 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
      * @param {module:core/chart_series} series The series to add.
      */
     Base.prototype.addSeries = function(series) {
-        this._validateSerie(series);
+        this._validateSeries(series);
         this._series.push(series);
 
         // Give a default color from the set.
@@ -302,6 +302,7 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
      */
     Base.prototype.setXAxis = function(axis, index) {
         index = typeof index === 'undefined' ? 0 : index;
+        this._validateAxis('x', axis, index);
         this._xaxes[index] = axis;
     };
 
@@ -315,16 +316,35 @@ define(['core/chart_series', 'core/chart_axis'], function(Series, Axis) {
      */
     Base.prototype.setYAxis = function(axis, index) {
         index = typeof index === 'undefined' ? 0 : index;
+        this._validateAxis('y', axis, index);
         this._yaxes[index] = axis;
     };
 
+    /**
+     * Validate an axis.
+     *
+     * @protected
+     * @param {String} xy X or Y axis.
+     * @param {module:core/chart_axis} axis The axis to validate.
+     * @param {Number} [index=0] The index of the axis.
+     */
+    Base.prototype._validateAxis = function(xy, axis, index) {
+        index = typeof index === 'undefined' ? 0 : index;
+        if (index > 0) {
+            var axes = xy == 'x' ? this._xaxes : this._yaxes;
+            if (typeof axes[index - 1] === 'undefined') {
+                throw new Error('Missing ' + xy + ' axis at index lower than ' + index);
+            }
+        }
+    };
+
     /**
      * Validate a series.
      *
      * @protected
      * @param {module:core/chart_series} series The series to validate.
      */
-    Base.prototype._validateSerie = function(series) {
+    Base.prototype._validateSeries = function(series) {
         if (this._series.length && this._series[0].getCount() != series.getCount()) {
             throw new Error('Series do not have an equal number of values.');
 

lib/amd/src/chart_output_chartjs.js

@@ -29,6 +29,17 @@ define([
     'core/chart_pie',
 ], function($, Chartjs, Axis, Base, Pie) {
 
+    /**
+     * Makes an axis ID.
+     *
+     * @param {String} xy Accepts 'x' and 'y'.
+     * @param {Number} index The axis index.
+     * @return {String}
+     */
+    var makeAxisId = function(xy, index) {
+        return 'axis-' + xy + '-' + index;
+    };
+
     /**
      * Chart output for Chart.js.
      *
@@ -89,10 +100,14 @@ define([
      *
      * @protected
      * @param {module:core/chart_axis} axis The axis.
+     * @param {String} xy Accepts 'x' or 'y'.
+     * @param {Number} index The axis index.
      * @return {Object} The axis config.
      */
-    Output.prototype._makeAxisConfig = function(axis) {
-        var scaleData = {};
+    Output.prototype._makeAxisConfig = function(axis, xy, index) {
+        var scaleData = {
+            id: makeAxisId(xy, index)
+        };
 
         if (axis.getPosition() !== Axis.prototype.POS_DEFAULT) {
             scaleData.position = axis.getPosition();
@@ -148,7 +163,7 @@ define([
         this._chart.getXAxes().forEach(function(axis, i) {
             config.options.scales = config.options.scales || {};
             config.options.scales.xAxes = config.options.scales.xAxes || [];
-            config.options.scales.xAxes[i] = this._makeAxisConfig(axis);
+            config.options.scales.xAxes[i] = this._makeAxisConfig(axis, 'x', i);
         }.bind(this));
 
         this._chart.getYAxes().forEach(function(axis, i) {
@@ -156,7 +171,7 @@ define([
 
             config.options.scales = config.options.scales || {};
             config.options.scales.yAxes = config.options.scales.yAxes || [];
-            config.options.scales.yAxes[i] = this._makeAxisConfig(axis);
+            config.options.scales.yAxes[i] = this._makeAxisConfig(axis, 'y', i);
 
             if (axisLabels !== null) {
                 config.options.scales.yAxes[i].ticks.callback = function(value) {
@@ -177,15 +192,24 @@ define([
     Output.prototype._makeDatasetsConfig = function() {
         var sets = this._chart.getSeries().map(function(series) {
             var colors = series.hasColoredValues() ? series.getColors() : series.getColor();
-            return {
+            var dataset = {
                 label: series.getLabel(),
                 data: series.getValues(),
                 type: series.getType(),
                 fill: false,
                 backgroundColor: colors,
                 // Pie charts look better without borders.
-                borderColor: this._chart.getType() == Pie.prototype.TYPE ? null : colors
+                borderColor: this._chart.getType() == Pie.prototype.TYPE ? null : colors,
             };
+
+            if (series.getXAxis() !== null) {
+                dataset.xAxisID = makeAxisId('x', series.getXAxis());
+            }
+            if (series.getYAxis() !== null) {
+                dataset.yAxisID = makeAxisId('y', series.getYAxis());
+            }
+
+            return dataset;
         }.bind(this));
         return sets;
     };

lib/amd/src/chart_pie.js

@@ -62,11 +62,11 @@ define(['core/chart_base'], function(Base) {
      *
      * @override
      */
-    Pie.prototype._validateSerie = function() {
+    Pie.prototype._validateSeries = function() {
         if (this._series.length >= 1) {
             throw new Error('Pie charts only support one serie.');
         }
-        return Base.prototype._validateSerie.apply(this, arguments);
+        return Base.prototype._validateSeries.apply(this, arguments);
     };
 
     return Pie;

lib/amd/src/chart_series.js

@@ -95,6 +95,22 @@ define([], function() {
      */
     Series.prototype._values = null;
 
+    /**
+     * The index of the X axis.
+     *
+     * @type {Number[]}
+     * @protected
+     */
+    Series.prototype._xaxis = null;
+
+    /**
+     * The index of the Y axis.
+     *
+     * @type {Number[]}
+     * @protected
+     */
+    Series.prototype._yaxis = null;
+
     /**
      * Create a new instance of a series from serialised data.
      *
@@ -106,6 +122,8 @@ define([], function() {
     Series.prototype.create = function(obj) {
         var s = new Series(obj.label, obj.values);
         s.setType(obj.type);
+        s.setXAxis(obj.axes.x);
+        s.setYAxis(obj.axes.y);
 
         // Colors are exported as an array with 1, or n values.
         if (obj.colors && obj.colors.length > 1) {
@@ -171,6 +189,24 @@ define([], function() {
         return this._values;
     };
 
+    /**
+     * Get the index of the X axis.
+     *
+     * @return {Number}
+     */
+    Series.prototype.getXAxis = function() {
+        return this._xaxis;
+    };
+
+    /**
+     * Get the index of the Y axis.
+     *
+     * @return {Number}
+     */
+    Series.prototype.getYAxis = function() {
+        return this._yaxis;
+    };
+
     /**
      * Whether there is a color per value.
      *
@@ -213,6 +249,25 @@ define([], function() {
         this._type = type || null;
     };
 
+    /**
+     * Set the index of the X axis.
+     *
+     * @param {Number} index The index.
+     */
+    Series.prototype.setXAxis = function(index) {
+        this._xaxis = index || null;
+    };
+
+
+    /**
+     * Set the index of the Y axis.
+     *
+     * @param {Number} index The index.
+     */
+    Series.prototype.setYAxis = function(index) {
+        this._yaxis = index || null;
+    };
+
     return Series;
 
 });

lib/classes/chart_base.php

@@ -237,6 +237,7 @@ class chart_base implements JsonSerializable, renderable {
      * @param int $index The index of the axis.
      */
     public function set_xaxis(chart_axis $axis, $index = 0) {
+        $this->validateAxis('x', $axis, $index);
         return $this->xaxes[$index] = $axis;
     }
 
@@ -249,7 +250,29 @@ class chart_base implements JsonSerializable, renderable {
      * @param int $index The index of the axis.
      */
     public function set_yaxis(chart_axis $axis, $index = 0) {
+        $this->validateAxis('y', $axis, $index);
         return $this->yaxes[$index] = $axis;
     }
 
+    /**
+     * Validate an axis.
+     *
+     * We validate this from PHP because not doing it here could result in errors being
+     * hard to trace down. For instance, if we were to add axis at keys without another
+     * axis preceding, we would effectively contain the axes in an associative array
+     * rather than a simple array, and that would have consequences on serialisation.
+     *
+     * @param string} $xy Accepts x or y.
+     * @param chart_axis $axis The axis to validate.
+     * @param index $index The index of the axis.
+     */
+    protected function validateAxis($xy, chart_axis $axis, $index = 0) {
+        if ($index > 0) {
+            $axes = $xy == 'x' ? $this->xaxes : $this->yaxes;
+            if (!isset($axes[$index - 1])) {
+                throw new coding_exception('Missing ' . $xy . ' axis at index lower than ' . $index);
+            }
+        }
+    }
+
 }

lib/classes/chart_series.php

@@ -50,6 +50,10 @@ class chart_series implements JsonSerializable {
     protected $type = self::TYPE_DEFAULT;
     /** @var float[] Values of the series. */
     protected $values = [];
+    /** @var int Index of the X axis. */
+    protected $xaxis = null;
+    /** @var int Index of the Y axis. */
+    protected $yaxis = null;
 
     /**
      * Constructor.
@@ -116,6 +120,24 @@ class chart_series implements JsonSerializable {
         return $this->values;
     }
 
+    /**
+     * Get the index of the X axis.
+     *
+     * @return int
+     */
+    public function get_xaxis() {
+        return $this->xaxis;
+    }
+
+    /**
+     * Get the index of the Y axis.
+     *
+     * @return int
+     */
+    public function get_yaxis() {
+        return $this->yaxis;
+    }
+
     /**
      * Whether there is a color per value.
      *
@@ -136,6 +158,10 @@ class chart_series implements JsonSerializable {
             'type' => $this->type,
             'values' => $this->values,
             'colors' => $this->colors,
+            'axes' => [
+                'x' => $this->xaxis,
+                'y' => $this->yaxis,
+            ]
         ];
         return $data;
     }
@@ -170,4 +196,22 @@ class chart_series implements JsonSerializable {
         $this->type = $type;
     }
 
+    /**
+     * Set the index of the X axis.
+     *
+     * @param int $index The index.
+     */
+    public function set_xaxis($index) {
+        $this->xaxis = $index;
+    }
+
+    /**
+     * Set the index of the Y axis.
+     *
+     * @param int $index The index.
+     */
+    public function set_yaxis($index) {
+        $this->yaxis = $index;
+    }
+
 }