JqxGauge value update issue.

[RahulEsfParticipant]

We are facing issue while updating values in Gauge. I am implementing this features using angular.

The scenario is like I have 5 or 6 Guage in a single page(dynamic chart count) so I am saving each gauge setting in angular array and on every subsequent call to API I am getting new values for gauge that I need to bind with corresponding angular array settings.

Below is the code snippet:
<div >
<div class=”tile” ng-repeat=”machineLineSpeedChart in machineLineSpeedChartSettings| pagination: curPage * pageSize | limitTo: pageSize track by $index”>

<jqx-gauge jqx-create=”createWidget jqx-settings=”machineLineSpeedChart” style=”width:100%; height: 130px”></jqx-gauge>
</div>
</div>

On Script side I have code like this:

$scope.machineLineSpeedChartSettings = [];

$scope.PlotMachineLineSpeedChart = function (chartData) {
$scope.createWidget = false;

var currentLineSpeed = 12;

// prepare jqxChart settings
$scope.machineLineSpeedChart = {
ranges: [{ startValue: 0, endValue: 130, style: { fill: ‘#4cb848’, stroke: ‘#4cb848’ }, startDistance: 0, endDistance: 0 },
{ startValue: 130, endValue: 180, style: { fill: ‘#fad00b’, stroke: ‘#fad00b’ }, startDistance: 0, endDistance: 0 },
{ startValue: 180, endValue: 220, style: { fill: ‘#e53d37’, stroke: ‘#e53d37’ }, startDistance: 0, endDistance: 0 }],
cap: { size: ‘1%’, style: { fill: ‘#2e79bb’, stroke: ‘#2e79bb’ } },

border: { style: { fill: ‘#8e9495’, stroke: ‘#7b8384’, ‘stroke-width’: 1 } },
ticksMinor: { interval: 5, size: ‘5%’ },
ticksMajor: { interval: 20, size: ‘10%’ },
labels: { position: ‘outside’, interval: 20 },
pointer: { style: { fill: ‘#2e79bb’ }, width: 5 },
animationDuration: 1500,
value: currentLineSpeed,
width: 500,
height: 140,
radius: 100,
}

$scope.machineLineSpeedChartSettings.push($scope.machineLineSpeedChart);
$scope.createWidget = true;
}

The above code works fine for first iteration but when I am trying to update value in gauge like this :
$scope.machineRpmChartSettings[index].apply(‘val’, 100);

I am getting below error :

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

Please give me the resolution Dimitar how to tackle this situation I have tried everything.

[Peter StoevKeymaster]

Hi RahulEsf,

This is invalid code: $scope.machineRpmChartSettings[index].apply(‘val’, 100); You don’t have apply method to call and that is the exception which is raised. You will have apply method if you create the widget as shown in the AngularJS Demos on our website.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RahulEsfParticipant]

Hey Peter it would be a great help for me if you could just explain how can I implement apply() method inside my code.

[RahulEsfParticipant]

Please refer this link in which Dimitar suggested to use above way
http://www.jqwidgets.com/community/topic/jqx-gauge/

[Peter StoevKeymaster]

Hi RahulEsf,

I see you read the Dimitar’s suggestion. Why did not you follow it then? I also suggest you to look at the Gauge’s AngularJS demo in order to learn how to use it with AngularJS.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RahulEsfParticipant]

Could you please provide the link of Gauges Angular Demo link because I have not found any angular sample for Gauge with value update on website.
Now second thing in Dimitar suggestion I have no idea about this function.

$scope.$on(‘jqxGaugeCreated’, function (event, arguments) {
$scope.jqxSettings.apply(‘val’, 6666);
});

$scope.$on()-Could you please explain what it does.

Looking forward for your reply

[Peter StoevKeymaster]

Hi RahulEsf,

The link to the Gauge demo is: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/gauge.htm?arctic
Binding to events in AngularJS is explained on: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/index.htm and demonstrated on: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/directive-event.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RahulEsfParticipant]

Thanks Peter,
Now I am able to update Gauge value but facing another one that is.

TypeError: Cannot read property ‘replace’ of undefined
at Object.a.jqx.svgRenderer._toLinearGradient (http://localhost/Application/jqwidgets/jqxdraw.js:7:13490)
at b._addBorder (http://localhost/Application/jqwidgets/jqxgauge.js:7:4502)

Do you have any idea about this why I am getting this error.

[Author]

Posts