chart-featured-sat

Google Chart WordPress Shortcode

Google charts are awesome. I use them on about a dozen sites to visually represent all kinds of data. If you don’t know what Google Charts are, it’s worth checking out the massive resources available on the Google Chart Tools website. Google describes their service as “… [the] perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.”

The shortcode below will get you started with implementing Google Charts on your blog.

The Google chart gallery will give you an indication of the types of charts you can build. In the case of the function below, it will permit you to construct basic charts only.

The Code

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

Examples

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 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).

Dynamic Charts

Retrieving data dynamically from a spreadsheet, database or other source means that you can active and dynamic sources of information on your posts or pages. Need to retrieve data sources and don’t know how? Let me know.

Download the Code

You can download the code here.

2 comments

  1. stefanie

    This is great! Did you ever end up making more information on dynamic webcharts using this shortcode? I would like to link mine to a SQL database on the same server as my wordpress.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">