Google Chart (Depreciated) WordPress Shortcode

Google charts are awesome. I used them on about a dozen sites to visually represent all kinds of data before switching to our own charting library. If you don't know what Google Charts are, it's worth checking out the massive resources available on the Google Chart Tools website.

This code references the depreciated tool... so support isn't provided and there's no guarantee of continued availability. This article was ported over from Internoetics, and we've done so to preserve the content (which is still working). Another article is forthcoming that deals with the most up-to-date tools which are far superior to the very basic image-based service.

The shortcode below will get you started with implementing Google Charts on your WordPress website with shortcode. The functions below will permit you to construct only the most basic charts.

The Result

Pie Chart (pie)

In the first example we'll render the population of Australia by State.

Sparkline (sparkline)

Sparkline graphs are great for rendering stock data or the value of currency. They're also useful in illustrating trends in traffic. It will draw a line chart where data points are spaced evenly along the x-axis.

[chart data="0,22,24,26,28,100,90,80,70,65,20,80,30,50,20,30" bg="F7F9FA" size="445x100" type="sparkline"]

Google-O-Meter Charts (gom)

A Google-o-meter is a gauge that points toward a single value on a range. The range has a color gradation that you can optionally specify. You can also specify custom text above the pointer. The dial range is from the data format minimum value to the maximum value.

[chart_depreciated data="30" bg="F7F9FA" labels="low" colors="00ff40,009d27,ffc22f,d89b07,ffa346,d89b07,ff6666,ff0f0f" size="445x200" title="Fire Danger" type="gom"]

The above examples are very basic. You should play around with the chart types with reference to the Google Charts page to get a feel for how they're rendered (and what fields are required).

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Google Chart (Depreciated) WordPress Shortcode

http://www.beliefmedia.com/code/wp-snippets/google-charts-depreciated

function beliefmedia_chart_shortcode_depreciated($atts) {

extract(shortcode_atts(array(

'data' => '',

'colors' => '',

'size' => '400x200',

'bg' => 'ffffff',

'title' => '',

'labels' => '',

'advanced' => '',

'type' => 'pie'

), $atts));

switch ($type) {

case 'line' :

$charttype = 'lc'; break;

case 'xyline' :

$charttype = 'lxy'; break;

case 'sparkline' :

$charttype = 'ls'; break;

case 'meter' :

$charttype = 'gom'; break;

case 'scatter' :

$charttype = 's'; break;

case 'venn' :

$charttype = 'v'; break;

case 'pie' :

$charttype = 'p3'; break;

case 'pie2d' :

$charttype = 'p'; break;

default :

$charttype = $type;

break;

}

if ($title) $string .= '&chtt=' . $title;

if ($labels) $string .= '&chl=' . $labels;

if ($colors) $string .= '&chco=' . $colors;

$string .= '&chs=' . $size;

$string .= '&chd=t:' . $data;

$string .= '&chf=' . $bg;

return '

<p style="text-align:center;"><img title="' . $title . '" src="http://chart.apis.google.com/chart?cht=' . $charttype . $string . $advanced . '" alt="' . $title . '" />';

}

add_shortcode('chart_depreciated', 'beliefmedia_chart_shortcode_depreciated');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Again, the code and API is old. Use with caution.

The Result

Pie Chart (pie)

Sparkline (sparkline)

Google-O-Meter Charts (gom)

WordPress Shortcode

Like this article?

Martin Khoury

Leave a comment