{"id":923,"date":"2011-02-15T22:49:34","date_gmt":"2011-02-15T20:49:34","guid":{"rendered":"http:\/\/sickel.net\/blogg\/?p=923"},"modified":"2013-04-13T22:25:59","modified_gmt":"2013-04-13T20:25:59","slug":"making-stripcharts-using-svg-and-javascript","status":"publish","type":"post","link":"https:\/\/sickel.net\/blogg\/?p=923","title":{"rendered":"Making stripcharts using svg and javascript"},"content":{"rendered":"

April 2013: I have made a new project<\/a> based on this, although for static plotting.<\/p>\n

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.<\/p>\n

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

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<\/a><\/p>\n

Most of the files needed for the front end are available in Svg_stripchart110217<\/a>. 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.<\/p>\n

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

in addition to my files, two external libraries are needed:<\/p>\n

prototype<\/a> (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)<\/p>\n

svgweb<\/a> – 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\/.<\/p>\n

Stay tuned here to pick up updates.<\/p>\n

2011 02 17:<\/p>\n