Create Google Charts via shortcode

Do you like pies? Well, who doesn’t, but actually we’re talking about pie charts. Even when it comes to showing data, showing data in a pie chart can be more fun than displaying the same data in plain old table or listing the information no one will ever read. If you have need to display that kind of data on your WordPress website frequently, you might have asked yourself how to create a chart directly in WordPress.

By following the question, you’ve probably found some plugins that can do the job for you, but what if we told you can summon the power of Google once again and easily create a shortcode which will be able to draw pie charts for you? Unfortunately, it won’t bake a pie for you, but it will create beautiful pie chart images which will directly be shown in a post, page, and your sidebar or actually wherever you choose to have one.

Besides the chart Google draws for you will be beautiful, before you decide to create one for you should know that in fact it is also very customizable. You can easily change the shortcode parameters and by doing so change the title, set number of pie pieces, change colors for background as well as for the pieces and you can even label those pieces; works better than some apps or plugins designed for the job.

Create Google Charts via shortcode

In the following lines, we’re about to show you how to install your own function and how to use the shortcode. Since you don’t have to change anything but only to copy and paste the code which you can easily delete later on, it costs you nothing to give it a try:

  1. Open functions.php file
  2. Copy and paste this function:
  3. function chart_function( $atts ) {
    extract(shortcode_atts(array(
    'data' => '',
    'chart_type' => 'pie',
    'title' => 'Chart',
    'labels' => '',
    'size' => '640x480',
    'background_color' => 'FFFFFF',
    'colors' => '',
    ), $atts));
    
    switch ($chart_type) {
    case 'line' :
    $chart_type = 'lc';
    break;
    
    case 'pie' :
    $chart_type = 'p3';
    break;
    
    default :
    break;
    }
    
    $attributes = '';
    $attributes .= '&chd=t:'.$data.'';
    $attributes .= '&chtt='.$title.'';
    $attributes .= '&chl='.$labels.'';
    $attributes .= '&chs='.$size.'';
    $attributes .= '&chf='.$background_color.'';
    $attributes .= '&chco='.$colors.'';
    
    return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$chart_type.''.$attributes.'" alt="'.$title.'" />';
    }
    
    add_shortcode('chart', 'chart_function');
  4. Save changes

Your shortcode is now ready for the job. You can open a post just to test it, and if you like how your newly installed charts function, you can use it anywhere on your site. The shortcode looks like this:

[chart data=”40,58,2″ bg=”F7F9FA” labels=”Already eaten|Going to eat|Leave for tomorrow” colors=”058DC7,81feb6,ff8080″ size=”600×200″ title=”Pie” type=”pie”]

Title – This title will be shown on top of you pie chart

Data – Enter numbers separated by commas. You can also use decimal numbers

Labels – Name your labels according to data numbers. Use “|” to separate labels

Background Color – Change the color of the pie chart background

Colors – Change colors of pie pieces

Size – Choose the size of the image which shows as the result

That’s it. As you can see, Google does a great job when it comes to pie charts. If you don’t need anything special about your graphs and you like using pie charts to show off your data, you won’t be needing another plugin. While this shortcode can really help you, if you’re more serious about your data and displaying it on the web, you will probably need to find a plugin like this one which can do a better job and which will give you more graph options.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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