Some of my earliest work with SVG involved graphing data summarized from log files. In SVG Essentials, there was an example of a Weather Data page that would be updated by regenerating the page with XSLT. This approach seemed interesting, but did not really grab my attention.

Later, I was contracted to produce a dynamic display using SVG and the Batik Java library. In that system, SVG was only used to set up the base graphics. All of the interaction was performed in Java code.

After that project was over I began experimenting with dynamic controls that are defined in SVG and ECMAscript. Unfortunately, I'm still not very good at graphic design. This means the instruments are a little plain. But I have added a reasonable amount of functionality.

Demo

Instruments SVG
The demo code updates its data randomly without using an outside source of data. This demo updates the instruments directly without using the data feed protocol that I was working on.
Instruments Script
This ECMAscript file defines most of the instrument classes.
StripChart
This ECMAscript file defines the StripChart class.
January 29, 2006

I've finally had the time to clean up this code a bit to work with FireFox as well as the Adobe plugin and Squiggle. There are a few issues with the FireFox implementation that I haven't been able to resolve yet. But, the code is mostly consistent across the three viewers I've targeted. The FireFox inconsistencies I'm fighting at the moment are:

  • the right justified labels on the strip charts are not lined up
October 14, 2008

As part of an effort to compare the speed of different JavaScript implementations, I've added the ability to change the speed at which the instrument simulation runs. If you append the parameter interval=n as a parameter to the SVG file, it changes the refresh wait time for the animation. The parameter must be a positive integer. It represents the number of milliseconds between new data points. The default is 50.

For example, Instruments.svg?interval=10 should run close to 5 times faster than the default, and Instruments.svg?interval=1000 would have one update every second.