I posted a week ago about how there are some blogs/sites out there that roll their own web statistics and display them SVG. After reading this challenge on the weekend, I decided to work on my own, roughly mimicking these designs.
Now while the results aren't as pretty as the static rasters, I did provide some minimal interactivity/dynamism that folks like Jon Udell might appreciate.
Without further ado, my live web statistics SVG image is located HERE. It is constructed using a variety of techniques:
- Include a small PHP file to record each document request on my site and blog. Each result is written into a XML file.
- I have another server-side PHP script to crunch each day's worth of hits into summarized daily statistics XML file.
- I have yet another server-side PHP script that reads in all daily statistics XML files and crunches them into the SVG you see.
- The interactivity is provided via SVG and JavaScript. Basically mouse and keyboard listener events handle moving the "day cursor" around the time-based graph to affect the pie chart
Go ahead and play with it. It seems to work for me in Firefox 1.5 and Internet Explorer with Adobe SVG Viewer. It also displays in Opera 9 TP1 but the dynamic/interactivity part does not work in that browser (hoping to see it fixed in the next TP). Can someone with a nightly build of Safari tell me whether anything shows up?
As with JavaScript, creating SVG using PHP's XMLDOM library is tedious at best. If I knew XSLT I would have given that a shot, but I don't (yet) - so I didn't.
Nonetheless, I'm quite happy with the result because now that it's written it requires very little manual action on my part to keep it up-to-date. I could hook up calls to my server-side generation scripts to a cron-job if I had a server-machine under my control (mine currently has a fried motherboard), but I actually prefer to ensure that the XML is being properly generated, so for now I'll just invoke the server-side crunching scripts every few days to keep the SVG fresh.
Click here to see my SVG web statistics in a full page.
NOTE: One challenge was to properly embed the SVG image into this blog entry with fallback content. For IE+ASV, I can serve an <embed> tag via a <script> with the fallback being written by a <noscript>. For all other browsers, I can serve an <object> tag to Firefox and Opera the way it should be. However, it seems that WordPress mangles things to a degree such that it will not load inside WordPress. I eventually gave up on this, though I have successfully used this technique in my own HTML pages.
AWESOME!!!!!!
Great …just GREAT !!!!
I’ve got a lot af “work” (funny ones), to hope one day do some same thinks ..
But i’ll be, thanks site like yours !!
Thanks
++
Sorry man, I got a blank page in latest nightly build of Safari. The nightly Safari builds are somewhat buggy, just so you know. Looks great in Firefox 1.5 on Mac though. You can e-mail me if you would like me to check again.
lol – Why you didn’t just do it in the open swf format using mtasc I do not know!
Where do you think SVG is going? How is the adoption rate? I think the concept is great, but it seems underutilized.
Your header is wicked cool. It took me a second to realize the snow is actually accumulating. The SVG graphs look awesome, too. You should consider packaging the system so others can use it. Awesome job!
Works with the stock Safari and the Adobe plug-in,
nice work.
Heh, working on something similar atm too. Thou with alot more filtering/analysis.
As for using DOM for SVG generation, whilst thats is probably the most flexible, I’m currently using PHP5s XmlWriter. Also I’m inlining the SVG, as it saves on requests/db queries. IE needs few hacks to display, but FF1.5/Opera are fine.
Thanks to everyone for the comments!
@justin: I have never programmed in swf and had never heard of mtasc until you mentioned it. I’m quite interested in SVG right now and happen to be pretty familiar with it, JavaScript and the DOM.
@bbscan: I agree, the concept is great. Currently I think SVG has better adoption in the mobile and Linux desktop space, but with almost all browser developers working on SVG support, and other proprietary vector graphic formats being worked on (Adobe’s SWF/PDF and Microsoft’s XAML), and hardware being built to natively support vector graphics, I think it’s fair to say that vector graphics as a technology is going to explode in a year or so (once everyone gets to see the pretty eye candy in Windows Vista).
As for the SVG format itself, well it’s only relatively recently that major desktop browsers like Firefox, Opera and Safari have started implementing native support. Until that happened, you had to ensure the Adobe plugin was installed and developers tend to shy away from that because it leaves you at the mercy of the plugin developer (what if Adobe suddenly dropped their support of SVG?). So this period of time (aka “now”) is really an opportunity for developers to see what the technology can do. If it can capture the hearts of the indie web developers out there, I think there is no stopping it. Of course there is one major (and I do mean MAJOR) player that will likely not support SVG in the short term: Microsoft. But note: Internet Explorer 8 will surely have some ability to display interactive vector graphics natively (a form of XAML for the web) so if IE doesn’t actually support SVG as a spec, I’m sure someone out there will write a clever library to turn SVG into XAML on the fly. I also believe that Adobe will continue to add some token SVG support into its products (including their Flash player), though in all likelihood they will focus on the SWF format and corresponding tools. Whew, did I really just spew all my foolish opinions out there?
@Ren: I learned only recently that ASV could do inline SVG with some hacks but I haven’t had time to investigate it. If you have some links, please share. Inline SVG is a worthy goal, primarily because SVG 1.1 does not support text wrapping (SVG 1.2 does though). Anyway, at present I’m focusing on some standalone SVG applications (i.e. they don’t need HTML).
The ASV 6.0 beta installs C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Implementation White Paper.html which documents the hack. More info on http://www.schepers.cc/inlinesvg.html.
One limitation it seems is that <a> do not work. I believe this is because of the xlink namespace not being handled, which is rather annoying.
Seems the object element can be anywhere but before the svg, and the processing instruction has to be after it. The only other thing to get it IE working is serve as text/html rather than the correct application/xhtml+xml. Using the correct doctype seems ok too.
And…
AJAX also works, so can load in xhtml+svg fragments aslong as the processing instruction is in the fragment, I guess this is to associate the new svg namespace declaration with the behaviour.
“I think it’s fair to say that vector graphics as a technology is going to explode in a year or so (once everyone gets to see the pretty eye candy in Windows Vista)”
100% consensus!
We might see Flash+AJAX inundating (and polluting?) the Web.
I have my doubts we’ll ever see a decent dynamic SVG (that is usually SVG+a lot of scripting and not much SMIL) to VML/XAML/Whatever conversion on the fly. And who want’s to accept the extravagance of keeping 2 dom implementations of the graphics in the browser memory at the same time alive?
Renewed: watch intently Emil’s Chronicle’s progress
( http://me.eae.net/archive/2006/01/08/charts/ 🙂
Impressive! That looks really neat.
Not a bad start, and what it may lack in aesthetics it at least in part makes up for in interactivity. Have you not played anything with SVG’s filters yet, or should I perhaps rather ask if you have played with them and deemed present browser support for them shaky at best?
If tedium is what you are trying to avoid, XSLT will not come as a great saviour in that department. I would recommend taking a peek at E4X (ecmascript for xml), though, which is a coming attraction that makes xml creation in javascript almost blissful. (Or trying out Ruby, if you are going to deploy it server side.)
SVG Filters: Yeah, I could put in some drop shadows and whatnot, but it would “only” show up in ASV at the moment. To me, it’s not worth it at present so I haven’t investigated them too far. I’m more of a programmer than an artist anyway. And it’s my opinion you can get by with “cheating” and using gradients and opacity for some of the effects.
XSLT: What I really meant was a more maintainable solution rather than a mess of PHP code. At least this is what I’ve heard about XSLT from colleagues. E4X looks good but browser support is spotty.
Very nice! I have a request to make it even nicer: can you allow dragging along the timeline instead of just clicking? (I also think it would be better if the pie chart started at 12 o’clock rather than 9 o’clock.)
Thanks for the comments, Jonathan. Your suggestions are in “the queue”… 😉
I played a bit (okay, rather a lot, actually) with your code to get it a little closer to the original, and to move most of the styling attributes to a chunk of CSS; have a look at the updated version. It shouldn’t be hard to migrate this back to your own codebase, I think, should you want to.
The Mozilla development front doesn’t have filters yet, nor text-shadow, nor does the latest 1.5 handle textPath elements properly, so I believe this is about as close as one get at the moment. Well, apart from the colors, which could be better; I picked the wrong set, so they look a little washed out.
Johan,
Thanks I saw your comment in the moderation queue only after I responded at your blog. One thing you should be aware: The Mozilla trunk build currently has patches for textPath and some filters, so things are progressing, we’ll see it in the next major version of Firefox (most likely 3.0).
Regards,
Jeff
http://www.lysator.liu.se/~jhs/gfx/svg/codedread.com/graph.svg looks awesome, by the way! Thanks!
Very impressive. Maybe I will dive into SVG technologies as well..
It’s easy enough to find browser stats for Flash and JavaScript.
Where are the SVG stats?
Can’t be that uncommon since wikipedia uses them extensively.
To find a perfect web analytics tool just login to GoStats.com as it offers data updated every single minute .You can analyze the visitors’ data and view it as an 3D or stacked chart for better representation.