lundi 30 mars 2015

Jquery Timer to run procedure every 5 minutes

I've got the following Jquery code that goes to a webservice via ajax to receive data to populate 2 gauges. It rus on pageload but I would like it to run and update the gauages every 5 minutes. How do I do this please?


My code is:-



$(document).ready(function(){

$.ajax({
type: "POST",
url: "http://ift.tt/19mTmMW",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var TicketResponse = response.d;
var opts = {
lines: 12, // The number of lines to draw
angle: 0.05, // The length of each line
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.75, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#374767' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#67c2ef', // Colors
colorStop: '#67c2ef', // just experiment with them
strokeColor: '#f2f4f8', // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('gauge1'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 200; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(100); // set actual value

$.each(TicketResponse, function (index, car) {

gauge.set(car.CurrentTime); // set actual value

$('#lblAvgResponseTime').text(car.CurrentTime);
$('#lblAvgResponseTimePercent').text(car.diffPercent + ' %');
$("#iResponseTimeArrow").removeClass();

if (car.diffPercent < 0) {
//Closure time going up ==== BAD
$("#iResponseTimeArrow").addClass("fa fa-arrow-circle-o-up text-danger");
}
else {
//Closure time going down ===== GODD
$("#iResponseTimeArrow").addClass("fa fa-arrow-circle-o-down text-success");
}
});

},
failure: function (msg) {
$('#output').text(msg);
}
});

$.ajax({
type: "POST",
url: "http://ift.tt/1G7yrdn",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var TicketClosure = response.d;

var opts2 = {
lines: 12, // The number of lines to draw
angle: 0.05, // The length of each line
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.75, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#374767' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#fabb3d', // Colors
colorStop: '#fabb3d', // just experiment with them
strokeColor: '#f2f4f8', // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('gauge2'); // your canvas element
var gauge = new Gauge(target).setOptions(opts2); // create sexy gauge!
gauge.maxValue = 200; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)

$.each(TicketClosure, function (index, car) {

gauge.set(car.CurrentTime); // set actual value

$('#lblAvgCloseTime').text(car.CurrentTime);
$('#lblAvgCloseTimePercent').text(car.diffPercent + ' %');
$("#iClosureTimeArrow").removeClass();

if (car.diffPercent < 0)
{
//Closure time going up ==== BAD
$("#iClosureTimeArrow").addClass("fa fa-arrow-circle-o-up text-danger");
}
else
{
//Closure time going down ===== GODD
$("#iClosureTimeArrow").addClass("fa fa-arrow-circle-o-down text-success");
}
});
},

failure: function (msg) {
$('#output').text(msg);
}
});

}

Aucun commentaire:

Enregistrer un commentaire