Dynamic SVG

Further to my earlier post about SVG I have now managed to get a dynamic SVG image happening. My eventual plan is to have a psudo real-time graph of network load displayed in a pretty dial format.

To check it out here. Be warned you need a SVG enabled browser such as Firefox or IE with the Adobe SVG plugin installed.

The image is built up of a few basic items (the circle and the legend up the top left). All the rest of the image is created dynamically using javascript. I am now almost at the stage of getting AJAX working with this by having the page fetch network load figures from another script (written in PHP) and using those figures to update the two needles on the dial.

So far I'm impressed about how its come together. I wouldn't say it's easy but it's certainly been easier the more I learn about both SVG and javascript.

Probably the only issue that I have come up against so far is that javascript won't allow the AJAX code to pull data from a different domain that the one the original page was pulled from. This means I need an extra step to pull data from my SNMP gateway (generating the network load figures) through to the website that the SVG graph is hosted on. Once I have that figured I will have a handy almost real-time graph that shows the network bandwidth for any port I choose to point it it.

Since there is no built-in way to measure the bandwidth usage on a Cisco device, I need to take two measurements of the total octets so far and subtract them giving an octet rate which I can then run through a formula to give utilization.

So far I like the combination of technology here. I am using AJAX with SVG to create a dynamic image of network load. Later I will be using SOAP to take the network load information from the SNMP gateway through to the website.

Yet through all this I have achieved my aim of pulling together information from multiple sources into a single simple interface.

More news next time!