Simple Graph WordPress Plugin

UPDATE! (2007-12-19) New version 1.0.5 is now available. Download it from WordPress Extend! See latest changes here. This version includes rudimentary support for Google Chart API rendering, making the widget more pretty, with some drawbacks however. Please read details here.

Is the plugin not working? Please write a comment below or send me an email (firstname @ firstname dot fi)! If you could include your blog’s address and leave the plugin activated for a while, it’d help me a lot in finding the issue. Kthx. 🙂

Plugin status update: I will continue maintaining the plugin, sporadically at least. That means, when I feel like it. Bug fixes take priority though, I’ll usually get to those as soon as I get bug reports.

chart.png
Widget screenshot
(Google Chart API enabled)

This page documents the simple graph plugin for the great WordPress blogging platform.

NB. Take a sneakpeek at the next version here.

Got problems? Take a look at the troubleshooting section further down this page!

Description

The plugin displays a small graph or chart of single set of data, which is essentially any values associated with dates. On my homepage’s sidebar I use the graph for weight control (hoping that it won’t climb to three digits), but it could be used for displaying many other kinds of data, e.g. a child’s height, amount of waterfall in your backyard, etc. It is not necessary to mark a value every day, but it is possible.

Download

The plugin is now hosted on WordPress Extend and you can download it from there. If you don’t like zip archives, you can also access the subversion repository. 🙂

Compatibility / Requirements

Works in WordPress 2.0.1 or newer because earlier versions don’t implement all the hooks required. Tested up to WordPress 2.3.1.

Graph generation (except Google Chart API graphs) also requires that you have GD library installed and enabled in your PHP installation. Please refer to the Image section in PHP documentation for more information.

If GD2 library is available, graphs will be true color PNG images. However, depending on the capabilities of your installed GD library, graph will fall back to 8-bit palette images, and GIF and JPEG formats as necessary. (GIF if PNG is not available, and JPEG if GIF is not available.)

Google Chart API support

As of version 1.0.5, the plugin supports Google Chart API. It makes the widget graph a lot more pretty than my original renderer ever could. However, there are some drawbacks, which are listed below. Also note that the implementation is actually a quick hack, and there might be additional quirks that I’m not yet aware of. Thus, treat the feature as experimental. It is disabled by default and can be enabled in widget control pane.

  1. Google Chart API Usage Policy states that “Use of the Google Chart API is subject to a query limit of 50,000 queries per user per day. If you go over this 24-hour limit, the Chart API may stop working for you temporarily. If you continue to exceed this limit, your access to the Chart API may be blocked.” I assume that the limit is per site and accounted for via HTTP referrer headers. Most blogs won’t be affected by this, but if yours has high traffic, please do not enable Google Chart API rendering on your site until I implement cache for this thing.
  2. Number of values in a graph is limited due to URL length limitations. The graph image is loaded each time from Google’s servers and the values are sent there as HTTP GET parameters in the URL. As the protocol limits the length of this string, there’s a limit either to the level of accuracy or the length of the graph. As of version 1.0.5, the level of accuracy is not limited too much (values are used to first decimal precision, ie. a value is of the form 99.9), which consequently limits the amount of values. To counter this, the current implementation forces the use of weekly averages instead of daily values. For very long sets of data, this will still produce an empty or broken graph. In such case, try disabling the trend graph. If that doesn’t help, disable Google Chart API rendering and wait for future updates, which will introduce new ways to avert this, such as option to limit the accuracy.
  3. Not all graph features work because I haven’t implemented them for Google Chart API yet. These include foreground and background colors, for instance. Data line and trend line colors are used properly though. There’s a drawback to customizing graph colors however, as they take space from actual data in the URL, reducing the number of values that can be included. Nevertheless, they’ll be included in the future versions, probably with an option to leave them out.

Aside from graphs being now more pretty, there’s another benefit: GD library is not required any more if you use only Google Chart API rendering.

Installation

