$(document).ready(function() { // Start 1-second timer to call RESTful endpoint setInterval(function() { $.ajax({ url: '/get_cpu_usage', dataType: 'json', success: function(json) { $('#cpu_usage').text(json.result + '% '); } }); }, 1000); // Initialize graph var $c = $('<div class="graph"/>').appendTo('#graphs'); var dur = 120; var past = Date.now() - dur * 1000; var options = { lines: { fill: true, lineWidth: 0, fillColor: {colors: [ { opacity: 0 }, { opacity: 1 } ] } }, grid: { borderWidth: 1, borderColor: '#ccc'}, xaxis: { mode: 'time', ticks: 5 }, legend: { labelBoxBorderColor: '#fff' }, colors: [ '#fec', '#396', '#e39', '9e2' ], hooks: { draw: [function(plot, canvas) { canvas.font = '13px sans-serif'; canvas.fillStyle = '#aaa'; canvas.fillText('Resource Usage', 35, 25); }] } }; var plot = $.plot($c, [], options); var updateGraph = function(counter) { var data = plot.getData(); var now = Date.now(); var oldest = now - dur * 1000; data[0] = { show: false, data: [[oldest, null], [now, null]] }; console.log(data); // Remove old points $.each(data, function(di, d) { while (d.data.length > 0 && d.data[0][0] < oldest) { d.data.shift(); } }); // Add new points var new_datapoint = [now, counter]; if (data[1]) { data[1].label = 'memory'; data[1].data.push(new_datapoint); } else { data[1] = [{ data: [new_datapoint] }]; } // Redraw the graph plot.setData(data); plot.setupGrid(); plot.draw(); }; // Create Websocket connection. For simplicity, no reconnect logic is here. var ws = new WebSocket('ws://' + location.host); ws.onmessage = function(ev) { updateGraph(ev.data); }; });