Dynamic binding in Angular Gauge

[MaheshKumarParticipant]

Hi JqWidgetTeam,

I have a requirement where I have to plot multiple Gauge’s based on Server response values.So for example if I receive two records from API then I have to plot to Gauge and if four then will plot four Gauge and after that I have to just update the gauge values or other properties like max,caption or etc in subsequent API’s call.

Please refer below jsfiddle link:
http://jsfiddle.net/Sonuesf/bj5auao6/7/

So what actually I am trying to achieve in above sample is I am trying to save Gauge settings in an array and later on with help of ng-Repeat I am trying to plot each Gauges.

So as of now the Guage is plotting based on count of array but its properties are not getting changed.

Please help me how to resolve it.

Thanks & Regards,
Rahul

[Peter StoevKeymaster]

Hi Rahul,

When you save your settings, the gauges will be already rendered so I would suggest you to see the Gauge’s API to learn how to set values and call methods dynamically. This is the way you can achieve your goal.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[MaheshKumarParticipant]

Hi Peter,

I have changed my implementation just refer below link

http://jsfiddle.net/Sonuesf/bj5auao6/10/

To understand my scenario click on setNewValue button.
Now in alert message the values of gauge properties are getting changed but its not reflected in chart or what I can say its not refreshing.
All I want to achieve this after changing the properties value how to refresh the chart. Please help me Peter.

Thanks & Regards,
Rahul

[MaheshKumarParticipant]

Hi Peter,

Just forgot to tell you that click on SetNewValue button more than one time then you will be able to see the scenario.

Looking forward for you reply.

Thanks & Regards,
Rahul

[MaheshKumarParticipant]

Hello Peter,

Still waiting for you reply however I have achieved every thing that I wanted to achieve.
Here is the fiddle sample I would request you to go through with my implementation.

http://jsfiddle.net/Sonuesf/bj5auao6/15/

Now in above sample every thing is working fine but when I implemented same thing in my live project I am getting this warning/error however functionality is working fine.

$scope.gaugeSettingsArray[index].Source.apply is not a function.

I also dig down on jQwidget forum and I found this post.
http://www.jqwidgets.com/community/topic/jqx-gauge/

Here Dimitar suggested how to resolve this problem but I am not able to implement same thing in my sample.

Can you tell how to implement this piece of code in my sample.I guess this might resolve my problem.
$scope.$on(‘jqxGaugeCreated’, function (event, arguments) {
$scope.jqxSettings.apply(‘val’, 6666);
});

Looking forward for you help.

Thanks & Regards,
Rahul

[MaheshKumarParticipant]

Hi Team,

Still waiting for you response how ever now I am now able to update gauge property values dynamically.Please refer below link and click on Start button.
http://jsfiddle.net/Sonuesf/bj5auao6/35/

Now According to my requirement I have to show two Gauge per page so I have Implemented pagination thing in my application where 3 Gauge are plotting correctly first time. two Gauges in first page and one in Second page.Every thing is working fine as of now.

But now after first rendering of chart when you click on Start button you will get the error that I am trying to show you at the begging of this Post.
You will get error scope.apply is not a valid function.Please refer below sample in which you will found the behavior.

http://jsfiddle.net/Sonuesf/bj5auao6/36/

I request you to please help me to resolve this issue as the purchasing of JqWidget license is dependent on this implementation.

Thanks & Regards,
RK

[MaheshKumarParticipant]

Any Update Guys?

[Peter StoevKeymaster]

Hi MaheshKumar,

You can’t have apply method in the way you create the Gauge in your example. I would suggest you to create the Gauge in the way we show how to create it in our AngularJS Gauge demo. If you do that, you will have apply method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts