Codeable info

Create Beautiful Charts With The GChart WordPress Plugin

Posted on by in Blog

GChart is a great new plugin from Ukrainian developer straightforward that lets you insert beautiful charts and graphs directly into your posts and pages.

Charts are built using the Google Visualization API and the output given uses pure HTML5. Once the plugin has been installed you will see a new ‘Add Chart’ icon in the Upload/Insert area of the post editor.

GChart Icon

Clicking on the ‘Add Chart’ icon will bring the ‘Select Chart Type’ screen. There are 9 different chart types to choose from including a pie chart, geo and various graphs. Or to give them their correct names: area, bar, candlestick, column, gauge, geo, line, pie and scatter.

GChart Chart Types

You can then upload your data in CSV format. There is no option to upload data using any other format though Comma Separated Values is a standard format that is supported by every major spreadsheet application so this shouldn’t be an issue. Sample chart files for each chart type can be downloaded from this area. This allows you to see how tables are constructed and by uploading the test files you can quickly see what each chart looks like.

Upload Chart Data

Each sample CSV file is relatively straight forward and just contains a few rows and columns, though it’s enough to point you in the right direction of what each chart type can do.

Pie Chart Example

Once you have uploaded your CSV file, you can configure your chart and see an online preview of what will be inserted into your content. Each chart has a different number of setting areas. Whenever you make a change, the chart preview is updated underneath to let you see your changes right away.

In the general settings area you can define the chart title, font type and size and the position of your legend. Additional settings are available in this section with other chart types. For example, with bar charts you have the option of changing the axes titles position. The screenshots below show the settings area that is available with pie charts.

GChart Chart Settings

Pie charts can be flat or be displayed in 3 dimensions. Categories can be listed in reverse order if you wish and you can set the colour that is used on slice borders. In each slice of the pie you can display the percentage of the pie slice, the quantitative value (e.g. 7) or the name of the slice. You can also remove any text from slices and simply refer users to the chart legend.

GChart Chart Settings

The visibility threshold option lets you set the minimum percentage that is required for a slice to be displayed. For example, if you entered 0.1 in this field, any slices that were less than 10% of the total amount would not be displayed. Any slices that are not displayed are combined into the one slice. The background colour of this slice can be adjusted and you can change the slice label too (e.g. others).

GChart Chart Settings

By default the chart is displayed in the middle of your content though you can change the margin on the left hand side and top of the chart if you want to display it differently. The width and height of the chart area can be changed too.

GChart Chart Settings

In the layout section you can change the width and height of the chart, the border width and colour and the background colour the chart is displayed on.

GChart Chart Settings

Once you have finished configuring your graph, you can insert it directly into your theme. If you have disabled the visual editor (which I always do), the plugin will insert a shortcode into your post or page:

[gchart id="2655" title="WordPress Mods" height="400" legend_position="left" is_3d="1"]

This code produced the following:

GChart Example

The good thing about using shortcodes is that it allows you to easily insert charts and graphs into other posts and pages. There are some limitations to how the plugin currently works though. If you click away from the ‘Add Chart’ pop up at any time during the configuration of your chart, the chart will be lost and you will have to select your chart and configure the chart again.

Initially I thought that you could not edit charts. This is only true if you have disabled the visual editor. If you enable the visual editor again you will see a box in your content. Hovering over the box will allow you to edit or delete the chart.

Edit GChart

Clicking on the edit icon will bring up an ‘Edit Chart’ menu. From there you can change the chart type if you wish and customise the styling settings.

Edit Gchart

I was very impressed with what GChart can do. It only takes a minute or two to choose your chart type, upload your CSV file and change how it is displayed. It’s a really simple but effective way of displaying information visually in your content. I’d love to see a style selection feature added that would allow you to save, load and edit styles. For example, if you frequently display 3D pie charts with a red background you could save these settings as ‘Pie-3D-Red’ so that you can quickly select this style at a later date when you upload other CSV files.

I recommend checking GChart out if you are looking for a quick and easy way of of publishing information via charts and graphs on your website. If you have any questions regarding the plugin please let me know and I’ll do my best to address them :)


Link: GChart WordPress Plugin

Codeable info

Comments (4)

Comment by John says:

You can add my new WordPress Chart and Graph Plugin to your collection:

You can add pie charts, line graphs, bar graphs, etc in your WordPress posts using the wizard button. It is customizable and user friendly!

Comment by Kevin Muldoon says:

Thanks for letting us know :)

Comment by Madpixels says:

GChart plugin is no more available. It was deprecated and completely rewritten. The new plugin is called Visualizer. It is free and available in the official repository by following link:

Comment by web design Loughborough says:

really cool tool :)

Codeable info