Angular Gauges
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
-
Hans Wijnveen commented
Hi Torstein,
thank you for the feedback!
Gave it another try: http://jsfiddle.net/EjRLw/258/ and i'm really quite happy with the results! -
Hi Hans,
The black needle cap: See http://jsfiddle.net/EjRLw/111/
1. Yes, you can have gradient fills on plot bands. But, you probably want the gradient to run along the plot band - which I can't think of any way to do. You only have linear and radial gradients available.
2. That's a good idea. For now you can add a filter before applying the value:
if (newValue > 105) {
newValue = 105;
} -
Hans Wijnveen commented
Two more questions, based on the (promising!) features currently available in jfiddle:
1. Would it also be possible to have a gradient fill on plotbands?
2. it would be good to have the gauge handle values that fall outside the Y-axis range. I would prefer to have the needle pass the max Y-axis value by a fixed distance. For instance, if the Y-axis would be from -100 to 100 and the value > 100 then the needle could be set at 105. Maybe an "overscale" and "underscale" value would be approriate? You could set it to 105, 100 or NULL in which case the actual value would be presented, like in current functionality.
Sample gauge for both questions in http://jsfiddle.net/EjRLw/97/
-
Hans Wijnveen commented
Tested again today on jsfiddle, I'm getting really enthusiastic about the features!
My results: http://jsfiddle.net/EjRLw/84/Still struggling with the black needle cap; can I modify that color as well?
-
@Hans: Yup, all those things are in place too!
@Ashutosh: Perhaps you're trying to render the chart too early, so that the page isn't finished loading? For more specific help we need a live test page.
-
Ashutosh Dikshit commented
the gauge that is here http://jsfiddle.net/QeJGx/103/ works fine but when i used it in my code it gave me this error. "uncaught exception: Highcharts error #13: www.highcharts.com/errors/13" . The div where the graph is to be shown has the id "container" and the render to property too is set to "container". All other graphs are being drawn , only gauge graphs are throwing this exception.Kindly help, i relly need this working
-
Hans Wijnveen commented
I think the gauge on jsfiddle is going to be great! I really appreciate this!
A lot of settings are already in place, however I would love to see also:
- needle settings (color gradient, length and width of both the tip and the tail) color per series
- radius setting for minor/major ticks,labels and plot bands to place them more to the center of the dial
- plot band width
- title, label and value font settings
- title and value position
- labelLooking forward to the release!!
-
I'm sorry, it's still in development. The examples linked to above are running Highcharts directly from GitHub.
-
Mike commented
Can I start using the gauge type right now? I downloaded today and have version 2.2.3 (May 7, 2012). Using jquery 1.7.1. but that doesnt work.
-
@Joro: See http://www.highcharts.com/support/roadmap
-
Anonymous commented
@Torstein Hønsi, thank you a lot for the answer.
As I have read you have promised true 3D charts but you said version 3.0 is with high priority.
1.Is this mean true 3D charts will not be able in this version?
2.Will be Gauge included in 3.0?
3.Where I can read more about the new futures and changes that are coming with 3.0?
4.When version 3.0 is planned to be developed?Thank you for your feedback in advance,
Joro -
@Dick-for-some-reason: It's hard to set a time frame, but we're throwing in polar charts now that will share much of the same geometry as radar charts, then we'll stabilize it.
@vmlq: I set up a demo of a half gauge at http://jsfiddle.net/highcharts/QeJGx/
@Joro: There's a big discussion pro and con 3d charts if you search for 3D above. Most users appreciate our minimalistic design.
@Bruce Messer: I had the small tick easing implemented, but took it out as I thought noone would notice :) I'll bring it back...
-
Bruce Messer commented
Is there nothing that you can't do in Highcharts and JavaScript? Don't forget for wind direction displaying data from a weather station - which this component will be perfect for - the gauge will have to be a full 360° - but I'm sure that's already been taken care of!
The clock is simple and elegant - just to be picky - the only thing it lacks is a small click forward and then backward movement on the second hand that I've see in some examples in Flash. -
Anonymous commented
I think this time you should spend some time for CSS, too. The fusioncharts offers beautiful charts for now, because of different effects and 3D.
Please, spend more time for this,
Joro
-
vmiq commented
Torstein:
It looks great. I am anxious to see when we can start using this with other part of the chart.
Do you have any other examples of using gauges. I am trying to see how to create half gauges to put into a dashboard..see
http://www.fusioncharts.com/demos/business/kpi-dashboard/view/default.aspThe top right side of the gauge in this example. Lot of time its good to use only the half space for the circle for gauges. Can you let me know, which parameter to tune for this. Or give me a good example on how to do this
-
Dick Heth commented
Torstein... there is a reason they named me Dick. How soon will all of this stuff be stable? If it is not going to be soon is there a way to integrate what you have done with the GA chart libraries? I am seeing issues when I combine line and bar charts on the same web page that has a gauge.
mange takk du er den beste.
-
@Dick: Yes we will fix exporting
@Anonymous: There's a lot of progress on the Gauges. See https://github.com/highslide-software/highcharts.com/commits/protofy/js/parts-more/GaugeSeries.js.
-
Anonymous commented
Is there any progress on the Gauge? Where version 3.0 is planned to be deployed?
-
Dick Heth commented
Ok I have this thing working it is really nice when the javascript is on my server. I am not getting exporting to work is that me or have you not covered that area yet.
-
Dick Heth commented
Okay I am a new guy here and I have never seen this jsfiddle thing. How do you translate code in jsfiddle to a web page I am getting errors because it appears that some of the objects are not present for the javascript when i stick in a standalone web page like angular.html it is choking on things like
var chart = new Highcharts.Chart
'HighCharts' is undefined