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 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:Screenshot 17.02.2011

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


  • 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.

This entry was posted in svg. Bookmark the permalink.

1 Response to Making stripcharts using svg and javascript

  1. Pingback: svg and html | Mortens meninger

Comments are closed.