Making stripcharts using svg and javascript

April 2013: I have made a new project based on this, although for static plotting.

I needed to present data in a webapplication using strip chart. From earlier experiences on data presentation, I knew that making bit mapped graphics to be updated when new data were to be presented, put a fairly high load on the server, as everything was to be reprocessed each time, at the other end, a java applet seemed to be overkill for this application. So to the rescue, svg and javascript.

The original inspiration was from A List Apart that showed the possibility of manipulating a svg graphics using javascript. Googling a bit, I came across mblogics and G Wade Johnsson’s anomaly.org. Although both those were too complicated for what I needed, I was able to steal quite a few ideas from those two implementations.

Presently I am able to run multiple stripcharts in one web page, fetching data from a server and updating the charts and some parts of the web page:

Most of the files needed for the front end are available in Svg_stripchart110217. The backend’s logic cannot be used without the database, but in the zip file there is a file ‘ajaxserver-23.json’ which is an example of a response from the server, just make a normal web server application in php or whatever suits your needs that rather than html for presentation in a web browser returns a selection from your data set as a json-file.

The other files are
stripchart.php.htm – a ‘driver’ html file that loads the neccesary parts into a browser
stripchart.svg – a svg template to start the plot
chart.js – javascript defining the strip chart object
stripchart.js – sets up and uses the chart.js objects
msi_smarty.css – some styling – a lot of it is unused here as this file is used for a complete application

in addition to my files, two external libraries are needed:

prototype (I am still using 1.6, 1.7 is just released, I cannot see any reason that should cause any problems, but I have still not tested it)

svgweb – a compatibility layer to extend svg support to more browsers. It is critical to be able to run the strip charts on internet explorer, If you know you are using svg-supporting browsers (most others) just delete the reference to svg.js in the .html-file. On my server, I have the external libraries installed in /lib/.

Stay tuned here to pick up updates.

2011 02 17:

• Some cleaning up and commenting of the code
• Possible to select scale and parameter to plot per strip chart
• Red and yellow signaling too high or too low measurements

TODO:

• Dynamic handling of parameters. (done, but not yet uploaded)
• Using the parent object to update the html when a mark is set, rather than waiting for the pe to notice it

Another use of many of the same ideas is in Reading temperature data out of postgresql.