WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

How To Add Charts And Graphs To WordPress

How To Add Charts And Graphs To WordPress

You’ve heard the adage “a picture is worth a thousand words.” This certainly applies when you are presenting or explaining complex information.

Using graphs and charts is great for breaking up long passage of text, and making technical data more easily digestible.

You can present data with tables, but if you want people to try and interpret complex data with figures, trends or comparisons easily, then charts and graphs are perfect for helping them visualize the data.

Graphs and charts help explain complex data so your audience can more easily interpret it!

If you want to learn how to display dynamic visual content on your WordPress site like graphs and charts, this tutorial will show you how to create eye-catching and interactive charts and graphs to your pages that:

If you are displaying visual data like bar charts, comparison bars or trending graphs containing static information (e.g. historical data), an easier way to add the data is to create your graphs or charts using a desktop application, convert these into .jpg and .png files and then simply add your files and an image to your posts.

Use WordPress Chart & Graph Plugins

If you want to easily create interactive bars and graphs in WordPress with no coding skills required, the easiest way to do this is to use a plugin.

Fortunately, there is a great free plugin for WordPress users that is simple to install, easy-to-use and allows you to not only create appealing and mobile-responsive charts and graphs, it also lets you populate your charts and graphs with updatable content.

Visualizer – WordPress Plugin

Plugin URL

You can install the plugin inside your WordPress dashboard (see further below), or download WP Visualizer from the link below:


Plugin Description

WP Visualizer is an easy-to-use and powerful plugin that lets you create, manage and insert dynamic charts into your WordPress posts and pages with just a few mouse clicks.

Visualizer uses Google Visualization API to render charts, which support cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases, and are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no additional addons are required.

Visualizer also comes with a variety of built-in that are optimized to address your data visualization needs, including:

WordPress Visualizer is also flexible and customizable, allowing you to use Google Chart Tools with their default setting, or configure an extensive set of options to match your site’s design. A number of options are available for each chart that allow you to customize their look and feel.

Additionally, charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross-platform portability to iPhones, iPads and Android devices. Your site visitors can see your charts and graphs on their mobile devices without requiring the installation of any additional software.

Plugin Installation

From your WP administration area, select Plugins > Add New from the main menu …

In the Add Plugins screen type in search for “visualizer” and click enter …

Locate the entry in the search results screen and click the “Install Now” button …

Click OK to go ahead …

Activate the plugin after installing it …

You can also activate the plugin in the Plugins area …

After your plugin has been activated, click on Library

You can get to the plugin’s ‘library’ screen by selecting Media > Visualizer Library in the admin menu …

This takes you to the plugin’s Visualizer Library screen …

After installing the plugin, this section will be empty.

The next step is to add add charts and graphs to the library.

How To Configure The Visualizer Plugin

To add a new graph or chart to the plugin’s library, click on the ‘Add New’ button …

A gallery displaying all the kinds of graphs available will come up on your screen.

Select the graph or chart type you would like to create and click on the ‘Next’ button …

Your graph/chart type will open up in a lightbox.

The next step is to upload a CSV file containing all the data you want to populate your chart or graph with …

When creating your CSV data file, make sure that:

The screenshot below shows how to format your data as per the requirements above …

If you are unsure about how to format your data CSV, simply use the sample spreadsheet that comes with the plugin.

Next, select your data source (‘From Computer’ or ‘From Web’) in the ‘Upload CSV File’ section.

Upload CSV File From Computer

To upload the CSV file and data from your computer select ‘From Computer‘ …

Locate and select your data file and then click on ‘Open‘ …

The plugin imports the data and displays it using the graph/chart type you have selected …

Upload CSV File From The Web

To learn how to create, save and publish data to a Visualizer chart or graph using Google Spreadsheet, see the article below:

After importing the data, check that all of your information is correct (if not, click on the ‘Back’ button and reupload a new data file with the correct data), and click ‘Next‘ …

Depending on the chart or graph type you’ve selected, the plugin displays various customization options …

The plugin gives you total control of your chart or graph, and updates your display in real time …

For example, the pie chart offers many configurable options, such as:

Once you’re satisfied with how your graph or chart looks, click Create Chart

The graph or chart will be added to your ‘Visualizer Library’ section …

Note that new elements are given a unique ID displayed in a shortcode. As you will see in a moment, this lets you easily embed graphs and charts into your content …

Graphs and charts added to the Visualizer Library can be accessed by type …

After a new item has been added to the ‘Visualizer Library’, you can edit its details, duplicate it, or trash it …

Visualizer Usage

After creating a element and adding it to Visualizer, adding it to a page or post is quite simple.

First, create a new post or page (or open an existing one) …

Next, place your mouse cursor where you want to insert your visual element into the content and click on the ‘Add Media‘ button …

Click on ‘Visualizations‘ …

Find the element to be inserted into your content and click the “insert” icon …

This will place a shortcode into your content …

After you have added the item, click on Publish to publish (or update) your content …

Once the post has been published, click ‘View post’ to see the results …

Your post or page should display your chart or graph in where you have inserted the shortcode …

As mentioned earlier, the plugin also displays responsive charts and graphs for mobile devices …

As you can see, WordPress Visualizer lets you insert and customize dynamic charts and graphs in your content. You can update your data and your changes will automatically be reflected throughout your website. This makes adding interactive graph data in WordPress really efficient.

The plugin developers have created a number of tutorials you can refer to to learn how to edit, customize and use the plugin.

For additional tutorials on editing, cloning, deleting and adding data to your charts, go to the site below:

Congratulations! Now you know how to add eye-catching and mobile-responsive charts and graphs to your WordPress content.


"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie


Recommended Video Courses For WordPress Users

Keyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Using S2 Member

Learn how to set up and configure a WordPress membership site using the S2 Member free WordPress membership plugin.

More info: Using S2 Member

Recommended Video Courses For WordPress Users

How To Use Aweber

This video course shows you how to use Aweber to set up autoresponders, newsletters and opt-in subscriber forms that can be integrated with WordPress for lead generation, user engagement, and client training.

More info: How To Use Aweber

Recommended Video Courses For WordPress Users

WordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Google Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Build An e-Commerce Store With WordPress

Learn how to set up an e-commerce store on your WordPress site using e-commerce platforms like WooCommerce and Easy Digital Downloads.

More info: Build An e-Commerce Store With WordPress

Recommended Video Courses For WordPress Users

WordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Recommended Video Courses For WordPress Users

How To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

How To Add A WordPress Site To Facebook

Learn how to add your WordPress site to Facebook. Learn how to obtain and set up a free SSL (Secure Sockets Layer) certificate for your WordPress site, how to change your site protocol from "http" to "https" (secure site) and how to set up a Facebook app and import your entire WordPress site into Facebook.

More info: How To Add A WordPress Site To Facebook

Recommended Video Courses For WordPress Users

Sell Online With PayPal

This video course shows you how to set up PayPal on your website to receive payments online, with additional tips on using PayPal payment tools.

More info: Sell Online With PayPal