Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
Here's a small addition to FlatPress. It's a blog activity graph that displays the number of blog posts per month over the past number of months. I got this idea when looking at the Cobertura home page and seeing their commit activity graph.

The height and width of the graph are configurable. By default I left it at 31px high, which allows for a maximum of 1 post per day. The width is based on the number of months, which by default is 12*3 i.e. 36 months or 3 years worth of data.

Here's the raw result followed by what it looks like on my blog itself.

blogstats.png   blogstats2.png

This is the code that makes it possible...
if (function_exists('system_init')) {
else {
$height = 31;
$numMonths = 12 * 3;
$buckets = array();
// create a bucket array initialised to 0
$curDate = strtotime(date('c'));
for ($i = 0; $i < $numMonths; $i++) {
$newdate = strtotime('-' . $i . ' month', $curDate);
$idx = date('Ym', $newdate);
$buckets[$idx] = 0;
$my_img = imagecreate($numMonths * 3 + 2, $height + 2);
$q = new FPDB_Query(array('start'=>0, 'count'=>-1, 'fullparse'=>true), null);
// fill the buckets
while($q->hasMore()) {
list($id, $e) = $q->getEntry();
$idx = date('Ym', $e['date']);
if (isset($buckets[$idx])) {
$background = imagecolorallocatealpha($my_img, 205, 255, 255, 127);
$line_colour = imagecolorallocate($my_img, 202, 202, 202);
$bar_colour = array();
for ($i = 0; $i < 31; $i++) {
$bar_colour[$i] = imagecolorallocatealpha($my_img, 0, 0, 0, 64 - ($i*2));
$keys = array_keys($buckets);
for ($i = 0; $i < $numMonths; $i++) {
$numPosts = $buckets[$keys[$i]];
if ($numPosts == 0) {
dot($my_img, $numMonths - $i, $height, $line_colour);
else {
for ($y = 0; $y < $numPosts; $y++) {
dot($my_img, $numMonths - $i, $height - $y, $bar_colour[$numPosts]);
$expire=60*60*24*1;// seconds, minutes, hours, days
header('Pragma: public');
header('Cache-Control: maxage='.$expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expire) . ' GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header("Content-type: image/png");
function dot($img, $x, $y, $clr) {
imagerectangle($img, $x*3, $y, $x*3 + 1, $y + 1, $clr);

That php file will generate the graph image, now to use it, simply make an img element in the html.
<img src="/blogstats.php" width="110" height="33" alt="Blog Activity" title="Blog Activity"/>



Skip down to comments...
Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...