gwatts / jquery.sparkline

A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
http://omnipotent.net/jquery.sparkline/
1.24k stars 278 forks source link

Feature request: Add range_map to lineColor and fillColor properties #48

Open AndrewGail opened 11 years ago

AndrewGail commented 11 years ago

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:

rafikam commented 9 years ago

:+1: could really use this feature!

rafikam commented 9 years ago

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:

image