Creating a Chart on Your WordPress Archives Page
Posted
One part of WordPress that I've never been overly impressed with is archives. This isn't so much a WordPress problem as it an archive problem, archives are inherently boring. As a result of this revelation I've spent some time thinking up new ways to present the information. My latest idea was adding charts to represent some of the data from the archives. This is a fairly simple function to output the info and style it as a chart.
If you want to use a flash or javascript chart, scroll to the bottom for a different function.
The Chart
After looking for a lightweight flash or javascript charting solution, I decided for an archives page just plain CSS charts would be the way to go at first. So the output we are going for is something like this:
The Code
The code in the function is essentially a Frankenstein of the wp_get_archives function from the WordPress core, and this tutorial on creating vertical bar graphs. It pulls the year, month and number of posts out of the database, then formats them into a list suitable for styling into a CSS chart.
Styling the Chart with CSS
Styling the chart is made easier by the definition list.
How to use the Graph
The function works just like any other template tag. Add the above function to your functions.php file and the CSS to style.css. Then call the chart in your template like so: <?php ch_archive_graph(); ?>
The template tag also includes a few options to make customizing it easier:
- '
graphYear' this is the year of the archive you want to display - '
xIncrement' this is the width of the bars in the chart - '
graphHeight' this is the height in pixels of the chart - '
limit' this is number of posts you want to display
Example:
<?php ch_archive_graph('graphYear=2007&xIncrement=40&graphHeight=400&limit=6'); ?>
Bonus: For Javascript Charts
If you need the output for a javascript based chart, you only need to alter things a bit to get a javascript array or months and number of posts, then plug them into whatever charting you want to use.
Let me know if you use it or improve it!