Python + Ajax + Flot

[Frank]

Hello, I have a problem:
from a python script fetch the data, every second, using Ajax and stores them in a variable "res".
The problem is that I would like to display the graph in real time, with updated data.
Where am I wrong?

$(function() {
        function getRandomData() {
        var res;
        var plot;
                $.ajax({
                        method:     'GET',
                        dataType:   'html',
                        success:    function(res) {
                                    res = {{ data }};
                                    plot = $.plot("#placeholder", [ res ], {    
                                    series: {
                                        shadowSize: 0   // Drawing is faster without shadows
                                    },      
                                    yaxis: {
                                        min: -1,
                                        max: 1
                                     },      
                                     xaxis: {
                                        show: false
                                     }      
                                     });    
                                     plot.setData([ res ]);
                                     plot.draw();        
                                     document.getElementById('dati').innerHTML = res;
                        },
                        error:      function(error) {
                                    document.getElementById('datierr').innerHTML = "Errore";
                        }
                 });
                 setTimeout(getRandomData, 1000);
                }
        getRandomData();
    });

[Ced]

Why are you using html as the datatype for the ajax call?  I would expect to see json or jsonp, but not html.

The following looks wrong. Should the parameter be called data instead of res?

success: function(res) {
  res = {{ data }};

The call to $.plot() will set the data and draw the plot.  No need to call plot.setData() and lot.draw() immediately after.

[Frank]

Hello, thanks for the reply.
With "dataType: JSON" gives me error and not the chart shows, I do not understand why?
With "dataType: HTML", gives me ok and the graph shows but not in real time.

I modified the code in this way:

$(function() {
        function getRandomData() {
        var data;

        var plot;
                $.ajax({
                        method:     'GET',

                        dataType:   'JSON',
                        success:    function(data) {
                                    data = {{ data }};
                                    plot = $.plot("#placeholder", [ data ], {    
                                    series: {

                                        shadowSize: 0   // Drawing is faster without shadows
                                    },      
                                    yaxis: {
                                        min: -1,
                                        max: 1
                                     },      
                                     xaxis: {
                                        show: false
                                     }      
                                     });    
                               

                                     document.getElementById('dati').innerHTML = data;

                        },
                        error:      function(error) {
                                    document.getElementById('datierr').innerHTML = "Errore";
                        }
                 });
                 setTimeout(getRandomData, 1000);
                }
        getRandomData();
    });

____________________________________________________

[Frank]

THIS is code Python:

class MainHandler(tornado.web.RequestHandler):

    def get(self):
       
        # ....
        # .... I get the value of x and y
        # ....
             
        data = [ list(a) for a in zip(x, y)]
        self.render("html/frank.html",
                    title="GUI",
                    data = data
                    )    
   
       
application = tornado.web.Application([
        (r"/", MainHandler),
        (r"/static/(.*)", StaticFileHandler, {'path':'./static'})
        ],
    debug=True)


if __name__ == "__main__":
       
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

[Ced]

This is not how ajax is normally used.

What you're doing is basically just reloading the page and you don't need ajax to do that.
You could remove the ajax call and use window.location.reload() in setTimeout() and achieve the same result.

If you want to avoid reloading the page and use ajax correctly, you will need another handler in your python code that returns json, not html.
Then you specify the URL of that handler in the ajax call.  The result will be a page that you load once and for each timeout period, ajax loads only the data to plot and replots it.

[Frank]

Thanks for the tips . I Solved.

Il giorno martedì 3 marzo 2015 11:29:03 UTC+1, Frank ha scritto: