Update gauges via ajax

[fcovasParticipant]

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!

[DimitarParticipant]

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/

[fcovasParticipant]

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

[fcovasParticipant]

$.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.

[fcovasParticipant]

Ok,

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

[DimitarParticipant]

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/

[fcovasParticipant]

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!

[DimitarParticipant]

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/

[Author]

Posts