Add support to fill between datasets

The `fill` option now accepts the index of the target dataset (number) or a string starting by "+" or "-" followed by a number representing the dataset index relative to the current one (e.g. `fill: "-2"` on dataset at index 3 will fill to dataset at index 1). It's also possible to "propagate" the filling to the target of an hidden dataset (`options.plugins.filler.propagate`). Fill boundaries `zero`, `top` and `bottom` have been deprecated and replaced by `origin`, `start` and `end`. Implementation has been moved out of the line element into a new plugin (`src/plugins/plugin.filler.js`) and does not rely anymore on the deprecated model `scaleTop`, `scaleBottom` and `scaleZero` values. Drawing Bézier splines has been refactored in the canvas helpers (note that `Chart.helpers.canvas` is now an alias of `Chart.canvasHelpers`). Add 2 new examples (line and radar) and extend utils with a pseudo-random number generator that can be initialized with `srand`. That makes possible to design examples starting always with the same initial data.
chartjs · Mar 11, 2017 · 25d9b43 · 25d9b43
1 parent 1ca0ffb
commit 25d9b43
Show file tree

Hide file tree

Showing 48 changed files with 1,447 additions and 970 deletions.
diff --git a/samples/filler/analyser.js b/samples/filler/analyser.js
@@ -0,0 +1,60 @@
+/* global Chart */
+
+'use strict';
+
+(function() {
+ Chart.plugins.register({
+ id: 'samples_filler_analyser',
+
+ beforeInit: function(chart, options) {
+ this.element = document.getElementById(options.target);
+ },
+
+ afterUpdate: function(chart) {
+ var datasets = chart.data.datasets;
+ var element = this.element;
+ var stats = [];
+ var meta, i, ilen, dataset;
+
+ if (!element) {
+ return;
+ }
+
+ for (i=0, ilen=datasets.length; i<ilen; ++i) {
+ meta = chart.getDatasetMeta(i)._filler;
+ if (meta) {
+ dataset = datasets[i];
+ stats.push({
+ fill: dataset.fill,
+ target: meta.fill,
+ visible: meta.visible,
+ index: i
+ });
+ }
+ }
+
+ this.element.innerHTML = '<table>' + stats.map(function(stat) {
+ var target = stat.target;
+ var row =
+ '<td style="padding-right:8px"><b>Dataset ' + stat.index + '</b></td>' +
+ '<td style="width:128px">fill: ' + JSON.stringify(stat.fill) + '</td>';
+
+ if (target === false) {
+ target = 'none';
+ } else if (isFinite(target)) {
+ target = 'dataset ' + target;
+ } else {
+ target = 'boundary "' + target + '"';
+ }
+
+ if (stat.visible) {
+ row += '<td style="width:256px">target: ' + target + '</td>';
+ } else {
+ row += '<td style="width:128px">(hidden)</td>';
+ }
+
+ return '<tr>' + row + '</tr>';
+ }).join('') + '</table>';
+ }
+ });
+}());
diff --git a/samples/filler/line.html b/samples/filler/line.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html>
+<head>
+ <title>filler > line | Chart.js example</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
+ <script src="analyser.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper">
+ <canvas id="chart-canvas"></canvas>
+ </div>
+ <div class="toolbar">
+ <button onclick="togglePropagate(this)">Propagate</button>
+ <button onclick="toggleSmooth(this)">Smooth</button>
+ <button onclick="randomize(this)">Randomize</button>
+ </div>
+ <code id="chart-analyser"></code>
+ </div>
+
+ <script>
+ var utils = Samples.utils;
+ var inputs = {
+ min: 20,
+ max: 80,
+ count: 8,
+ decimals: 2,
+ continuity: 1
+ };
+
+ function generateData() {
+ return utils.numbers(inputs);
+ }
+
+ function generateLabels(config) {
+ return utils.months({count: inputs.count});
+ }
+
+ utils.srand(42);
+
+ var presets = window.chartColors;
+ var data = {
+ labels: generateLabels(),
+ datasets: [{
+ backgroundColor: utils.transparentize(presets.red),
+ borderColor: presets.red,
+ data: generateData(),
+ label: 'D0'
+ }, {
+ backgroundColor: utils.transparentize(presets.orange),
+ borderColor: presets.orange,
+ data: generateData(),
+ label: 'D1',
+ fill: 0
+ }, {
+ backgroundColor: utils.transparentize(presets.yellow),
+ borderColor: presets.yellow,
+ data: generateData(),
+ label: 'D2',
+ fill: '-2'
+ }, {
+ backgroundColor: utils.transparentize(presets.green),
+ borderColor: presets.green,
+ data: generateData(),
+ label: 'D3',
+ fill: false
+ }, {
+ backgroundColor: utils.transparentize(presets.blue),
+ borderColor: presets.blue,
+ data: generateData(),
+ label: 'D4',
+ fill: '+1'
+ }, {
+ backgroundColor: utils.transparentize(presets.purple),
+ borderColor: presets.purple,
+ data: generateData(),
+ label: 'D5',
+ fill: '-1'
+ }, {
+ backgroundColor: utils.transparentize(presets.grey),
+ borderColor: presets.grey,
+ data: generateData(),
+ label: 'D6',
+ fill: '+1'
+ }, {
+ backgroundColor: utils.transparentize(presets.red),
+ borderColor: presets.red,
+ data: generateData(),
+ label: 'D7',
+ fill: 8
+ }, {
+ backgroundColor: utils.transparentize(presets.orange),
+ borderColor: presets.orange,
+ data: generateData(),
+ label: 'D8',
+ fill: 'end'
+ }]
+ };
+
+ var options = {
+ maintainAspectRatio: false,
+ spanGaps: false,
+ elements: {
+ line: {
+ tension: 0.000001
+ }
+ },
+ scales: {
+ yAxes: [{
+ stacked: true
+ }]
+ },
+ plugins: {
+ filler: {
+ propagate: false
+ },
+ samples_filler_analyser: {
+ target: 'chart-analyser'
+ }
+ }
+ };
+
+ var chart = new Chart('chart-canvas', {
+ type: 'line',
+ data: data,
+ options: options
+ });
+
+ function togglePropagate(btn) {
+ var value = btn.classList.toggle('btn-on');
+ chart.options.plugins.filler.propagate = value;
+ chart.update();
+ }
+
+ function toggleSmooth(btn) {
+ var value = btn.classList.toggle('btn-on');
+ chart.options.elements.line.tension = value? 0.4 : 0.000001;
+ chart.update();
+ }
+
+ function randomize() {
+ chart.data.datasets.forEach(function(dataset) {
+ dataset.data = generateData();
+ });
+ chart.update();
+ }
+ </script>
+</body>
+</html>
diff --git a/samples/filler/radar.html b/samples/filler/radar.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+ <title>filler > radar | Chart.js example</title>
+ <link rel="stylesheet" type="text/css" href="../style.css">
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../utils.js"></script>
+ <script src="analyser.js"></script>
+</head>
+<body>
+ <div class="content">
+ <div class="wrapper" style="max-width: 512px; margin: auto">
+ <canvas id="chart-canvas"></canvas>
+ </div>
+ <div class="toolbar">
+ <button onclick="togglePropagate(this)">Propagate</button>
+ <button onclick="toggleSmooth(this)">Smooth</button>
+ <button onclick="randomize(this)">Randomize</button>
+ </div>
+ <code id="chart-analyser"></code>
+ </div>
+
+ <script>
+ var utils = Samples.utils;
+ var inputs = {
+ min: 8,
+ max: 16,
+ count: 8,
+ decimals: 2,
+ continuity: 1
+ };
+
+ function generateData() {
+ // radar chart doesn't support stacked values, let's do it manually
+ var values = utils.numbers(inputs);
+ inputs.from = values;
+ return values;
+ }
+
+ function generateLabels(config) {
+ return utils.months({count: inputs.count});
+ }
+
+ utils.srand(42);
+
+ var presets = window.chartColors;
+ var data = {
+ labels: generateLabels(),
+ datasets: [{
+ backgroundColor: utils.transparentize(presets.red),
+ borderColor: presets.red,
+ data: generateData(),
+ label: 'D0'
+ }, {
+ backgroundColor: utils.transparentize(presets.orange),
+ borderColor: presets.orange,
+ data: generateData(),
+ label: 'D1',
+ fill: 0
+ }, {
+ backgroundColor: utils.transparentize(presets.yellow),
+ borderColor: presets.yellow,
+ data: generateData(),
+ label: 'D2',
+ fill: '-2'
+ }, {
+ backgroundColor: utils.transparentize(presets.green),
+ borderColor: presets.green,
+ data: generateData(),
+ label: 'D3',
+ fill: false
+ }, {
+ backgroundColor: utils.transparentize(presets.blue),
+ borderColor: presets.blue,
+ data: generateData(),
+ label: 'D4',
+ fill: '-1'
+ }, {
+ backgroundColor: utils.transparentize(presets.purple),
+ borderColor: presets.purple,
+ data: generateData(),
+ label: 'D5',
+ fill: '-1'
+ }]
+ };
+
+ var options = {
+ maintainAspectRatio: true,
+ spanGaps: false,
+ elements: {
+ line: {
+ tension: 0.000001
+ }
+ },
+ plugins: {
+ filler: {
+ propagate: false
+ },
+ samples_filler_analyser: {
+ target: 'chart-analyser'
+ }
+ }
+ };
+
+ var chart = new Chart('chart-canvas', {
+ type: 'radar',
+ data: data,
+ options: options
+ });
+
+ function togglePropagate(btn) {
+ var value = btn.classList.toggle('btn-on');
+ chart.options.plugins.filler.propagate = value;
+ chart.update();
+ }
+
+ function toggleSmooth(btn) {
+ var value = btn.classList.toggle('btn-on');
+ chart.options.elements.line.tension = value? 0.4 : 0.000001;
+ chart.update();
+ }
+
+ function randomize() {
+ inputs.from = [];
+ chart.data.datasets.forEach(function(dataset) {
+ dataset.data = generateData();
+ });
+ chart.update();
+ }
+ </script>
+</body>
+</html>
diff --git a/samples/style.css b/samples/style.css
@@ -0,0 +1,43 @@
+body, html {
+ font-family: sans-serif;
+ padding: 0;
+ margin: 0;
+}
+
+code {
+ color: #333;
+ display: block;
+ margin: 8px 0;
+ padding: 8px;
+ white-space: pre-wrap;
+}
+
+.content {
+ max-width: 800px;
+ margin: auto;
+ padding: 16px;
+}
+
+.wrapper {
+ min-height: 400px;
+ padding: 16px 0;
+ position: relative;
+}
+
+.wrapper canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.toolbar {
+ display: flex;
+}
+
+.toolbar > * {
+ margin: 0 8px 0 0;
+}
+
+.btn-on {
+ border-style: inset;
+}