Publish a Chart on Your WordPress Website
This guide was written to help you adding a chart or diagram on your WordPress website. WordPress is a very popular CMS system that is open source and free to use. Especially for smaller size web projects and blogs it is often used as it is simple to setup and relatively easy to learn. WordPress is written in PHP and uses a SQL database to store information.
When you own or manage a WordPress website you might find yourself in a situation where you would like to add or publish a chart on your WordPress page. With this article we would like to provide you with an overview of which options you have and how you can accomplish your goal of integrating a diagram on your website.
Publish an Image of a Chart on Your WordPress Website
The first thing that might come into your mind might be to take a screenshot of a chart and publish it as an image on your WordPress blog. The workflow could look like the following: First you use some sort of spreadsheet software like Microsoft Excel or LibreOffice. In a spreadsheet you collect and enter the data that is used to create the diagram:
You then use the chart or diagram tooling of the spreadsheet software such as the LibreOffice Chart Wizard for instance. The tool allows you to select an appropriate chart type, select the data range and configure the chart to your needs:
Once you have created the chart according to your expectation you can then use a screenshot tool to create an image file of the chart. Popular file extensions might be png or jpeg.
The last step is then to take the image and publish it on a WordPress page or article. From a technical perspective this is rather easy as it is the same procedure as publishing any other image on your WordPress website. You just select the page or post you want to include the chart in, add an image and select the image of the chart. The result will look like the following:
The advantages of this approach are:
- No extra cost or fees
Not only WordPress is open-source and free to use but there is also free spreadsheet software available that allows you to create a chart such as LibreOffice for instance. The same holds of tools to take a screenshot which means that you don't need to pay anything extra to publish y chart on your WordPress page. - Process of publishing the chart is easy to learn and handle
Using a chart wizard of a spreadsheet tool is not too difficult to learn and often very well documented. There is no need of any programming skills.
However, there are also some disadvantages:
- Charts are static
This means that if the data of your chart changes, you would need to start all over again: First you need to modify the spreadsheet to update your chart, take a new screenshot and publish it on your WordPress page. This can be a burden if your chart changes frequently or needs to be updated automatically on certain events (some user interaction for instance). - Charts are not interactive
As for any other image on the web there is no user interaction possible: A user cannot modify the data range of the axis of the chart or use tools such as hover to show the value of specific data points.
Using a WordPress Plugin to Add a Chart
An alternative approach is to use a WordPress plugin to handle the chart creation. The following table gives you an overview of popular WordPress Chart plugins:
| Name | Chart Types | Data Sources | Price |
|---|---|---|---|
| Visualizer |
|
|
Free / 55 GBP for Personal plan |
| wpDataTables |
|
|
Free / 44 GBP for 1 year subscription |
| M Chart |
|
Free |
The advantage of creating charts via WordPress plugins is easy integration meaning that you don't need any programming skills to create interactive WordPress charts. The disadvantage is that you depend on a third party software solution.
Creating a WordPress Chart with Visualizer
After installing Visualizer in your WordPress page you will find a new menu item called "Visualizer". After clicking on "New Chart" you can select a suitable chart type as well as the chart backend (GoogleCharts, DataTable or ChartJS). Once you have selected the chart type the data source needs to be set. You have the option to either import data from a file or from URL. At the moment csv files and json files are supported. Some functionality such as importing data from a database is only supported in the paid version.
Once you have created the chart with visualizer you can simply switch to the post or page where you want to include the Visualizer chart. The result might look like the following screenshot:
Creating a WordPress Chart with wpDataTables
After installing the wpDataTables extension in your WordPress you will find an additional menu item called "wpDataTables". When clicking on create a chart, you first need to set a chart name and select the rendering engine. Currently only Google Charts is available in the free version, for HighCharts or Chart.js you would need to upgrade to Premium. After selecting the chart type, the data source needs to be selected and you can also format and edit the chart. Similar to the Visualizer plugin you can select the wpDataChart to be shown in your blog posts and pages.
Adding a Chart in WordPress with M Chart
After the installation of M Chart you will find a new menu item in your WordPress Dashboard called "Charts" where new charts can be added
Developing a Custom WordPress Chart Solution
If you have very specific needs in terms of chart creation you might consider hire a WordPress developer to create a customized solution for you.
The advantage of this solution is that you have full flexibility and can specify exactly what you need in terms of chart integration as it is a bespoke solution that is created by a software developer for you. The disadvantage is obviously the price for the development costs which is typically higher than for off the shelf solutions.
Integrating PrettyCharts into WordPress
The following instruction explains step by step how a chart that was created with PrettyCharts can be integrated into WordPress.
- Create a Chart as a guest or logon to your PrettyCharts account and use one of the chart creation options.
- Copy the source code and import it in the WordPress page or article into the "Source" mode of the editor.
The result might look like the following screenshot:
Summary on WordPress Chart Integration
There are multiple options to include charts in WordPress such as posting a static image, using WordPress plugins, developing a custom chart solution or using software such as PrettyCharts. All methods have advantages and disadvantages in terms of user interaction, easy of use, portability and maintainability.
