Do you want add bars and charts in WordPress? Visual aids like graph, bars, pie chart, and others are a perfect way to add data beautifully with your content. In this article, we will show you how to create bars and charts in WordPress with Visualizer WordPress Charts and Graphs plugin.
The Problem with Bars and Charts in WordPress
There are many WordPress plugins to add bars, charts, and graphs with your content. However, the most common complain we have heard from our users is that these plugins are usually too complicated to use.
Some of these plugins even expect users to add data inside a shortcode in extremely complicated formats.
Instead of using those plugins, many users end up creating chart in their office applications and converting them into an image.
This could work if you are planning to never change it. However an image is no substitute to an interactive chart where helpful data appears when user takes their mouse over a particular section.
An ideal charts and graph solution would allow you to:
- Add data from a data source on your computer or on the web.
- Populate charts, pies, graphs, and bars using your data.
- Create beautiful, interactive, colorful, and mobile friendly charts.
- Most importantly, it should let you update the data whenever you want.
Having said that, let’s see how Visualizer WordPress Charts and Graphs plugin helps you do all that.
Creating Bars and Charts in WordPress with Visualizer
First thing you need to do is install and activate the Visualizer WordPress Charts and Graphs plugin. For more details, see our step by step guide on how to install a WordPress plugin.
While the free version does almost everything that you need, they also have Visualizer Charts and Graphs Pro which adds additional features to the plugin such as adding data directly using a spreadsheet like interface and importing data from other charts.
It costs $79 for a single site license with one year of professional support and updates.
Note: This tutorial is about the free version of the plugin.
Upon activation, you need to visit Media » Visualizer Library page. This is where all your charts and graphs will appear.
You need to click on the Add New button to add your first chart.
This will bring up a popup window on screen. You will see different chart types available with the plugin. Simply select the chart type you want to add and click the next button to continue.
The next step is to add your data source in a CSV format. If you have saved your data as spreadsheet using Excel, Google Sheets, or any other program, then you can simply export it as CSV file.
You can download or save your CSV file to your computer and then upload it by clicking on the ‘From computer’ button.
Your CSV file must have column names in the first row and data type in the second row. The plugin supports these data types: string, number, boolean, date, time date, and time of day.
Take a look at this example file we have created in Google Sheets.
If you are creating a CSV file using a text editor, then take a look at this example CSV file:
Adding a Chart in WordPress Using Google Drive Spreadsheet
If you have your chart data saved as a spreadsheet on Google drive, then you can add it to your chart without exporting it.
Open your data file in Google Spreadsheets and then click on File » Publish to the web.
This will bring up a popup where you need to select how you want to publish this document. You need to select Comma Separated Values (.csv) from the dropdown menu.
Don’t forget to click on ‘Publish’ button.
You will now see the publicly available URL of your sheet as a CSV file. You need to copy this URL and go back to the Visualizer chart.
Click on From Web button and then enter the URL of your Google spreadsheet’s csv file.
As soon as you enter the URL, the plugin will fetch your CSV file and will show a live preview of your chart.
You can now click on the create chart button to save your chart.
Adding a Chart or Graph in WordPress Posts/Pages
Adding a chart or graph to your WordPress posts and pages is as simple as adding images.
Create a new post / page or edit an existing one where you want to add the chart. On the edit screen, click on the Add Media button above the post editor.
This will bring up the WordPress media upload popup. You need to click on the visualizations tab from the left column. It will load all charts you have created and saved on this site.
Click on the insert icon below your chart. The popup will disappear and you will see your chart added to your WordPress post as a shortcode.
You can now save your WordPress post or page and visit your website to see the chart embedded into your WordPress post.
Editing Your Visualizer Charts in WordPress
You can edit and change your charts anytime. Simply visit Media » Visualizer Library page. From there you can clone a chart, delete it, or edit its visual settings.
Updating data for an existing chart without changing the chart is quite easy with Visualizer.
If you added data from a Google spreadsheet, then all you need to do is update data in your spreadsheet and go to File » Publish to the web and republish your spreadsheet. Your changes will automatically reflect in your chart.
On the other hand, if you uploaded a CSV file, then you need to update the CSV file on your computer. Once done, select the chart that you want to update and click on the edit link below the chart.
In the Upload CSV file section simply upload your new CSV file. Changes in the data will automatically reflect in posts or pages where you have inserted that chart.
Adding a Chart in a WordPress Sidebar Widget
Visualizer uses shortcodes to insert charts. Simply go to Media » Visualizer Library, there you will see a shortcode below your charts.
Copy the shortcode and go to Appearance » Widgets. Drag and drop a text widget to your sidebar and paste the shortcode inside the widget.
If the shortcode doesn’t work in the text widget, then checkout our guide on how to use shortcodes in WordPress sidebar widgets.
We hope that this article helped you add bars and charts in your WordPress site. You may also want to see our list of 24 must have WordPress plugins for Business websites
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
I am able to generate the chart and publish it on my site, but how to I edit the height and width once the shortcode?
thxs dude it help a lot
Judith Hollies says
Thank you so much for this clear tutorial. I’m trying to create a pie chart in wordpress and have successfully activated the visualizer plug-in. But when I copy the info over from either excel or google drive (following your steps) both times the first row of stats is omitted in the pie chart. I’ve tried re-ordering the stats, placing them in different locations, but it’s always the first row that gets omitted! Can you help me! Judith
How we comparison between two app like app A and app B and now for i want to make a graph chart both of them in blog of wordpress?How i do it?Can you tell me here?
Thanks for the review. How do you handle values with a comma eg. 2.232,42 if you have to use commata as a seperator for the Visualizer?
Hi Great plugin, I solved all my problems except one.
How do you edit a chart in the visualizer library, when I click on the edit icon all I get is a blank screen, is this just me – plugin conflict or something, or is there a problem with the Visualizer plugin
Hi, I’m trying to replicate your example above from “Adding a Chart in WordPress using a CSV file”, but when I click “From Computer” in “Upload csv file” and select the file I copied from your example I get: “CSV file is broken or invalid. Please, try again”
Any ideas what the problem may be, any help greatly appreciated.
Richard G says
Thank you for this post
However maybe you can help me for one of my client. He has a group of students, each one have a private area
My client wants to integrate somes customs fields. Basicly each student will enter his datas into this custom fields, and these datas will be convert into a chart or a curve (tracking weight loss or mass gain for exemple)
Thanks for the great tutorial. When I drop down the “upload CSV file” I am unable to click on the button for “From Web”, as it is not highlighted in blue. So I must add the data “from Computer”. I noticed that in the screen shot above the “from Web” button is also not highlighted. Has anybody else had this problem and figured out a solution?
Thanks a lot !!!!!!
I love you guys, you solve my very long issue.
Thanks for this excellent plugin.
Recommended to all.
Tom Horn says
I use charts on my blog often so this really comes in handy. Thanks alot.
How do you make the bars thicker?
Editorial Staff says
You have to tweak the CSS.
Franco Castillo says
I just downloaded the Visualizer plugin, and I opened it in Winrar. Can anyone tell me how to activate the plugin in Winrar?
Editorial Staff says
Use this guide on how to install a plugin in WordPress
Yes very interesting indeed thanks!
I have the same question (and sorry for my english), i need to create personnal charts from datas feed by a user thrue a table on the website(and insert the final chart in the profil page of the user). Do you think it can be done? do you have any clues?
Husien Adel says
thanks a lot
Great looking plugin. Have been waiting for something like this for ages.
How feasible is it to be able to read data from custom fields, instead of a CSV file or a Google Drive spreadsheet?
Is this a feature that you may consider implementing?
That way, data could be kept in the WordPress database, and be updated from the front end of the website.
For me, that would be really useful!
your idea is good and I will keep in mind it for future release. Could you, please, re post your request at the forum on support site? It will help us to keep all requests in one place.
Post it here: http://visualizer.madpixels.net/forums/forum/official-forums/feature-request/
Jotpreet Singh says
hey, Awesome. Can this be done via google docs or any other online method. I’m running a blog on wordpress.com. Hope something, would come out. Do you have any ?