jQuery UI Widgets Forums Plugins AngularJS JqxGauge value update issue.

Tagged: ,

This topic contains 7 replies, has 2 voices, and was last updated by  RahulEsf 4 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • JqxGauge value update issue. #81008

    RahulEsf
    Participant

    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.

    JqxGauge value update issue. #81011

    Peter Stoev
    Keymaster

    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

    JqxGauge value update issue. #81015

    RahulEsf
    Participant

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

    JqxGauge value update issue. #81016

    RahulEsf
    Participant

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

    JqxGauge value update issue. #81019

    Peter Stoev
    Keymaster

    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

    JqxGauge value update issue. #81023

    RahulEsf
    Participant

    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

    JqxGauge value update issue. #81024

    Peter Stoev
    Keymaster
    JqxGauge value update issue. #81069

    RahulEsf
    Participant

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.