stherrienaspnet/ngradialgauge

Angular.js Radial Gauge

ngradialgauge's Issues

Changing font family of gauges

Is it possible to change the font family of the gauges? I can't seem to do it.

is it possible to give hover on gauge chart

I am trying to giving hover it's not working

http://plnkr.co/edit/S91OOjg5h3dIoFFO68ZC

Angular 2+ support?

Thanks for creating such a great chart!

Have you planned to integrate to use with Angular 2 or higher version? Thank you so much.

Exception when using tabs in Firefox

Hello,

I receive some exceptions with your plugin when I use it with tabs. The first panel is well rendered (if it's the active one), but not the others (which are hidden by default) :

The problem comes from line 214 :

var textWidth = dummyText.node().getBBox().width;

It seems getBBox() does not work very well in Firefox when using it inside tab panels.

This issue advises to use getBoundingClientRect() instead of getBBox(), and it works for me.

By the way thank you for this plugin !

Add in bower support?

Any chance you can add bower support?

Adding more than 1 needle inside gauge

Could you give me the option of how to draw more than one needle inside the gauge? Please

Reduce the major and minor graduation

I am using the below code,

$scope.majorGraduations = 10;
$scope.minorGraduations = 0;

Am I doing anything wrong here?

easing CW and CCW

It's possible to force the easing direction?
If you put 0 as min value 4.5 as max value and you change currentvalue 0 to 4.4 you'll see the neddle torate ccw.
It's better to rotare CW when angle < 0 and CCW when angle > 0 .

Also a bug, if the value it's bigger than maxvalue, the neddle disappear.

Needle overrun

When the angle between two values exceeds 180, the needle transition covers the area outside the gauge. This can be prevented by something like

         var lastAngle = 0;
         var onValueChanged = function (pValue, pPrecision, pValueUnit) {
             if (typeof pValue === 'undefined' || pValue == null) return;

             if (needle && pValue >= minLimit && pValue <= maxLimit) {
                 var needleAngle = getNewAngle(pValue);
                 var diff = needleAngle - lastAngle; //avoid overrun
                 lastAngle = needleAngle;
                 var n = needle, t = transitionMs;
                 if (Math.abs(diff) >= 180) {
                     t = transitionMs / 2;
                     n = needle.transition()
                         .duration(t)
                         .ease('linear')
                         .attr('transform', 'rotate(' + (needleAngle - diff / 2) + ')');
                 }
                 n.transition()
                     .duration(t)
                     .ease('bounce-in')
                     .attr('transform', 'rotate(' + needleAngle + ')');
                 svg.selectAll('.mtt-graduationValueText')
                 .text('[ ' + pValue.toFixed(pPrecision) + pValueUnit + ' ]');
             } else {
                 svg.selectAll('.mtt-graduation-needle').remove();
                 svg.selectAll('.mtt-graduationValueText').remove();
                 svg.selectAll('.mtt-graduation-needle-center').attr("fill", inactiveColor);
             }
         };

With other words - splitting the transition in two and making sure that the intermediate value is inside the range.

Regards,

HeiDJ65

Gauge is not showing up in emulator

Hi,

The radial gauge is not showing up in iOS emulator. But its working perfectly in browser.

What is the issue?

Trying to bind gauge but wont work

We are attempting to use the gauge with Firebase and need to bind it to update as the data source updates. We have tried putting $scope.value in the $loaded() function but it does not work. Do you have any ideas on how we can bind the value to an object in the function?

Remove unit from graduation

How can I remove the unit value from the chart? As per the example, I am trying to remove the unit "Kw" from the chart, but I should have the unit for value.

Needle does not redraw

When the gauge has a value that is outside of the lower and upper limit the needle is removed from the DOM. When the gauge is updated with a value that is within the lower and upper limit via ngOnChanges the needle is not redrawn.

Flickering view

I find that if I use data="..." attribute then the gauge flickers on update, if I use longer form of specifying values then transition is smooth.

ie.

<div width="300" ng-radial-gauge ranges="sweep.ranges" value="sweep.value" value-unit="sweep.unit" 
     precision="sweep.precision" lower-limit="sweep.lowerLimit" upper-limit="sweep.upperLimit">
</div>

<!-- Flickers with update to value -->
<div width="300" ng-radial-gauge data="sweep">
</div>

Setting Gauge width

How would one set a % width for a gauge?

Specifying width="80%" results in width being set to 80 and not 80% of the available width.

Thanks

Bower support not working

Thanks very much for adding Bower support. But it doesn't seam to work. A few comments (I'm not a bower expert though)...

1. "bower info ngRadialGauge" responds with "ENOTFOUND Package ngRadialGauge not found". Did you register your package at the Bower registry?
2. The file "bower.json" is usually located at the root level of a GIT repo. But I'm not sure if this is a requirement. Might be depending on how you register your package.
3. "main" in "bower.json" are the files to be installed by bower to use your package. "index.html" cannot be correct here. Should rather be js and css files; and in case you need any templates html as well.
4. The "version" in your "bower.json" says "1.0.0". But there is not version "1.0.0" in your repo.
5. The "dependencies" in your "bower.json" are too restrictive I believe; e.g., "angular":"~1.2.28" is not matching Angular 1.3.x. But it should (I am using ngRadialGauge successfully with AngularJS 1.3.15). "angular":"'~1" should be ok I think. Same with d3.
6. I'm not sure if it works when you define your directive like this: "app.directive('ngRadialGauge',...)" because "app" is not necessarily defined (unless you do that yourself). You need to define your own Angular module. Something like this: "angular.module('ngRadialGauge').directive(...);"

Just my two cents.
Hope it helps.

npm install

Hi,

I'm trying to import this to an Ionic 3 project. Is it possible add a npm installer?

Thank you

Chaging the ViewBox height

Hi
I am using the radial gauge with an angle='90' and with needle-value-text-size='0' generating a SVG object with more height than what is really needed.

Is there a way to change that without changing the directive itself?

MajorGraduations arc angles were not correct for odd numbers when numbers were used without precision

My project don't need decimal numbers. So I am hiding the precision for numbers. For even number Upper limit , the needle and graduations point correctly. But for odd upper limit the graduations doesn't come in the angles needed. Could you provide any solution or suggest what should be done. While rendering MajorGraduations the gauge is divided into 2 parts and then placing arc angles which is working fine with even numbers. These are functions that need to be changed. Hoping to expect an answer soon. Thank you.

         var renderMajorGraduations = function (majorGraduationsAngles) {
             var centerX = view.width / 2;
             var centerY = view.width / 2;
             //Render Major Graduations

getMajorGraduationValues

getMajorGraduationAngles