How to Create a Dynamic Chart or Graph for use in WordPress

How to Create a Dynamic Chart or Graph for use in WordPress

When it comes to displaying charts and graphs in WordPress there are a number of options available. Today we are going to take a look at a plugin called Google Chart WordPress Plugin and show you how in just a few easy steps you can add dynamic charts to your WordPress posts and pages using a Google Spreadsheet as a the data source.

While you could always just take a screenshot of a chart generated in an application like Excel and publish that on your site, creating a dynamic graph is a far better option as we will see below.

The Google Chart WordPress Plugin

Google Chart WordPress Plugin is a low cost premium option for anyone who wants to display charts and graphs in their WordPress posts and pages.

While with this plugin you can enter the data to be visualized through the plugin control panel, the better way to use this plugin is to link your charts to a Google Spreadsheet. This not only gives you an easier way of entering the data for the chart, but it also allows you to create a chart that is updated whenever the content of the spreadsheet is updated.

This means your visitors get to see a graphical representation of your data in the form of a chart or graph which is rendered in real time based on the data in the spreadsheet – there is no need to republish the graph or chart on your site, just hit the refresh button or reload the page to see the updated chart or graph.

With this plugin you also get a choice of nine different graph and chart types to display your data.

How to Create a Dynamic Graph or Chart in WordPress

To get started, let’s take a look at just how easy this plugin is to use for anyone who wants to add a dynamic graph or chart to their WordPress website.

Install the Plugin

After downloading the plugin and then activating it on your site, the graphs can be managed via the ‘Google Chart’ custom post type that is added to your site.

Create a Google Chart

As this plugin makes use of custom post types to handle the charts, any charts you do create can be managed via the familiar post display screen.

Google Chart List

Creating the Chart in WordPress

To get started, the first step is to click on the ‘Add New Chart’ button or menu item. From this screen you can give your chart a title and enter the chart data.

Google Chart Add New

However, although you can enter the different values for each column and row via this page, inside your site, there is a much better option.

That option is to link the chart to a Google Spreadsheet which contains the data you want to present graphically on your site. As mentioned earlier, there are a few other reasons why this is the best option and use of this plugin:

  • It’s easier to enter data into a spreadsheet than the plugin pages
  • The graph or chart is updated whenever the spreadsheet is updated
  • Non-WordPress users can enter data in the spreadsheet for publication on your site without having access to your site

So if you ignore the first options panel and scroll down the to ‘Current Google Chart Setting’ panel you can create your chart the right way.

Google Chart Spreadsheet Details

Creating the Data Source

If you haven’t created a Google Spreadsheet already, then click on the ‘Add Spreadsheet’ link to open a blank document. If you’ve not used Google Drive before then you might need to create a free account but otherwise you should be ready to get started. Then simply enter the data you wish to use for the graph or chart.

Google Chart Spreadsheet Data

Once you are happy with the data in the spreadsheet, bearing in mind that you can easily change it later, click on File > Share to change the sharing settings.

Google Chart Spreadsheet Share

From the next set of options, click on ‘Change’ under the ‘Who has access’ heading.

Google Chart Sharing Settings

From this panel, select ‘Anyone with the link’, to make the chart visible to all the visitors to your site. Then it’s just a case of copying the ‘Link to share’ URL for use in WordPress.

Google Chart Spreadsheet Link to Share

Creating the Chart in WordPress

The next step is to finish creating the chart by linking it to the spreadsheet. To do this switch back to WordPress and the ‘Add New Chart’ screen, and paste in the URL to the spreadsheet.

Then enter any other information, such as the char tile and the axis titles. You can also select the chart style too at this point so make sure you choose a suitable option for your data. This can all be changed at a later date so don’t worry about getting it perfect now.

Once everything looks ok, click on the ‘Save’ button and you should get a preview of your chart.

Google Chart Preview

If the chart looks like a good representation of your data you can insert it into a post. If it doesn’t look quite right, you can try a different chart style until you find one that is suitable.

Once you are happy with the chart, scroll up and hit the ‘Publish’ button to save the whole chart. Below the Publish options you will see the shortcode for inserting this chart into a WordPress post or page, as well as the PHP for adding it to a theme template file.

Publishing the Chart

Once the chart has been saved, all that is left to do is publish it on your site. To do so, either create a new WordPress post or page, and then paste the shortcode for your chart into the editor.

Google Chart Post

By pressing the ’Preview’ button you can see how your chart will look to the visitors of your site.

Google Chart Post View

If all looks good, press the ‘Publish’ button to set the post or page live.

Updating the Chart

One of the main advantages of taking this approach to creating a chart by using a Google Spreadsheet as the data source, is that the graph or chart will be dynamically updated each time the contents of the spreadsheet is changed.

To test this out, switch back to your spreadsheet and make some changes, such as adding a new column or row, or editing the existing data. As Google Spreadsheet auto saves any changes, you don’t even have to commit your edits.

Google Chart Spreadsheet Updated

After making the changes, simply go back to your WordPress post or page that contains the graph or chart and refresh the page to see the updated graph.

Google Chart Updated

You should now see the updated graph containing the new data. Any time you or someone else with access makes changes to the spreadsheet, the graph on your site will be updated without you having to edit your WordPress site.

Other Graph and Chart Plugins for WordPress

As is often the case with WordPress, there is more than one way of displaying a graph or chart in WordPress.

Visualizer

Here are some other free and premium WordPress plugins that you might be interested in:

If you want to display graphs and charts in your WordPress posts and pages then there are plenty of options available to you.

What type of graph or chart are you planning to add to your WordPress site?