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.

function chart_shortcode( $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 '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

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!

Coming Soon

In the next post on Google Charts, we’ll explain how you can get far more functional charts by making maximum usage of the Charts API.

First Name:
Your Email Address:
 


If you liked this article, you may also like:

  1. Generate QR Codes on Your Website or WordPress Post with Google Chart Tools
  2. Add Your Latest Google Plus Post(s) to Your WordPress Blog (or Generate a Google+ RSS Feed)
  3. [Shortcode] Insert Google Adsense with shortcode
  4. “This Day in History” Information on Your WordPress Website with Shortcode
  5. Picasa Image Tower or Gallery on Your WordPress Website with Shortcode (with timthumb options)
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Comments

  1. Good stuff – thanks.

    An interesting post about the Google Chart API here.

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

Please leave a comment or question!

*