Skip to content

Add support to fill between datasets - #4008

Merged
simonbrunel merged 1 commit into
chartjs:masterfrom
simonbrunel:filler-plugin
Mar 18, 2017
Merged

simonbrunel merged 1 commit into
chartjs:masterfrom
simonbrunel:filler-plugin

Conversation

@simonbrunel

@simonbrunel simonbrunel commented Mar 11, 2017 •

Copy link
Copy Markdown
Member

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.

Will submit another PR with documentation when #3751 is merged (let's keep #3547 as a reminder).

Fixes #2380 #2945

Demo

@etimberg etimberg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good. Will build and test this out now

Comment thread samples/utils.js
if (this.rand() <= continuity) {
data.push(Math.round(dfactor * value) / dfactor);
} else {
data.push(null);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In testing this was causing problems because the lines weren't actually skipping null data. If I change this to NaN the skipping works as expected.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This null vs NaN issue only affects the radar chart. The regular line chart seems to work fine

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null seems a more natural way to skip point so I would rather fix the radar chart to behave like the line one. What do you think?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the issue comes from here (not sure why you kept null in this change)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, I think the radar chart should behave like the line. Not sure why I left null there either

Comment thread samples/filler/line.html
<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>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not seeing any output in the code section for both samples. Is that expected?

@simonbrunel simonbrunel Mar 11, 2017 •

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, it should be fixed now :) (used _filler instead of $filler)

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 3 new examples 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.
@simonbrunel
simonbrunel merged commit 4b421a5 into chartjs:master Mar 18, 2017
@simonbrunel
simonbrunel deleted the filler-plugin branch March 18, 2017 10:09
roicos pushed a commit to roicos/Chart.js that referenced this pull request Aug 21, 2017
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 3 new examples 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.
@exhuma

exhuma commented Jul 8, 2019

Copy link
Copy Markdown

Assuming that you have two datasets, when setting fill to -1 on the second dataset, then the first point of dataset 0 is connected to the first point of dataset 1. If they have differing x-coordinates, this leads to a very weird graph.

exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
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 3 new examples 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Stacked area draws all the way to the bottom

4 participants