{"id":205,"date":"2006-01-12T11:05:57","date_gmt":"2006-01-12T17:05:57","guid":{"rendered":"http:\/\/blog.codedread.com\/?p=205"},"modified":"2006-01-12T11:05:57","modified_gmt":"2006-01-12T17:05:57","slug":"pretty-web-statistics-in-svg","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2006\/01\/12\/pretty-web-statistics-in-svg\/","title":{"rendered":"Pretty Web Statistics in SVG"},"content":{"rendered":"<p>I <a href=\"http:\/\/blog.codedread.com\/archives\/2006\/01\/05\/web-stats-a-la-svg\/\">posted a week ago<\/a> about how there are some blogs\/sites out there that roll their own web statistics and display them <span class=\"definition\" title=\"Scalable Vector Graphics\">SVG<\/span>.  After reading <a href=\"http:\/\/ecmanaut.blogspot.com\/2006\/01\/prediction-about-svg-canvas.html\">this challenge<\/a> on the weekend, I decided to work on my own, roughly mimicking <a href=\"http:\/\/www.rad-e8.com\/log\/archives\/2005\/09\/12\/02.50\/\">these designs<\/a>.  <!--more--><\/p>\n<p>Now while the results aren't as pretty as <a href=\"http:\/\/www.rad-e8.com\/log\/i\/0912diag_ua.jpg\">the static rasters<\/a>, I did provide some minimal interactivity\/dynamism that folks like <a href=\"http:\/\/weblog.infoworld.com\/udell\/2005\/12\/20.html#a1357\" title=\"Jon Udell's Blog at InfoWorld\">Jon Udell<\/a> might appreciate.<\/p>\n<div style=\"border-style:solid; border-color: black; border-width: 1px; float:right; margin:10px;\">\n<a href=\"http:\/\/www.codedread.com\/displayWebStats.php\" title=\"Web Statistics in SVG\"><br \/>\n<img decoding=\"async\" width=\"300\" src=\"http:\/\/www.codedread.com\/images\/webstats.png\" alt=\"Raster image of my SVG web statistics\"\/><br \/>\n<\/a>\n<\/div>\n<p>Without further ado, my live web statistics SVG image is located <strong><a href=\"http:\/\/www.codedread.com\/displayWebStats.php\">HERE<\/a><\/strong>.  It is constructed using a variety of techniques:<\/p>\n<ul>\n<li>Include a small <a href=\"http:\/\/www.php.net\/\">PHP<\/a> file to record each document request on my site and blog.  Each result is written into a <span class=\"definition\" title=\"eXtensible Markup Language\">XML<\/span> file.<\/li>\n<li>I have another server-side PHP script to crunch each day's worth of hits into summarized daily statistics XML file.<\/li>\n<li>I have yet another server-side PHP script that reads in all daily statistics XML files and crunches them into the SVG you see.<\/li>\n<li>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<\/li>\n<\/ul>\n<p>Go ahead and play with it.  It seems to work for me in <a href=\"http:\/\/www.mozilla.com\/firefox\/\">Firefox 1.5<\/a> and Internet Explorer with <a href=\"http:\/\/www.adobe.com\/svg\/main.html\">Adobe SVG Viewer<\/a>.  It also displays in <a href=\"http:\/\/www.opera.com\/\">Opera<\/a> 9 <span class=\"definition\" title=\"Technical Preview\">TP<\/span>1 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?<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p><a href=\"http:\/\/www.codedread.com\/displayWebStats.php\" title=\"Pretty Web Statistics in SVG\">Click here to see my SVG web statistics in a full page<\/a>.<\/p>\n<p>NOTE:  One challenge was to properly embed the SVG image into this blog entry with fallback content.  For IE+ASV, I can serve an <em>&#60;embed&#62;<\/em> tag via a <em>&#60;script&#62;<\/em> with the fallback being written by a <em>&#60;noscript&#62;<\/em>.  For all other browsers, I can serve an <em>&#60;object&#62;<\/em> 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.<\/p>\n<p><script language=\"JavaScript\" src=\"http:\/\/www.codedread.com\/yahooads.js\"><\/script><br \/>\n<script language=\"JavaScript\" src=\"http:\/\/ypn-js.overture.com\/partner\/js\/ypn.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,42,25,46,11,28],"tags":[],"class_list":["post-205","post","type-post","status-publish","format-standard","hentry","category-javascript","category-php","category-software","category-svg","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}