Activity gauge - gradient with animation
Hi All,
I'm making a dashboard using Activity Gauge (http://www.highcharts.com/demo/gauge-activity) to show data.
I need to make it with gradient effect like darker to lighter which seems not possible with linear or radial gradient logically it seems not possible.
some how I have written an script with the help of support guy but seems not perfect solution as it do not have good visualisation and performance on browsers (very slower to load) see my samples -
http://jsfiddle.net/td2v4u4z/47/
http://jsfiddle.net/td2v4u4z/48/
http://jsfiddle.net/td2v4u4z/52/
I need charts with more sharp lines and clean curves like http://www.highcharts.com/demo/gauge-activity
Can any one suggest me the perfect solution for this or can implement in you libraries?
Thanks in advance.
Kundan Kumar Rai
shared this idea
-
... And here come the true gradients: http://jsfiddle.net/highcharts/sez1h3qu/
Still a bit of the transition can be seen.
-
Thanks for your request, this seems like an appealing visual feature. The problem with your current approach is that it adds a lot of series, which is both logically incorrect an also a performance problem.
I did some googling and also found that SVG doesn't support circular gradients like this. But we should be able to emulate it by chopping up the arcs in smaller arcs and applying a gradient to each. Six arcs (each 60 degrees) should be enough to achieve a seamless gradient.
I have to run now, but here's what I've got so far: http://jsfiddle.net/highcharts/td2v4u4z/63/
The fiddle uses more than six segments because I haven't had the time to add the actual gradients yet.
To do:
- Add gradients.
- Use fewer segments.
- Apply animation.
- Depending on how it looks when the gradient is applied, apply round line caps only to the first and last segment.
