word_tracker - Using the Google Chart API to show current word count

A WordPress plugin by sionachai

I made a decision about using the TallyGraph plugin. Nah, it took some digging but I realized that it was specialized for charting data over time. Neal needs a snapshot view of the current count of words against an estimated total to display his current progress on any piece of work. I did contact the TallyGraph developer to ask about this. He took the time to reply but did not really tell me anything substantive that would indicate I could do this with his plugin. So, I’m going to do this without TallyGraph. Who knows, maybe I’ll write my own plugin as a result.

Somethings will remain in effect though. I shall be using the Google Chart API of course, although now directly from the page itself. This means I will also be cutting PHP code here as well so I need to keep the Exec-PHP and the Deactivate Visual Editor plugins active. Here’s the description for both of those from the News and Calendar page. I have separated this page from the previous page so that I can work here while Neal can update his news and calendar without any turf wars.

Since the inclusion of PHP code into a post or page requires WordPress to parse it out from the additional plugin was required to execute the PHP code. This required the installation of the Exec-PHP plugin. Once installed one can include PHP within the text of either a post or an article and WordPress will execute the PHP code and display the text around it.

However, this causes an issue with editing posts and articles containing PHP code if the WYSIWYG visual editor is activated. Exec-PHP will display a large warning message at the top of every Edit Post and Edit Page interface warning the user to the risk of updating the page and irreparably losing the changes. Thus the installation of the Exec-PHP plugin also necessitated the installation of the Deactivate Visual Editor plugin that allows one to switch off the visual editor for specific posts or pages, whilst keeping in activated for others. This appeared to be the best solution for providing greatest functionality and ease of use for regular updates.

There were some configuration changes made as well for my preferences. Within my own profile (Users -> Your Profile) I set the Disable WYSIWYG Conversion Warning checkbox so I would not have to look at the warning on every post or page I was editing. This is usually inadvisable unless one understands the risks involved. I have left the warning showing for Neal but if he understands the risks then he may wish to do the same. I also added a custom field, deactivate_visual_editor, to this page to deactivate the visual editor and set it’s value to ‘true’.

Now to the Google Chart API. Typically one provides the API with the parameters it needs to generate the appropriate image back through the URL.

Alright, so how did I do that?

The image up there is an img tag directly from the Google Chart API with the following parameters;

cht = <pie chart style>; p3

chs = <width in pixels>x<height in pixels>; 250×100

chf = <fill type>,s,<color>; bg,s,0F0A04 (where bg for background fill, s for solid and color is an RRGGBB hexadecimal format

chtt = <chart title>; ‘Renegades (final draft)’
chts = <title color>,<font size>; 827060,12

chl = <label 1 value>; ‘26500+words’

chd = t:<chart data string>; t:60,40

The data is the real trick. I cheated above by adding the values for the chart title, label and data amounts directly into the URL parameters. Ideally, I’d like to pass those from a custom field, a ‘key|value’ pair, thus; <title of work>| <current word count>, <estimated total words when completed>,<active>.

Then, simply using the key|value pairing of ‘Renegades|26500,50000,true’ in the custom fields would display a pie chart with the title ‘Renegades’, a single slice calculated from the current and estimated total words. The active variable would determine whether to display the chart or not.

Alternately, I wonder if Neal would prefer the Google-O-Meter?

A few lines of code and I’ve been able to explode the key|value pair. Woot.

26500,55000,meter,crack budgies

Current word count equals 26500
Estimated total words will be 55000
Percentage completed is 48
Graph type will be meter
Label for words or pages is crack budgies
Display a graph is

We are going to display the graph
Graph type is recognized. Go -

It’s alive. It’s alive!