skip to Main Content

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


  1. Place ajax request in setInterval:

    setInterval(function(){
        //ajax request here
    }, 5 * 1000);
    
    Login or Signup to reply.
  2. 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:

    $(function() {
    
    var last_price = {};     // object to keep track of previous prices
    
    // factored out function
    var update_chart = function (data_to_be_plotted)
    {
         $('#graph').jqBarGraph({
             data: data_to_be_plotted,
             height: 800,
             width: 1200,
             barSpace: 20,
             colors: ['#085497','#74b3ea'],
             prefix: '£'
         });                                      
    };
    
    $.ajax({
        //...bla bla bla...
    
            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'];
    
                    // if this item was not registered before, or the price is different
                    if (! last_price[title] || last_price[title] !== price)
                    {
                        // this you have to adapt to your own needs
                        arrayOfData.push(title + '<br/><br />' + price);
                    }
                    // register the price for the item, so that you know the next time
                    last_price[title] = price;
                });
    
                if (arrayOfData.length > 0) // i.e.: something new came
                {
                     update_chart(arrayOfData);
                }
    
        });
    
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search