You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using a vertical gradient for the line in a diagram can add additional information. A quick look to the data can give an interpretation of the values like colours of an ample.
See the following example:
The colour helps to interpret the data, without the requirement to look at the scale and interpret the actual numbers.
Feature Use Case
Display the level of sensor values (blue = very good, green = good, yellow = ok, orange = warning, red = bad). This already gives an interpretation of the values, which is easier to read than the direct interpretation of the numbers.
Display levels of fitness data (green = easy, orange = moderate, red = hard)
Visualize temperature data (0ºC = blue, 20ºC = green, 40ºC = yellow, 60ºC = orange, 100ºC = red)
Visualize light spectrum colour values.
The Problem with The Current Version
Currently, while adding gradients to the diagram is working fine, they are not applied to the diagram only with styling in mind.
The gradient is not scaled to the diagram. I have to write code to rescale the gradient if the diagram is scaled.
The gradient is not limited to the diagram itself, but to the whole canvas.
The gradient is not correctly applied to the label border.
There is a minor problem with the device pixel ratio while applying the gradient. It is different for the initial gradient and a gradient which is applied later to the canvas.
Adding points using the same or similar gradient as fill is not possible. Like, points which are have the same hue, but are a little bit brighter or darker.
My current solution
To solve the rescaling issue, I currently use code like this:
I found no simple solution because it seems at the time the gradient is created, one has to specify absolute point values. Scaling the lines and gradients to the right destination sizes seems not easily possible.
Therefore I suggest adding levels to vertical axes.
I don't think this should be in the core since it's not something everyone needs and it'll increase the library size. That being said, it's easy to write a plugin that does this. I made an example of it here: https://jsfiddle.net/c0tzo824/1/
For the example, I swapped the options from using max to min to better align with how the gradients work. The plugin wont cover all cases, in particular if multiple levels fall outside the scale range (i.e. levels are defined up to 100, but the scale tops out at 60).
Feature Proposal
Using a vertical gradient for the line in a diagram can add additional information. A quick look to the data can give an interpretation of the values like colours of an ample.
See the following example:
The colour helps to interpret the data, without the requirement to look at the scale and interpret the actual numbers.
Feature Use Case
The Problem with The Current Version
Currently, while adding gradients to the diagram is working fine, they are not applied to the diagram only with styling in mind.
My current solution
To solve the rescaling issue, I currently use code like this:
Possible Implementation
I found no simple solution because it seems at the time the gradient is created, one has to specify absolute point values. Scaling the lines and gradients to the right destination sizes seems not easily possible.
Therefore I suggest adding levels to vertical axes.
The level always covers the area from the previous level to the next
max
value.This levels can be used:
The text was updated successfully, but these errors were encountered: