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:
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.
@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.
[Update] I also found this. See the demo here.
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).
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.
-Davis(Syncfusion)
$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.