I’ve been working on a small website stats project, mainly because webalizer et al don’t meet my needs. The actual implementation is mod_log_sql + a bunch of php/sql script to transform that to a star schema and then some php scripts for visualization.
A look at the Report
Anyhow lets get a look actual report so you can see whats going on (normally I would post a link but 500 hits on this report would kill my server the main query takes 5-10 second, which can be optomized but i haven’t bothered). The image below is the starting page of the report, it has a list of my top blog articles this month with the date they were actually posted (well showed up in my logs) and there total hits. There are also 4 blank graphs with a default placeholder graphic.
Now if you click on one of the links in the table the 4 graphs will be updated with drilldown information about that page. The Images are generated with a query and then some processing with Image_Graph so they take anywhere from half a second to 2 to update, they also update at different times. To make things more user friendly I added a loading div that covers each image while its loading. This is shown in the screenshot below.
After a second or two, the graphs finish loading and the loading screens disapear. This leaves you with a nicely updated report. Another nice effect (at least in firefox) is that the graphs stay cached as you click around between the different drilldown screens, but will update after a reload of the page. This makes for a snappy experience if you want to go back to something you’ve already seen.
Making it Work
The way it works is:
On page load a setup function finds all the graph images (there are all in a div with the id of graphHolder) loops over the images and creates a loading div by cloneing the template. The new clones are then added to the same container as the images and absolutely positioned so they cover them. Since the template has display:none you don’t see the loading divs yet.
And finally the Images have onload handlers hard coded on them that call loadingDone passing in this. Loading done then sets display back to none.
Something to play around with
So below is a real quick example so you can see if for yourself.
Code of Example:
Code of php script for making the color blocks with a nice delay.
<?php require_once 'Image/Color.php'; sleep(2); $im = imagecreatetruecolor(300,300); $color = Image_Color::namedColor2RGB($_GET['color']); $bg = imagecolorallocate($im,$color,$color,$color); imagefill($im,0,0,$bg); header('Content-type: image/png'); imagepng($im); ?>
Wrapping it up