jQuery UI Widgets Forums Gauges and Maps Gauges Update gauges via ajax

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Update gauges via ajax #70211

    fcovas
    Participant

    Hello,

    I have 6 gauges in a page and I’m trying to update their values with data returned from the server in JSON format through ajax.
    For some reason the values got update only once. After the first update I see the JOSN data being sent from the server, but the gauges do not get updated.

    $(‘#selectOrgStructure’).change(function() {
    var department=$(this).val();

    var values = $(“#dateSliderPeopleProductive”).dateRangeSlider(“values”);

    var daysFrom = values.min.getDate(),
    monthFrom = values.min.getMonth() + 1,
    yearFrom = values.min.getFullYear();

    var fromDate=monthFrom + “/” + daysFrom + “/” + yearFrom;

    var daysTo = values.max.getDate(),
    monthTo = values.max.getMonth() + 1,
    yearTo = values.max.getFullYear();

    var toDate=monthTo + “/” + daysTo + “/” + yearTo;

    $.ajax(
    {
    type: ‘POST’,
    url: ‘<%= Url.Action(“updateGauges”,”workforcevelocityfactors”)%>’,
    dataType: ‘json’,
    cache: false,
    async: true,
    data: {fromDate: fromDate,toDate: toDate, department:department},
    success: function (data)
    {

    $(‘#gaugeContainerLeadership’).jqxGauge(‘setValue’, data.LeadershipScore);

    $(‘#gaugeContainerClimate’).jqxGauge(‘setValue’, data.ClimateScore);

    $(‘#gaugeContainerWorkplace’).jqxGauge(‘setValue’, data.RelationshipScore);

    $(‘#gaugeContainerSpeed’).jqxGauge(‘setValue’, data.ThoughtScore);

    $(‘#gaugeContainerEngagement’).jqxGauge(‘setValue’, data.EngagementScore);

    $(‘#gaugeContainerOverall’).jqxGauge(‘setValue’, data.OverallScore);

    }
    });

    Can you please help me?

    Thank you so much!

    Update gauges via ajax #70217

    Dimitar
    Participant

    Hello fcovas,

    Are you sure the data in each Ajax call’s success callback is different? Moreover, please make sure you are using the latest version of jQWidgets (3.7.1).

    Best Regards,
    Dimitar

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

    Update gauges via ajax #70245

    fcovas
    Participant

    Hello Dimitar,

    The Ajax call’s success is made when an option within a dropdown box is changed.

    So, when the dropdown box has a different item selected, the following event below is triggered:

    $(‘#dropdownbox’).change(function() {
    $.ajax(
    {
    type: ‘POST’,
    url: ‘’,
    dataType: ‘json’,
    cache: false,
    async: true,
    data: {fromDate: fromDate,toDate: toDate, department:department},
    success: function (data)
    {

    $(‘#gaugeContainerLeadership’).jqxGauge(‘setValue’, data.LeadershipScore);

    }
    }

    If a debug the success function above every time an item is changed in the dropdown, I see new data coming from the server based on the selection made in the dropdown. However, the gauge above (the one that needs to be updated with the new data), does not get its value changed.

    I just updated the jQWidgets to version (3.7.1)

    Best Regards,
    Fabiano

    Update gauges via ajax #70246

    fcovas
    Participant

    $.ajax(
    {
    type: ‘POST’,
    url: ‘’,
    dataType: ‘json’,
    cache: false,
    async: true,
    data: {fromDate: fromDate,toDate: toDate, department:department},
    success: function (data)
    {

    $(‘#gaugeContainerLeadership’).jqxGauge(‘setValue’, data.LeadershipScore);

    }
    }

    After every different success call, “data.LeadershipScore” contains different data. If I put an alert box and print it I can see the data is different. I can also see the data through Chrome’s debugging…

    So, for some reason, $(‘#gaugeContainerLeadership’).jqxGauge(‘setValue’, data.LeadershipScore) does not change the gauge’s value. It maintains the previous value. However, the first time I change a value in the dropdown box, the gauge value gets updated. After the first time, the gauge stops getting update, even though different data are being sent from the server.

    Update gauges via ajax #70251

    fcovas
    Participant

    Ok,

    One more finding. The gauges are updating, but using the values returned by the server on the “previous” ajax call ….

    Update gauges via ajax #70266

    Dimitar
    Participant

    Hello Fabiano,

    We cannot test your scenario, but in the following fiddle: http://jsfiddle.net/Dimitar_jQWidgets/u20hytjt/ the gauge is updated correctly with the setValue method, even if it is called multiple times. Maybe the issue originates on your server-side.

    Best Regards,
    Dimitar

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

    Update gauges via ajax #70741

    fcovas
    Participant

    Dimitar,

    After checking some of the answers on the forum, I am sure the problem is not on my server-side.
    I think the problem is that I’m not using a dataAdapter to perform the update of the gauges values.

    Below is a sample of the JSON returned from the server. This gets updated after every server-call, but the gauges does not get updated.

    {“LeadershipScore”:”2.81″,”OverallScore”:”2.86″,”ThoughtScore”:”2.84″,”EngagementScore”:”2.85″,”ClimateScore”:”2.82″,”RelationshipScore”:”3″}

    Below is how I interact with the server through ajax and update the gauges.

    $.ajax(
    {
    type: ‘POST’,
    url: ‘<%= Url.Action(“updateGauges”,”workforcevelocityfactors”)%>’,
    dataType: ‘json’,
    cache: false,
    async: true,
    data: {fromDate: fromDate,toDate: toDate, department:department},
    success: function (data)
    {

    $(‘#gaugeContainerLeadership’).jqxGauge(‘setValue’, data.LeadershipScore);

    $(‘#gaugeContainerClimate’).jqxGauge(‘setValue’, data.ClimateScore);

    $(‘#gaugeContainerWorkplace’).jqxGauge(‘setValue’, data.RelationshipScore);

    $(‘#gaugeContainerSpeed’).jqxGauge(‘setValue’, data.ThoughtScore);

    $(‘#gaugeContainerEngagement’).jqxGauge(‘setValue’, data.EngagementScore);

    $(‘#gaugeContainerOverall’).jqxGauge(‘setValue’, data.OverallScore);

    }
    });

    Dimitar, what am I missing?
    How do I incorporated the ajax call above with the dataAdapter?
    I think that lack of a dataAdapter is what’s causing the problem.

    Thank you!

    Update gauges via ajax #70760

    Dimitar
    Participant

    Hello fcovas,

    I do not think you need data adapter in this case. However, you need to pass numbers to the setValue method, not strings (as returned by your server). Please try the following:

    $('#gaugeContainerLeadership').jqxGauge('setValue', parseFloat(data.LeadershipScore));

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.