I have built a simple web app that fetches some data (JSON) from the ebay API and plots the result onto a chart showing the price for each item. This works nicely.
However, I would like the chart to update in realtime if an item got a bid or finished for example. All this data is contained in the JSON returned from ebay.
My problem is how do I get the graph to update and the ajax to call either as the JSON changes (This would be the ideal method) or say every 1 – 5 seconds?
$(function() {
$.ajax({
type: "GET",
url: 'http://open.api.ebay.com/shopping?callname=GetMultipleItems&responseencoding=JSON&appid=&siteid=3&ItemID=350720045158,390524810753,251237014268,200902751277,140927144371&version=811',
dataType: "jsonp",
jsonp: "callbackname",
crossDomain : true,
data: { },
success: function (result) {
arrayOfData = new Array();
var items = result['Item'];
$.each(items, function(i, item) {
var title = items[i]['Title'];
var price = items[i]['ConvertedCurrentPrice']['Value'];
var timeleft = items[i]['TimeLeft'];
arrayOfData.push(['400', title + '<br/><br />' + timeleft]);
});
$('#graph').jqBarGraph({
data: arrayOfData,
height: 800,
width: 1200,
barSpace: 20,
colors: ['#085497','#74b3ea'],
prefix: '£'
});
},
error: function (data) {
console.log(arguments);
}
});
});
2
Answers
Place ajax request in setInterval:
In case you just want to react when price has changed, you can do something like this. It is very rough but I just want to show you a guideline: