wordpress-visualizer-charts-and-graphs-large

How to use the WordPress Visualizer Charts and Graphs plugin

Abbey Fitzgerald's Layout avatar

Data is key to website user engagement, and charts are a great way to present data. By showing data in an easy-to-interpret format, it will be more understandable and visually appealing for your users. There are different types of charts you can use, and some types represent certain types of data better than others. The good thing is that various types of charts can be displayed on your WordPress website quite easily with the help of a great plugin called Visualizer WordPress Charts and Graphs Lite. Options include pie charts, line graphs, area charts, map charts, and much more.

add-charts-and-graphs-pinterest

wordpress-charts-and-graphs-lite

With this plugin, you can even add data from a single data source to populate the charts. The charts are interactive, colorful, and look great on mobile devices with minimal effort. The data can be updated easily to populate a new chart, instead of having to constantly update graphics when data changes.

Not sold on the plugin route? For a DIY approach, try using D3.js, or Data-Driven Documents. Follow our tutorial here!

Creating a chart for WordPress

Before installing a new plugin, remember that it is strongly advised that any new plugins are tested on a development copy of your website. First, WordPress Charts and Graphs Lite will need to be downloaded and activated. If you search for it, the option will appear. Make sure it is activated, and then the chart building can begin!

wordpress-visualizer-charts-and-graphs-activate-plugin

You may notice that there is a Pro version. We will be concentrating on the Lite version for this tutorial, but if there are additional features you’d like to use, they may be available in the Pro (paid) version.

Additional tools you’ll need: Excel or Google Spreadsheets

Before getting started, it’s worth mentioning the various file options for importing chart data to your site. You can either use Excel to save a file locally to your machine or use Google Sheets to save your data in the cloud. For the first chart example, we’ll create a local file with Microsoft Excel.

Formatting data in the CSV file

The first step is to enter the chart data in spreadsheet form. How the data is formatted is crucial for the chart data display. If it is not formatted correctly, it may not appear as intended or may not be visible at all. It’s important that the file has column names in the first row and the data type in the second row. Data can be entered in these types: string, number, date, time, time of day, and boolean values.

Here is an example with the correct data format. After data was entered, it was saved as a .csv.

wordpress-visualizer-charts-and-graphs-excel-data-full-setup

A .csv is a “Comma Separated Value” file. This allows data to be saved in a table structured format. If you open the .csv in a text editor, you will see how commas separate the values.

wordpress-visualizer-charts-and-graphs-csv-in-text-editor

Create the new chart

Creating new charts is done by going to Media > Visualizer Library. You’ll need to click on the “Add New” button to add your first chart. This will bring up a pop-up window on screen. There will be multiple chart types to choose from. Select the desired type and click “Next.”

wordpress-visualizer-charts-and-graphs-area-chart-choice

The spreadsheet is what will need to be chosen so that the accurate data displays. You’ll see “From Computer” or “From Web.” “From Computer” is used for the Excel file that was saved as a .csv file.

wordpress-visualizer-charts-and-graphs-chart-choices

When the correct file is selected, you’ll see that the chart is populated with the correct values. Choose “Create Chart” to make it official. This new chart will now be found in the library.

wordpress-visualizer-charts-and-graphs-chart-on-page

Changing the chart by updating data in the .csv file

Data changes all the time, so chances are the file will have to be updated from time to time. When the chart needs to be updated with new data, changing data is as simple as updating the values in the .csv file and uploading a new one. When the values have been updated, be sure to save the .csv file.

wordpress-visualizer-charts-and-graphs-edit-chart

Next, go to the Visualizer Library and click the “Edit” option. Navigate until you see the option to upload the file from the computer. Click “From Computer” and then navigate to the file and choose it. The values will update and the chart reflects the updated data.

wordpress-visualizer-charts-and-graphs-updated-sales-data

Adding the chart to a page (or post)

The process is very much like adding an image. Select a page or post to edit and there will be an “Add Media” button on the left. In the “Insert Media” column, there will be a Visualizations option where the active charts will be displayed.

wordpress-visualizer-charts-and-graphs-chart-library

On the chart, there will be a small arrow. By selecting that, the chart will be added to the post with a shortcode. Preview and you will see how the chart looks.

wordpress-visualizer-charts-and-graphs-visualizer-shortcode

Using Google Sheets to create a chart

Google Sheets are very popular. The cloud makes it very convenient to access spreadsheets. Many enjoy this alternative because when data is saved in this spreadsheet on Google drive, it can be added to the chart without having to export it and find it on the computer’s hard drive. It can be formatted into a .csv also, just like Excel.

When data is in the Google Sheet, choose File > Publish to the web.

wordpress-visualizer-charts-and-graphs-google-sheet-publish-to-web

To get the proper .csv formatting choose “Comma-separated values (.csv)” from the dropdown. Then choose “Publish.”

wordpress-visualizer-charts-and-graphs-google-sheet-save-csv

You’ll see a long URL, which is used for the chart to reference the numbers to display. Simply copy this URL and go back to the Visualizer charts.

wordpress-visualizer-charts-and-graphs-google-sheet-csv-url

Create a new chart

Just like the first example,  click the “Add New” button to add a new chart. Select the new chart type and choose “Next.”

wordpress-visualizer-charts-and-graphs-pie-chart-selection

Click on the “From Web” button and then paste the URL of your Google Sheets .csv file. The preview will update with the new chart data.

wordpress-visualizer-charts-and-graphs-enter-url-pie-chart

Click on the “Save Chart” button to save your chart.

wordpress-visualizer-charts-and-graphs-new-pie-chart

With some simple spreadsheet data, it’s easy to create a chart to display on your WordPress site. With a variety of available chart designs to choose from, they’re easily updatable, making them dynamic and accurate. This solution offers modern, legible designs that can be viewed on all devices.

Comments ( 4 )

  1. Vijay

    April 3, 2017

    Hi,
    Is there any way to use Custom Field data as arguements

    I am using Wp-toolset

    Vijay

    • Android

      July 26, 2017

      @Vijay try this code to use custom field:
      types_render_field( "my-checkboxes", array( "separator" => ", ", "id" => $other_post_ID ) )

  2. Jessie

    August 20, 2017

    It is very nice content and very useful to me..

  3. Prosperity

    April 4, 2018

    Well this gonna do some real good

  4. Michael Pachler

    August 15, 2018

    Can you add them to pages not just posts?

Join the discussion