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.
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:
However, there are also some disadvantages:
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.
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:
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.
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
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.
The following instruction explains step by step how a chart that was created with PrettyCharts can be integrated into WordPress.
The result might look like the following screenshot:
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.