Google Chart (Depreciated) WordPress Shortcode

and like us on FB

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.

[chart data="7238819,5547527,4516361,1644642,507626,229675,127532,2296411,358894" bg="F7F9FA" labels="NSW|Victoria|Queensland|South Australia|Tasmania|Northern+Territory|Darwin|Western Australia|ACT" colors="058DC7,81feb6,ff8080,1601d1,50B432,ff0f0f,800040,ED561B,EDEF00" size="445x200" title="Australian Population" type="pie"]

Australian Population

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"]

Fire Danger

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.

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.