I suggest you ...

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.

951 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Helgi Þormar ÞorbjörnssonHelgi Þormar Þorbjörnsson shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    63 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Torstein HønsiAdminTorstein Hønsi (Admin, Highcharts JS) commented  ·   ·  Flag as inappropriate

        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 WijnveenHans Wijnveen commented  ·   ·  Flag as inappropriate

        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/

      • Ashutosh DikshitAshutosh Dikshit commented  ·   ·  Flag as inappropriate

        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 WijnveenHans Wijnveen commented  ·   ·  Flag as inappropriate

        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
        - label

        Looking forward to the release!!

      • MikeMike commented  ·   ·  Flag as inappropriate

        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.

      • AnonymousAnonymous commented  ·   ·  Flag as inappropriate

        @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

      • Torstein HønsiAdminTorstein Hønsi (Admin, Highcharts JS) commented  ·   ·  Flag as inappropriate

        @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 MesserBruce Messer commented  ·   ·  Flag as inappropriate

        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.

      • AnonymousAnonymous commented  ·   ·  Flag as inappropriate

        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

      • vmiqvmiq commented  ·   ·  Flag as inappropriate

        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.asp

        The 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 HethDick Heth commented  ·   ·  Flag as inappropriate

        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 HethDick Heth commented  ·   ·  Flag as inappropriate

        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 HethDick Heth commented  ·   ·  Flag as inappropriate

        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

      ← Previous 1 3 4

      Feedback and Knowledge Base