jump to navigation

Create Powered Charts from Google API with a WordPress Shortcode Function October 9, 2011

Posted by Tournas Dimitrios in Wordpress - 3.

Google Charts API provide a 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 . Charts are exposed as JavaScript classes . Google Chart Tools provides many chart types for you to use .

Pass this shortcode some data and it will convert it into a graph generated by google charts api .  See it in action , the graph represents the results in a pie chart of the Poll that is on the right side-bar of this Blog (visitors vote their prefered web-application ) . The shortcode

Paste this code into your theme’s  functions.php file :

function chart_shortcode( $atts ) {
	    '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;

	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');

Now in the HTML-editor mode of an article / post call the function with this short code (just customize the values ) :

[chart data="17.99,12.23,15.83,25.9,28.06" bg="F7F9FA" labels="ActionScript|Flash|Flex|Linux|PHP" colors="058DC7,50B432,ED561B,EDEF00,AAEF99" size="450x250" title="Visitors Web-application Votes" type="pie"]

Source of this code .


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s