Open AndrewGail opened 11 years ago
:+1: could really use this feature!
Found a workaround for my needs and thought I'd share it. I was asked to create a sparkline where the line color changed if the values went above or below the first data point.
I looked at the drawShape function in the plugin and thought I was going to have to introduce a bunch of new points to represent every time the line crossed the initial value and break up the path into a number of canvas strokes with each time the color needed to change. But I found a simpler and I think more elegant solution using a linear gradient for the stroke style:
_drawShape: function (shapeid, path, lineColor, fillColor, lineWidth) {
var context = this._getContext(lineColor, fillColor, lineWidth),
initialY = path[0][1],
grad= context.createLinearGradient(0, initialY - 1, 0, initialY + 1),
i, plen;
grad.addColorStop(0, "green");
grad.addColorStop(0.5, lineColor);
grad.addColorStop(1, "red");
context.strokeStyle = grad;
context.beginPath();
And then the rest of the function code from there. This is the only way my app currently uses sparklines but I'm planning to change this to make it option-driven to keep it more versatile for future use.
UI results:
It'd be nice to be able to alter the line and fill colors on a line graph based on range maps, much in the same way you can specify a colorMap on bar graphs.
Other than that, Sparkline's are great :+1: