How to Create WordPress Bars and Charts

How to Create WordPress Bars and Charts

In most cases, you may need to leverage some visual aids to better enrich your web contents. These components can make your words much more convincing, such as the bars, pie charts, graphs and many more. With them, you can give people a clear and beautiful view of your data. However, the problem is that WordPress makes this practice a complicated thing by default. You are required to add some complicated CSS and HTML codes into your pages and posts. This may result in the huge problem for the common webmasters who know nothing about the coding stuff. In this case, we’d like to share a simple tutorial that tells you how to create WordPress bars and charts from the website dashboard with ease.

In this case, some of you may choose to create the bars and charts using the Microsoft Office or some other office applications, and then, converting them into the images for uploading into the WordPress site. It is fine if you are not willing to change the data in the future. Otherwise, you’d better check the following part for the easier method.

Utilize the Charts and Graphs Plugin

To add the bars and charts into your WordPress site easily, we highly recommend you to use the WordPress plugin of Charts and Graphs, with which you can add, manage and insert the interactive charts into your site. In this case, the precise data can appear automatically when people hover their mouses over any section of these visual aids.

Create the Bars and Charts

Once you install this plugin successfully, you can click the Visualizer Library button from the Media tab. Here, you simply need to hit the Add New button to create any visual aids you want. By default, there are 9 options for you to choose, which include Pie, Line, Column, Geographical Location, Area, Bar, Scatter, Gauge and Candlestick.

Now, you can choose your target option and click the Next button.

Add Visualizer

Then, you need to import the data source into it by uploading the CSV file. It is possible that you use the Microsoft Excel or Google Sheets to save your data as the spreadsheet. If so, you have to export the file using the CSV format.

If you use Excel, things can be much easy as you only need to click the Save As button and choose the option of CSV as the file type. However, if you use Google Sheets, you need to click the button of Publish To The Web from the File drop-down list.

Publish To The Web Button

This step can bring you a popup dialog that allows you to choose the file type of CSV and to publish the file. And then, this tool will give you the URL for the CSV file.

Upload the CSV File

Now, you can go back to the WordPress dashboard to continue the step of adding the bars and charts. As you have already chosen the visual type, you now can upload your prepared CSV files for the proper data importing. Here, you need to notice the below two tips.

  • If your CSV file comes from Excel, you need to click the From Computer button. If the file comes from Google Sheets, you need to click the From Web button.
  • Inside the file, you need to make sure that the name or heading of each column needs to be located at the first row, and the data types can be located at the second one. The support types include date, string, number, time-of-the-day and boolean.

Import Data

Upon the proper data importing, you can also click the Advanced button to better customize the chart, such as the modifications of chart title, title color, font style, legend position, legend alignment, font color, tooltip trigger and many more. Note that different visuals may require different customization options.

Advanced Settings

As everything is done, now, you can click the Create Chart button.

Edit the Bars and Charts

It is possible that you are looking to make the further modification of these bars and charts created by you. If so, you can enter the Visualizer Library to find your target. From the right-bottom location of the chart, you can find the icons that allow you to export, to edit, to clone and to delete it.

Edit the Bars and Charts

Display the Bars and Charts on Your WordPress Site

As for the showcase of these visual aids, you can choose between two options. Firstly, you can open a new or edit a current webpage or post, and then, click the Add Media button in the editing screen.

From the popup window, you need to hit the Visualizations button, and then, all your created bars and charts can be displayed. Now, you simply need to choose and click your target one.

Display the Bars and Charts

This way, the shortcode for that particular chart can be added into your web content automatically. Now, you simply need to make it public online.

Secondly, you can also choose to display the chart at the sidebar location. Note that this plugin does not offer an exclusive widget for you to do so. However, you can leverage the default Text widget and enter the corresponding shortcode for the effective showcase of the bars and charts.