制作简单的实时图形

Question

I'm trying to fetch some data from the database and plot it into a real-time graph. I'm using this as an example: http://www.flotcharts.org/flot/examples/ajax/index.html

THE JSON is like this:

  "networks": {
         "eth0": {
             "rx_bytes": 5338,
             "rx_dropped": 0,
             "rx_errors": 0,
             "rx_packets": 36,
             "tx_bytes": 648,
             "tx_dropped": 0,
             "tx_errors": 0,
             "tx_packets": 8
         }
       }

But my code doesn't plot anything even tho the rx_bytes array has data inside. What am I missing here?

  var rx_bytes = [], tx_bytes = [], cpu = [], mem = []; //Options var options = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1 } }; //Initial Plot $.plot("#cpuStats", rx_bytes, options); $.plot("#memStats", mem, options); $.plot("#networkStats", cpu, options); function getStatistics() { $.ajax({ url: '/getStatistics', type: 'post', dataType: 'json', success: function (statistics) { console.log(statistics); var network = statistics.networks.eth0; rx_bytes.push(network.rx_bytes); console.log(rx_bytes); //Plot $.plot("#cpuStats", rx_bytes, options); //get data again getStatistics(); } }); } getStatistics(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> 

Answer 1

You need a X value for each new data point. In this case you probably want a timestamp. Also, don't call getStatistics() inside your success handler. It may lead to too much recursion. Instead use setTimeout()

success: function (statistics) {
    var network = statistics.networks.eth0;
    var now = new Date().getTime();
    rx_bytes.push([now, network.rx_bytes]);
    $.plot("#cpuStats", rx_bytes, options);
    setTimeout(getStatistics, 1000);
}

This updates once per second.

Here's a more robust jsFiddle example that also handles the initial period where data hasn't filled the X axis and also drops old data once that period expires.