Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create Bars and Charts in WordPress with Visualizer

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.

Adding Charts and Graphs in WordPress

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.

Add new chart

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.

Select a chart type

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.

Add your CSV file as data source for the chart

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.

Example CSV File

If you are creating a CSV file using a text editor, then take a look at this example CSV file:


Browser,visitors
string,numbers
Chrome,7894
Firefox,6754
Internet Explorer,4230
Safari,2106
Opera,627

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.

Publish to 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.

Publish your sheet as CSV

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.

Adding URL to 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.

Add media button

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.

Insert chart into your WordPress posts or page

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.

Chart 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.

Edit or manage your charts in WordPress

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

21 CommentsLeave a Reply

  1. 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?

  2. 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

  3. 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?

  4. 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?

  5. 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
    Any ideas?
    Thanks
    David

  6. 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.
    Thanks
    David

  7. Hello

    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)

    Any idea?

    Thank you
    Richard

  8. 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 Again

  9. Thanks a lot !!!!!!

    I love you guys, you solve my very long issue.
    Thanks for this excellent plugin.

    Recommended to all.

  10. I just downloaded the Visualizer plugin, and I opened it in Winrar. Can anyone tell me how to activate the plugin in Winrar?

  11. Hello

    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?

    Thanks

  12. 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!

    – Stephen

  13. 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 ?

Leave a Reply to Richard Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.