First of all, backup your WordPress files and database! Installation of this plugin shouldn’t do any harm, but since I’ve done absolutely no testing besides actively using it myself, I cannot guarantee it’s entirely bug free. Also, this is my first ever WP plugin, which I created both for fun and to learn the art of making plugins. So, this plugin is provided AS IS, and installation and usage of this plugin is entirely at your own risk. I will not assume any responsibility for any possible damages. (Although it still isn’t supposed to cause any damages.)

Extract the plugin archive in your WordPress plugins folder (wp-content/plugins/) and then activate the plugin through your WordPress administration. The activation sets up initial configuration options and creates the database table for the plugin data.

Please make sure that you upload/extract the simple-graph folder (or pjm_graph if you’re using 0.9.6 or older version) entirely in your plugin folder, and not just the contents of it! Your folder structure should look like this:

  • wp-content/plugins/
    • simple-graph/
      • pjm_graph.php
      • grapher/
        • graph.php
        • gchart.php (since version 1.0.5)

Finally, insert a code similar to the one below to your WordPress theme, for example in the sidebar.php file. The essential part is calling the pjm_graph() function. Note! If your theme is widget enabled, you don’t have to edit any files, just use the widget instead!

[html]

  • The Project


    About this graph plugin…


  • [/html]

    Installation is now complete!

    Advanced parameters

    You can override width and height of the graph with function parameters. See the function declaration below.

    void pjm_graph($WIDTH, $HEIGHT, $TREND, $TARGET, $YTD, $MTD, $WKLY);

    Zero (0) values for WIDTH and HEIGHT preserve the default width and height that are specified in the admin panel. Any other values override the default.

    TREND, TARGET, YTD, MTD and WKLY parameters expect a boolean value, which is either TRUE or FALSE. By default they’re all FALSE. If TREND is TRUE, gliding trend graph appears. If YTD is TRUE, only the values from last year are used in the graph. If MTD is TRUE, only the values from last month are used. (If YTD is TRUE, value of MTD is irrelevant.) If WKLY is TRUE, rough weekly average values will be calculated instead of daily values where possible. TARGET is not fully implemented yet and thus its value has no meaning.

    Trend graph

    Trend is exponential sliding average of the actual data. Its value is calculated like this: $new_trend = round( $new_value - $old_trend ) / 10 + $old_trend; like explained by Painoarvokas in his blog comments.

    Usage

    You can change the appearance of the graph in the WordPress administration. Click on Plugins menu and then on Simple Graph Configuration submenu.

    To add and delete the datapoints in the graph, go to Manage menu and then to Simple Graph submenu.

    License

    GNU General Public License. Also, I’d be happy to hear if someone uses this plugin and also any comments are welcome. I also welcome all links to this page from your blog if you’re using the plugin. 🙂 I collect links to sites that use the plugin, the list is here. If your site is missing, please let me know.

    To do

    • More configuration options, such as separate background colours for inside and outside of the graph.
    • Make the graph clickable for a larger version. Add configuration options for the larger version (size, etc.).
    • Add configuration option to limit the amount of data that is displayed, for example “show only X most recent days,” where zero value for X would mean all data. (Now all data is displayed.) Of course, separate option for the larger graph.
    • Add caption for the graph and for the Y-axis.

    Known issues

    • The plugin is everything but robust. Bad input won’t be rejected, error situations are not handled properly, etc. I’m not sure if these will be fixed for this plugin.
    • At least two values have to be inserted in the database, or the graph generation will fail. The values may be bogus and deleted later when enough real data exists. Graph now displays an error message about this, as of v0.9.2.

    Troubleshooting

    • If nothing is displayed where the graph is supposed to be, make sure that you enter the proper PHP code in a theme file, such as sidebar.php. PHP code doesn’t generally work when entered in blog post or page, if another plugin making this possible isn’t installed as well.
    • If a broken image is displayed, or just text “Graph”, in the place of the graph, make sure you uploaded the entire simple-graph folder in your plugin directory and not just the contents of that folder.
    • If text similar to “Fatal error: Call to undefined function: pjm_graph() in..” is shown instead of the graph, the simple graph plugin isn’t activated in your wordpress plugins screen. If you want to occasionally deactivate the plugin, you can use function_exists(‘pjm_graph’) code to alleviate this problem, as shown in the code example on this page.
    • If everything else seems to be in order, and you still get a broken image, please note that you need to have at least two values inserted in the database! With zero or only one data point the graph will fail. This is a bug. Hat tip to Dominic for pointing this out. New in v0.9.2: This now produces an error message.
    • When the plugin is activated, a database table is created. If you get errors at this point or the plugin just does not work, check if your WordPress can create database tables, i.e. if CREATE SQL clause is enabled for the database account. If you are unable to allow CREATE clauses for your WordPress, you can create the database table manually. Check pjm_graph.php file for table details… Hat tip to Dominic for this one too.

    43 thoughts on “Simple Graph WordPress Plugin”

    1. Hi Lautreamont! I’ll take the pie chart under consideration. However, in the next version I’m going to stick with line and bar charts.

    2. Pingback: orioa
    3. Simone,

      Unfortunately no. This is one of the issues that will be (or actually already is) addressed in the next generation graph plugin. See PasiChart page about that.

    4. Thanks for this. I wanted a graph for my weight too so this saved me some time coding it. Ran into 2 problems installing:

      1. I reduced my wordpress database user’s permissions (set in wp-config.php) for improved security and it no longer had CREATE SQL perms. So when I tried activating the plugin it threw an error. I flicked the wp-config user quickly to an admin to create the table, then flicked back again to sort this. Might be something other users come across so you might want to mention it in your install docs.

      2. This one’s a biggy. You have to have TWO sets of data added or the graph doesn’t generate! This isn’t mentioned in your install docs either so I almost gave up on the plugin (glad I didn’t) when the graph wasn’t generating (broken image). I investigated and discovered a “division by zero” error on line 49 of graph.php. I tweaked the script pjm_graph.php to not generate the graph if there’s not enough data (instead printing out a “waiting for data” message or similar).

      Hope some of that helps you make it better. You’ve probably already fixed these issues in the newer version (I’ll take a look when it’s ready). Good work though and thanks very much! Hello to Finland from Australia! 🙂

    5. Hi Dominic,

      Thanks for the input! 🙂 Indeed, that plugin isn’t very robust at all, there’s hardly any input validation for example. Accidentally typing in non-numeric values will probably add zero to db, etc., instead of rejecting the value.

      The new version is being written from the scratch, so I don’t have to fix the mistakes in the first version. 😀 For instance, the graph class could work standalone in other PHP apps as well, and I’m probably release it separately too. So far I’ve concentrated on that class and just starting on the actual WP plugin.

      Finnish visitors already know this, so note to you foreigners as well: our son was born just two weeks ago, and lot of my time is automagically reserved for him and my wife… Programming progress isn’t very fast…

    6. All sounds good. I’ll bare in mind the validation omissions although it’s only me updating my blog so won’t be a concern in my case.

      Congrats with the birth! I understand how life’s other commitments tend to slow down these pet projects. I’ll look out for the new graph class in the future though.

    7. I don’t know what i’m doing wrong but i keep getting a broken img and it’s only saying Graph…

      I’ve checked the troubleshooters… I have more then 2 data pionts and the following data in my sidebar:

      Kwaliteit

      Can someone assist me. I would really like to use this plug.

      Greetings

    8. I installed 0.92 on my site, but the admin panel is still showing 0.91 – it seems to be working OK though!

    9. Tom,
      Thanks for pointing that out, seems that I forgot to update that number. 🙂 Will fix that later. Good luck with your weight project as well. 🙂

    10. No dice …. you can see at my site. The graph doesn’t show up. The table is created and there are two data points. It’s not getting the GET variables from the URL (it ends at the ?). Any thoughts?

    11. Hi Misty,

      The issue is not with the GET variables, the question mark is appended to the URI always, although it shouldn’t be. If you don’t pass the pjm_graph function any parameters, the image URI won’t contain any and the default values are used.

      I’m assuming you downloaded the latest version (0.9.3 or at least 0.9.2), so could you go into your wordpress administration, Plugins menu, and Simple Graph Configuration submenu. What does the compatibility check say? I’d suspect that your server doesn’t support GD2 library, and that check will say if it is so. However, if the check says it’s okay, then we’ll have to investigate further.

    12. Hi Pasi,

      Trying to use the graphing plug-in but it’s not showing a graph. You’ll see on my webpage that on the sidebar below the calendar it says “graph here” and that’s where the php code is. i have 30 data points, but nothing’s showing. Compat check comes back with:

      Compatibility check:
      PHP Version: 4.4.1
      GD Loaded: Yes
      GD Version: N/A
      Image format: True color PNG

      Do you know what’s wrong?

    13. Okay, I discovered the problem. In that plain text example the ’ should be ‘ instead.

    14. BGH Quiz, thanks for pointing that out. The apostrophes and quotation marks had been screwed up at some point, most likely by WordPress formatting feature. They’re now fixed.

    15. Hi,

      The plugin looks very promising except that I try to avoid to hack php (sidebar.php) in favor of widgets. Any plans on providing a widgetized version of the plugin?

    16. Jimisola, I’ve looked into widgetizing it before, but never got myself to do it. It’s not a biggie so now that it is requested, I just might end up doing it. I’ll let you know. 🙂

    17. How do I add a larger version of the graph to a page? I’d like to be able to click on the graph in the sidebar and have it open a larger version of the graph that is easier to read. I am using the graph to keep track of my flight time as a go through flight school.

    18. Not sure what is wrong. I looked at your trouble shooting and none of them seem to explain why I see:

      Graph by http://www.pasi.fi/simple-graph-wordpress-plugin/
      #

      In stead of the graph. Any ideas of how to fix this? I have four sets of data and I’m running it from a widget. I do get a “GD Version: N/A” I’m not sure if this is a big deal or not. Thanks for you help

    19. Pat, I’ve sent you an e-mail regarding this issue. Seems server related, but let’s investigate.

    20. I’m having the same problem as pat.
      Not sure what is wrong. I looked at your trouble shooting and none of them seem to explain why I see:

      Graph by http://www.pasi.fi/simple-graph-wordpress-plugin/
      #

      In stead of the graph. Any ideas of how to fix this? I have four sets of data and I’m running it from a widget. I do get a “GD Version: N/A” I’m not sure if this is a big deal or not. Thanks for you help

      Maybe you can help me to

    21. I comment here just to mention two problems, probably you already know but here they are:

      – The values on the axis are not correct. As I can see also from your image in this page (The Project) and how it happens in my blog (www.simonegrassi.net) the values are not correct. I have 78 as central value but values like 78.7 continues to be under the center.

      – The last value is not displayed. In fact if today I add the value 78.7, to be able to see it, I have to add another value for the following day (I use to add the same, then I delete then the day after, substituting the proper new value)

    22. I forgot to mention,
      if you need help with the development, I would be happy to help,
      you can give me some tasks to fix/add/improve.

      bye.

    23. Unfortunately nothing above plugin version 0.9.6 works with 2.3.1 and a few WP versions lower. I wished you hadn’t given up on this plugin already, because until 0.9.6 it was great.

    24. BGH, I’m running WP 2.3.1 and the latest version of the plugin here myself. And as you can see, it works. If you are having problems, could you detail them? I’m currently not developing the plugin further, but I’ll try to resolve any issues whenever I can.

    25. I am unable to get my data to display. I want to be using the Google Chart API but after i select it, it is unselected the next time i look at it. I’m using it with the WP Widget way and nothing displays.

    26. Hi Pasi,
      thanks for the plugin. I’ve downloaded it to use it on the site I created for our baby (born last summer), to display charts with weigth and length development.
      The charts itself displays correctly when using widgets, but I’ll play around a little with the formatting (like borders etc.) to make it fit with the rest of the lay-out.
      At first try (but have to admit, still only playing with it for about just 45 mins) I couldn’t get it to work with the code in the sidebar.php
      Instead of in one of the sidebars, I would like to display the charts on a page. Would you have a template for that as well, just two charts next to eachother on a page ?

    27. Nice plugin.
      I have extended it to support “global” tables (seen by all users) and added a new content filter for data points. Please contact me, if you are interested.

    Leave a Reply

    Your email address will not be published. Required fields are marked *