HOWTO: Create a Graphical Counter with Metrics API

In my last HOWTO I showed how you can display your Metrics visit count in your WordPress or Drupal blog. While it does show the values off I thought I would show how you can make it a little more old school by displaying a graphical counter. As well as displaying your visit count it serves as a nice little advert for our Metrics service!

All the hard work has already been done in the last post, providing your PHP install includes support for GD you have everything you need and it is really very easy.

What we need to do is change the text that is output in the previous examples code to instead output an IMG tag referencing a new PHP script. This PHP script will return the generated image showing a Performancing logo and our visit count.

So last time we had the following:


print "

";


We need to replace this with:


print "";


As you can see it outputs an IMG tag that references our new PHP, supplying the text we want to overlay as a URL parameter. Here is the code for graphic.php which you need to put in your web root along with your copy of background.png

The first line tells your web browser that you are outputting a PNG image. This is important as otherwise the browser would not be able to interpret the binary data we are sending. This is also why you can not output the image as part of the plugin, you can not mix HTML and binary data in a single output.

Next we accept the text string from the querystring parameter and create a new image in memory based on our background image.

Drawing basic text over the image is as simple as choosing an RGB colour and supplying the image, font size, x and y coordinates, text and colour to the GD “imagestring” function.

Finally we send the new modified image to the users browser and destroy our image from memory to clean up after ourselves.

Told you it was easy, eh? Here is what the final thing looks like: