Install GChart Plugin
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.
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.
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.
Each sample CSV file is relatively straightforward 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.
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.
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.
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).
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.
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.
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:
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.
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.
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