Angular Gauges such as the ones on http://www.fusioncharts.com/widgets/gallery.asp (in the top group).
This would allow people to writing financial systems or any kind of alert type of systems to monitor how far away they are from a goal or how close they are to triggering alerts.
Prime example is in the financial world: You set a Budget of $100,000 with a $20,000 threshold for a project, the gauge stays in the Green zone when spendings are below 100k, when its between 100 and 120 it is in the yellow zone (e.g. time to be concerned) and above 120k it would hit the red zone and all hands on deck.
That´s just one example of how useful that would be.
Completed as of Highcharts 2.3
@vmiq: Refering to http://jsfiddle.net/highcharts/qPeFM/, you create a half gauge by setting the yAxis startAngle and endAngle. We'll provide options for that backgrounds to follow as well.
@Amar: Angular gauges will be licensed together with the basic Highcharts product and the source code equally available at GitHub.
Is the source code available for angular gauge free (open source) or licensed one ?
The demo looks very nice..Are you done with the changes so far..I guess, you're going to post several demos including how to create half angular gauges once it's done.
This is great news!!!. I am waiting for angular feature for sometime. Please keep up the great work and keep it coming.
Hans Wijnveen commented
Hi Torstein, I have a sample gauge project based on the raphael.js, which I'm glad to share in case you can use it. It has a wide range of settings to create a visually attractive gauge, something we'd definitely could use!
Please contact me if you'd like to get the code.
Great to see. This is one of my favourite projects out there.
Keep up the amazing and innovative work.
How can we set the min value to some other value other than 0. If i give 20 as min value it is not rendering properly
Entering the testing phases for Highcharts 2.2 now, then we'll start working on 3.0 right away.
anything new ? ;)
I'd also like to know if there is an official time frame for gauge chart support.
Your version looks perfect for my app. Do you mind sharing the code (either via email or via http://jsfiddle.net/.
Is it possible for any of the admins to contact Brett and get the code. It will be a great help until highcharts comes up with the right version.
Also it will be great, if high chart team can announce the approx time for angular gauges.
Thanks for the help.
Hello Any idea, when the angular gauges will be released?
hi, when angular gauges releases?
Brett Kaby - cBPE commented
Hi, I have taken this example guage you wrote and modified it for our dashboard system we are building, here is a screen shot of the guage (www.stainlessnetwork.co.uk/guage.png), I would like to submit it for everyone to be able to use if any admins are interested? Brett.
Joe Kuan commented
There is no easy way to add subtitle, as it is not part of the Highcharts supported graphs. Only way is to use the Highchart's Renderer function which generates SVG script.
See Renderer.text function
Hi how to add the subtitle in this example http://jsfiddle.net/highcharts/bLks3/
Erlon Charles commented
Torstein Hons there is no position on the dates previously estimated
"Many Dashboards need 20 or even 30 gauges per page."
In all seriousness, I can't imagine a more dysfunctional way to display data!
For anyone interested in more effective dashboard design, this is a good place to start: http://www.perceptualedge.com/articles/misc/WhyMostDashboardsFail.pdf
And here is a good example from the same people of reworking a real-world example of a terrible gauge based dashboard: http://www.perceptualedge.com/blog/?p=832
Gauges are fun and may be useful for novelty displays but for actual business dashboards... we can do much better than that!
Please support something that looks as good as this:
but also please make sure that many angular gauges can be displayed in a single webpage without overloading the browser. Many Dashboards need 20 or even 30 gauges per page.
Thank you very much.
Joe Kuan commented
I have changed your code, beautified it and added dial animation.
For details: http://joekuan.wordpress.com/2011/07/06/integrating-highcharts-gaugedial-chart-into-extjs/