Graphing with jQuery

Suppose you have a number of web servers and you want to graph the number of HTTP connections over time to each server. You might solve this problem as follows:

  1. Write a simple PHP or CGI script which sends out (to a suitably authenticated client) the number of connections currently open.
  2. Write a Javascript application which fetches the information from each server and graphs it.

The first part is simple. The second is more challenging, and is implemented below, using only Javascript, HTML, and CSS. Data from the server is simply faked on the client side, so you can enter any server you like.

Once you've created a graph, you can resize it by pulling on any of its four borders. You can resize the bars by clicking on the bicoloured area below the hostname; hover over this area and you will see a percentage; find the percentage you want, then click to resize the bars.

For your convenience, here is a link to the Javascript code for the application. (If you want to use this code, you can consider it to be in the public domain.)

Suspend updating of graphs
Update interval (in seconds)