2

i would like to create a gauge where the scale goes from -100 to 100 with 0 being in the bottom. If the score is positive, it will be in green and going from 0 up to the right. If the score is negative, it will be in red and going from 0 up to the left. This will look similar to: enter image description here

I am not looking to create this gauge from scratch and would like to know if there are any existing angular gauges that I can extend.

  • 1
    I guess we will never know what he decided to use ... – Mawg Sep 22 '15 at 10:03
  • That's twice this question has been bumped to the homepage twice. The OP was last seen 3 weeks after posting this - over two years ago. Can’t the algorithm be tweaked, to avoid this sort of thing? – Mawg Jul 3 '17 at 8:18
  • And ... bump it goes again. The OP joined 2.5 years ago and was last seen 2.5 year ago - he is not coming back. Meanwhile, I have posted not one, but two, answers - which work and do answer the question. There is also another good looking answer. Why keep bumping this back at the expense of other, more worthy questions. This has three goo answers, none of which will ever be accepted. What porpoise does bumping it to the home page serve? – Mawg Oct 2 '17 at 8:53
  • I eat my words! You came back :-) Thanks for accepting an answer, as this will help others in future – Mawg Feb 26 '18 at 12:24
  • 1
    Thank you all for the help – Abhishek Dutta Feb 27 '18 at 11:01
0

@AbhishekDutta This is the best that I can find.

It seems to do pretty much what you want, but I leave that for you to decide.

Features

Displays a circular progress meter.
Utilises SVG for rendering.
Adjustable dimensions, color and thickness.
No additional dependencies outside of AngularJS.
Attributes

    size defines the pixel width and height for the svg element. This defaults to 200.
    stroke defines the color of the progress arc. This should be a valid stroke property for an SVG path element. This defaults to black.
    stroke-width defines the width of the progress arc line in pixels. This should be a value between 1 and size / 2. This defaults to 20.
    progress is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring.
    counter-clockwise if this attribute is present and set to a "truthy" value (true, yes, 1) the progress bar will render in a counter-clockwise direction.

Styling

    As well as using attributes of the directive element, a progress arc can be styled using CSS.

    If you use CSS for styling, try to avoid setting a stroke-width property since this is used to calculate the position of the arc inside the SVG element.

enter image description here


[Update] I also found this. See the demo here.

enter image description here

1

I found another. I am very interested in using D3.js as it seems to be the biggest free JS charting library (that I can see). Even if not, it has much more than I can ever use. Just look at the gallery.

This ng-Newsletter covers using it with AngularJs and, as you can see in that newsletter, D3.js does have a gauge chart.


[Update] See also http://bl.ocks.org/metormote/6392996 and wrap it with Angular, as per the newsletter (I won't post ascreen shot, as it is interactive, but it is a very good gauge).

0

Essential Gauge for JS can do this. Please refer to this custom sample.

The entire product is available for free through the community license program.

Screenshot

-Davis(Syncfusion)

  • I won't downvote you, but JS != AngularJs. The OP want's to simply declare a gauge in his HTML, link it to his $scope and when he updates the $scope variable AngularJs will automatically update the gauge (Model/View/Controller). So, this would require some work to get it working with Angular. – Mawg Jul 8 '15 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.