2014-07-23_1926

Ever wonder how to add beautiful charts to your posts or to your pages? To be able to represent data summary in stylish line graph or country specific information in nice world map Geo Chart? This is now possible and absolutely free with the GoogleGraph WordPress plugin which we are about to review in this article.

 

How to install the GoogleGraph plugin?

 

The installation process for the plugin is relatively simple as it is a standard and fully supported WordPress plugin. This basically mean that you can follow these installation steps for installing the plugin:

 

Step 1: Access your WordPress admin area

Step 2: Access the plugin adding page (wp-admin -> Plugins -> Add new)

Step 3: Search for the “GoogleGraph” plugin

Step 4: Click the Install button

Step 5: Activate the plugin

 

Once the installation process is finished and you activate the plugin you will notice that the plugin will not add any buttons, menus or separate configuration pages in your WordPress blog which makes the plugin even more reliable and optimized.

 

How to use the GoogleGraph plugin?

 

As I have already mentioned the plugin will not add any menu items or pages to your WordPress due to the fact that the plugin is used with shortcodes directly in the post/page where you would like to have the graphic you will use displayed.

 

Here is a list of the shortcodes supported by the plugin for the different types of charts the plugin supports.

 

Geo-Chart

 

[geoChart width=”700px” height=”700px” ]

    [‘Country’, ‘Popularity’],

    [‘Germany’, 200]

[/geoChart]

 

In order to use the Geo-Chart feature you will need to copy/paste the above provided piece of code on the location you would like to have the Geo-Chart enabled. Once you do so it is time to add data to the chart. This can be easily achieved if you simply change the values “Country” and “Popularity” with respectively the country name and the value you would like to represent when a user hover over the country.

 

2014-07-23_1944

 

Line-Chart

 

[lineChart width=”600px” height=”500px”

    legend=”{ position: ‘top’, maxLines: 1 }”

    vaxis=”{title: ‘$k’, titleTextStyle: {color: ‘black’}}”

    haxis=”{title: ‘Year’, titleTextStyle: {color: ‘black’}}” curvetype=”none”]

        [‘Year’, ‘Sales’, ‘Expenses’],

        [‘2004’,  1000,      400],

        [‘2005’,  1170,      460],

        [‘2006’,  660,       1120],

        [‘2007’,  1030,      540]

[/lineChart]

 

In order to use a line type of chart you will need to copy/paste the above provided code snippet on the location you would like to have the line chart displayed. Once you paste it you will need to configure the line chart by changing the values of the attributes included in the line chart code above. In order to add some data to the chart please change the values of the “Year”, “Sales” and “Expenses” with the values you would like to have represented there.

 

2014-07-23_1945

 

Column-Chart

 

[columnChart  width=”500px”

    legend=”{ position: ‘top’, maxLines: 2 }”

    vaxis=”{title: ‘in $000’, titleTextStyle: {color: ‘blue’}}”

    haxis=”{title: ‘Year’, titleTextStyle: {color: ‘blue’}}”]

        [‘Year’, ‘Sales’, ‘Expenses’],

        [‘2004’, 1000, 400],

        [‘2005’, 1170, 460],

        [‘2006’, 660, 1120],

        [‘2007’, 1030, 540]

[/columnChart]

 

The Column chart is another type of chart you can take advantage from in order to display data for different type of statistic. In order to use that type of chart you will need to copy/paste the above provided code snippet and to respectively update the values of the “Year”, “Sales” and “Expenses” fields with the numbers you would like to be used for the generation of the graph.

 

2014-07-23_1945_001

 

• Pie-Chart

 

[pieChart width=”400px” ]

    [‘Task’, ‘Hours per Day’],

    [‘Work’,     11],

    [‘Eat’,      2],

    [‘Commute’,  2],

    [‘Watch TV’, 2],

    [‘Sleep’,    7]

[/pieChart]

 

The pie chart is one of the many chart types you can use on your website to represent different type of data. In order to use that chart you will need to copy/paste the code snippet provided above and to change respectively the values of the “Task” and “Hours per day” attributes with actual information and numbers so the data you would like to represent can be displayed properly.

 

2014-07-23_1946

 

More information and detailed description on the type of charts and their usage you can find at the official plugin page.

 

The plugin is pretty handy if you would like to present some data to your users of if you would like to make an online presentation of your co-workers for data related to your company and we sincerely hope that the plugin will improve your productivity and work progress like it did ours.