Comments Line Graph

I had promised a WordPress pluggable version of the comments line graph and here it is. The line graph application is in two pieces: one to place in your theme directory and include in your page template; and a plug-in that will create the cached comment count file.

File one is graphcomments.php, which is installed in your theme. You’ll include the following in your web page template where you want the graph positioned:

<object style="width: 810px"
data="/wp/theme/graphcomments.php"
type="image/svg+xml" ></object>

Change the location for your environment. The element needs to be styled to fit the preferred width. The number of comments remains the same, but the graph resizes based on this width. The following is the same graph, but the containing element is set to 500 pixels wide.

In addition, the graphcomments.php has a style section with three values that you can change: line width (stroke-width), color (stroke), and opacity (stroke-opacity, a value between 0 and 1, with 0 being transparent, 1 being fully opaque).

The second piece is the plug-in, store_comments.php, which needs to be added to your plug-in directory. Both of the files require access to a single file, called comments.csv. This is a file that must be writable by the world, stored wherever you want. You can make it by creating an empty text file, and then use “chmod 766″ to make it writable. If you don’t make this file, the application will attempt to create the file, which means the whole directory has to be world writable.

Both store_comments.php and graphcomments.php have a constant, FILENAME, which needs to be altered to fit the location of where the comments.csv file is stored.

How the comment graph line works is that whenever a new comment is saved, the comments.csv is updated to reflect the comment counts from the most recent 100 posts. The application that generates the SVG reads this file for the comma-separated values, and then creates the line graph.

At this time, the comments line graph is restricted to 100 comments or less, so, be forewarned if you get those 130+ comment days, the peak will be truncated.

The graphcomments.php application can be used on any data that is located in the file, each value separated by a comma. You can use it for category counts, unique visitor counts, anything that has simple totals over time.

Version 1.0 beta:

graphcomments.php

store_comments.php

Steps:

  • Click the links and save the files, changing the extension to php from phps.
  • Place the graphcomments.php in your theme.
  • Place the store_comments.php in your plug-ins directory.
  • Create an empty text file named comments.csv, and place it in a directory. The directory does not have to be web accessible.
  • Change the file permissions to world writable, chmod 766.
  • Change the FILENAME value in both graphcomments.php and store_comments.php to the location of comments.csv file.
  • Add the line graph object element, example given above, to wherever your want the line graph to display.
  • Style the object element and the line graph.

The line graph is created using SVG. You don’t have to serve your pages as XHTML when you include SVG via an object element, as this application does. The line graph should work in IE if the person has the Adobe SVG plug-in installed, but no promises. Or you can set a container DIV element in which the object is installed to not display for IE. Check my header to see how to create IE specific style sheets.

I tried to center the line graph so that the tips aren’t truncated until after the 100 comment mark. There is white space at the top and bottom, but using negative margins for the top and bottom should eliminate most of it.

NOTE:

Safari fills in the background with white, by default, for the object container. I’m exploring how to change this, but I don’t expect to have a lot of luck. It looks like this behavior is a bug (or as planned, but not wanted). Feel free to use, but the graph won’t have a transparent background like the graph in my header, which is inline SVG. Of course, you can also copy my inline SVG, but then you’ll have to serve your pages as XHTML.

This entry was posted in Technology and tagged , . Bookmark the permalink.

7 Responses to Comments Line Graph

  1. Dan Brickley says:

    Hey there! Couple times lately I’ve noticed dud links when your stuff is in planetrdf.com — I think only issue is use of relative links, which only make sense from HTML loaded at burningbird.net…

  2. Shelley says:

    Dan, I must confess I’m terrible about not worrying when links within my content are not accessible anywhere but my place. I know, I’m bad, awful.

    I’ll try to be more Open and Social ;-)

  3. Sam Ruby says:

    Dan, perhaps planetrdf should subscribe to Shelley’s Atom feed? :-)

    People are forever going to be putting relative links in content:encoded. Blaming the victim doesn’t solve the problem.

  4. Dave Beckett says:

    My solution for Planet RDF is to switch to running it with Sam’s Planet Venus software. It’s in testing – see http://staging.planetrdf.com/ But it seems that software removes the object tag altogether. Oops?

  5. Hi, can you put a link to this post from the “Site Technology” page? I pointed several people to that page, and the code being there would be nice to augment the screenshot.

    Thanks

  6. Shelley says:

    I have been known, from time to time, to move my weblog about, which is one reason I got into relative links. With people not visiting web sites, I suppose I should refrain. I should probably refrain from moving my sites about, too. Should.

  7. anon says:

    A request, if you’re going to inline the css not link it, then rather than doing:
    <style type="text/css">
    #bblinegraph
    {
    stroke-width: 2;
    stroke: white;
    stroke-opacity: 1;
    fill: none;
    }
    </style>
    ...
    <polyline id='bblinegraph' ...
    Could you do (or the attributes equiv.):
    <polyline id='bblinegraph' style='stroke-width: 2; stroke: white; stroke-opacity: 1; fill: none;' ...That way my legacy browser doesn’t scribble it in the header.