WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Create Bars and Charts in WordPress with Visualizer

How to Create Bars and Charts in WordPress with Visualizer

Last updated on July 11th, 2016 by Editorial Staff
437 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

437 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

21 Comments

Leave a Reply
  1. Adam says:
    Jan 28, 2018 at 9:05 am

    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?

    Reply
  2. zulfi says:
    Feb 9, 2017 at 12:45 am

    thxs dude it help a lot

    Reply
  3. Judith Hollies says:
    Jan 4, 2017 at 5:51 am

    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

    Reply
  4. mandeep says:
    May 31, 2016 at 3:57 am

    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?

    Reply
  5. Felix says:
    Feb 9, 2016 at 11:32 am

    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?

    Reply
  6. david says:
    Dec 21, 2014 at 4:38 am

    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

    Reply
  7. david says:
    Dec 18, 2014 at 7:58 am

    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

    Reply
  8. Richard G says:
    Feb 7, 2014 at 12:53 pm

    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

    Reply
  9. Chad says:
    Jan 9, 2014 at 12:55 am

    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

    Reply
  10. Artur says:
    Dec 2, 2013 at 2:51 pm

    Thanks a lot !!!!!!

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

    Recommended to all.

    Reply
  11. Tom Horn says:
    Aug 24, 2013 at 11:12 pm

    I use charts on my blog often so this really comes in handy. Thanks alot.

    Reply
  12. Jeff says:
    Aug 23, 2013 at 5:21 am

    How do you make the bars thicker?

    Reply
    • Editorial Staff says:
      Sep 10, 2013 at 8:06 pm

      You have to tweak the CSS.

      Reply
  13. Franco Castillo says:
    Aug 8, 2013 at 2:35 am

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

    Reply
    • Editorial Staff says:
      Aug 11, 2013 at 12:18 pm

      Use this guide on how to install a plugin in WordPress

      https://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/

      Reply
  14. Richard says:
    Aug 7, 2013 at 8:11 am

    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

    Reply
  15. Husien Adel says:
    Aug 4, 2013 at 8:56 am

    thanks a lot

    Reply
  16. Ted says:
    Aug 3, 2013 at 4:28 am

    Really helpful.

    Reply
  17. Stephen says:
    Aug 1, 2013 at 7:12 pm

    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

    Reply
    • Eugene says:
      Aug 2, 2013 at 1:01 pm

      Hi Stephen,

      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/

      – Eugene

      Reply
  18. Jotpreet Singh says:
    Jul 31, 2013 at 9:49 am

    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 ?

    Reply

Leave a Reply 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get up to 67% OFF DreamHost's web hosting, plus a FREE domain of your choice.
OptinMonster
OptinMonster Coupon
Save 10% off on OptinMonster, the best lead generation plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.