Real live plotting in your browser

Here's how to generate nice and pretty live plots in your browser. Even turns out to not be too much of a hassle (by relying on the correct library that is). First you need to grab the following javascript files from here.

And reference the relevant plotting support libraries in the html code (as below):

<script type="text/javascript" language="javascript" src="js/jquery-1.2.3.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.flot.js">
</script>

Then set up the location you want the plot to appear on the page via a div section:

<span style="padding:0px;"><div id="plotter" align="left">
</div></span>

Now the additional javascript hook. The code below just sets up the plotting options along with array (_data) that contains the values being plotted. This function can be called on each update. It pushes the new value into the array and updates the plot being displayed. A maximum of 20 points will be displayed at any one time.

var _data;
function plot_me(x,y) {
  if (_data.length > 20) {
    _data.shift();
  }
  _data.push([x,y]);
  var data = [{label:'PING response time',data:_data}];
    var options = {
    legend: {
      show: true,
      margin: 10,
      backgroundOpacity: 0.5
    },
    points: {
      show: true,
      radius: 4
    },
    lines: {
      show: true
    },
    grid: { hoverable: true, clickable: true , color: "#999"} 
  };
  var plotarea = $("#plotter");
  $.plot( plotarea , data, options );
};

And here's what it looks like below (along with the actual ping output in a different portion of the display: