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

No doubt you’re familiar with the saying “a picture is worth a thousand words.” This certainly applies when you are presenting or explaining data.

Using graphs and charts is a great way to make statistical data and information more easily digestible.

You can present information using tables, but if you want your audience to try and interpret complex data with numbers, trends or relationships more easily, then graphs and charts are perfect for helping them interpret your data.

Charts and graphs help you present complex data so people can more easily understand it!

If you want to present information visually and dynamically on your WordPress site using graphs and charts, this tutorial will show you exactly how to create and add beautiful and interactive charts and graphs to your posts that:

If you plan to display visual data like bar charts, comparison graphs or trending graphs containing information that is not going to change (e.g. historical data), an easier way to add this data is to create the graphs or charts using a desktop application, convert these into images and then simply insert your image into your content.

Use WordPress Chart & Graph Plugins

If you want to easily create interactive bar charts and pie graphs in WordPress posts 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 beautiful and dynamic charts and graphs, it also lets you populate your charts and graphs with dynamic information.

Visualizer

Visualizer URL

You can install the plugin inside your WP dashboard (explained a little further below), or download WordPress Visualizer here:

http://wordpress.org/plugins/visualizer

Plugin Description

Visualizer is an easy-to-use and powerful plugin for WordPress that lets you create, manage and insert colorful and interactive charts and graphs into your WordPress posts and pages with just a few simple steps.

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 components are required.

Visualizer also provides a variety of charts optimized for your data visualization needs, including:

The plugin 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 the look and feel of your website. Various options are available for each chart that allow you to customize their settings.

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 blog or site visitors can see your charts and graphs on their mobile browsers without requiring the installation of additional plugins.

How To Install The Visualizer Plugin

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

In the Add Plugins page type in “visualizer” into the search field and click enter …

Locate Visualizer in the search results area and click Install Now

Click OK to proceed …

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 choosing Media > Visualizer Library from your admin menu …

This brings up the plugin’s Visualizer Library settings screen …

When you first install the plugin, the library contains no charts.

Your next step is to add add charts and graphs to your plugin library.

How To Configure Visualizer

To add a graph or chart to the library, click on the Add New button …

You will be presented with all of the types of charts available.

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

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

The next step is to upload a CSV file that contains your data …

When creating your CSV data file, make sure that:

The screenshot below shows how to format your data correctly …

If you are not sure how to format your data CSV, just use the sample provided with the plugin.

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

Upload CSV File From Computer

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

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

The plugin will import your data from the CSV file and display it using the graph/chart type you have previously selected …

Upload CSV File From The Web

For a tutorial that explains how to create, save and publish data to a Visualizer chart or graph using Google Spreadsheet, go here:

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

Depending on the chart or graph type you’ve selected, the plugin displays a number of customization settings and options …

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

For example, the pie chart offers various configurable options, including:

Once you’re happy with the way your chart or graph is looking, click on the ‘Create Chart’ button …

The new chart or graph will be added to the Visualizer ‘Library’ …

Note that every new element is given a unique ID displayed as a shortcode. As you will see very soon, this allows you to insert graphs and charts into your posts and pages quickly and easily …

Charts and graphs added to the Visualizer Library can be accessed by type …

After adding an item to the ‘Visualizer Library’, you can edit its details, clone it, or trash it …

Plugin Usage

Once you’ve created a chart or graph and added it to the Library, it’s very easy to insert it into a post.

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‘ …

Select the graph or chart to be inserted into your content and click on the “insert” icon …

This inserts a shortcode for the element into your content …

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

After updating your post, click ‘View post’ to see it …

Your page or post will display your graph or chart in the location you specified …

As mentioned earlier, Visualizer also displays responsive charts for mobile viewing …

As you can see, WordPress Visualizer lets you add and customize dynamic charts and graphs in your content. You can change your data and your changes will automatically be reflected throughout your site. This makes managing dynamic chart data in WordPress very easy.

The developers of this plugin have created a number of step-by-step tutorials you can refer to for ways to edit, customize and use the Visualizer plugin for WordPress.

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

Congratulations! Now you know how to insert appealing charts and graphs into your WordPress pages and posts with WP Visualizer.

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)

***