Skip to Main Content

How to create a graphics visualization tool in WordPress

Divi: the easiest WordPress theme to use

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Do you want to add bars and charts in WordPress or do you want to find out how to create a chart visualization tool in WordPress?

Visual aids like graphs, bars, pie charts are an ideal way to better present data in your posts / pages.

In this tutorial, we will show you how to create bars and graphics with the plugin Visualizer WordPress Charts On WordPress.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

The problem with bars and graphics on WordPress

There are many WordPress plugins to add bars and graphics to your content. However, most users find these tools difficult to use.

Discover our 8 WordPress plugins to create diagrams on your website

Some of these plugins even require users to add data inside a shortcode in very complicated formats to remember.

Instead of using these plugins, many users end up creating graphics in their desktop apps and converting them to an image.

This might work if you don't plan to change anything. However, an image cannot replace an interactive graph where the payload data appears when the user moves the mouse over a particular section.

The use of graphics will allow you to:

  • Add data from a data source on your computer or on the web.
  • Fill graphs, charts and bars using your data.
  • Create great, interactive, colorful, responsive graphics.
  • More importantly, it should allow you to update the data whenever you want.

That said, let's see how Visualizer WordPress Charts helps you get there.

How to create graphics with Visualizer WordPress Charts

The first thing you need to do is install and activate the plugin Visualizer WordPress Charts. For more details, see our guide step by step on how to install a WordPress plugin.

Although the free version does not do everything you need, the developers of this plugin also offer Visualizer WordPress Pro Charts which adds additional features, such as adding data using a spreadsheet as an interface and importing data from other sources.

It costs 79 $ for a single license with one year of customer support and updates regular

Note: This tutorial is based on the free version of the plugin.

After activation, you must visit the page " Media> Visualizer Library ". This is where all the graphics will be displayed.

how to create a chart visualization tool

You must click on the button « Add To add your first graph.

This will bring up a window on the screen. You will see different types of charts available. Just select the type of chart you want to add and click on the next button to continue.

See also How to add interactive maps to your WordPress website

List of graphics for WordPress

The next step is to add your data source in CSV format. If you saved your data using an Excel spreadsheet, Google spreadsheet, or any other program, then you can just export it as a CSV file.

See also How to use the WP Ultimate CSV Import plugin for importing data to WordPress

You can download or save your CSV file to your computer, and then use it to generate a graph.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

generating a WordPress graphic

Your CSV file must have the column names in the first row and the data type in the second row. The plugin supports data types: string, number, boolean, date, time, date, and time of day.

Take a look at this example file, available on Google Sheets.

Learn by discovering this article How to export user data to a CSV file

example of Google Sheet data

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

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

Adding a graph to WordPress from Google Drive Spreadsheet

If you have your data saved as a spreadsheet on Google Drive, you can add it to your chart without exporting it.

We also advise you to discover our 5 WordPress plugins to integrate Google Drive on your website

Open your data file in Google Spreadsheets and click on " File> Publish for Web ».

Publish for web google speadsheet

This will bring up a window where you should choose how you want to publish this document. You must select " Comma Separated Values ​​(.csv) In the drop-down menu.

WordPress data export mode

Do not forget to click on the button « Publish To access the published version of your data.

You will see the public URL of your spreadsheet as a CSV file. You need to copy this URL and go back to the Visualizer plugin table.

Click the " from Web And then enter the URL of your Google Spreadsheet csv file.

Google link to style sheet

As soon as you enter the URL, the plugin will search for your CSV file and display a real-time preview of your chart.

You can click on the create table button to save your graph.

Adding a graphic to an article or page

To add a table or chart to your articles and WordPress pages, you can do it as easily as you add images to articles / pages.

Cookies and WordPress: How to create, retrieve and delete discover them by clicking on this link

Create a new post / page or edit an existing one where you want to add the table. On the edit screen, click on the " Add a media Above the visual editor.

Add a new WordPress media

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

This will bring up a pop-up window with your media. You must click on the "Visualizations" tab on the left column. You will find all the graphics that you have created and saved on this website.

WordPress sample media viewing

Click the insert icon below to add it. The popup will disappear and you will see your table added to your WordPress post as a shortcode.

Add map in table form

You can now save it on your WordPress articles / pages and visit your website to see how it all works.

Edit Visualizer plugin graphics on WordPress

You can edit and edit your charts at any time. Just visit Media> Visualizer Library ". From this page, you can clone a table, delete it, or change its visual settings.

Modification of the WordPess graphics

Updating data from an existing chart without modifying the table is quite easy with Visualizer.

If you added data from a Google Spreadsheet, all you need to do to update the data is navigate to the following location: " File> Publish for the web And republish your spreadsheet. Your changes will be automatically updated.

We also invite you to consult our 10 WordPress plugins to embed Google Maps on your blog

On the other hand, if you downloaded a CSV file, you need to update the CSV file on your computer. Once done, select the chart you want to update and click on the edit table link.

In the section " Upload You just need to upload your new CSV file. The changes will be automatically updated.

Adding a chart to a sidebar

Visualizer uses shortcodes to insert graphics. Just go to " Media> Visualizer Library You will see a shortcode below each of your graphs.

Copy the shortcode and go to " Appearance> Widgets ". Drag and drop a text widget to your sidebar and paste the shortcode inside the widget.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WordPress PDO Crud

WordPress PDO Crud is a powerful plugin that will allow you to create forms, in order to perform operations of adding, modifying, deleting data on the border.

Wordpress pdo crud wordpress plugins insert tables graphics website blog form

It offers a beautiful table on which you can add your data in several ways, which will be easily defined by any Webmaster.

Its main features are: ayntaxe very simple, the support of multiple appearances, the gautomatic generation of insertion or update forms from database tables,display of particular fields, the psupports many WordPress plugins, exportation of data in pdf, xml, csv and excel, dito personalization settings, themultilingual upport, the rsearch on particular fields, omultiple deletion ptions, et more.

Download Demo | Web hosting

2. Featured Audio

Featured Audio is a great WordPress plugin that inherited the best HTML5 features, as the name suggests. This plugin allows you to adjust the volume of the selected audio for each post and page. 

Featured audio premium wordpress plugins add audio player

As features we will have among others: the song on the front page, an audio player that fully supports HTML5, support for mobile devices such as: iPhone, iPad, Android and WP7, playback of audio files stored in the WordPress media library , support for old browsers, support for audio formats: mp3, wav, ogg, etc…, multilingual, and many others…

Download | Demo | Web hosting

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

3. ChimpMate Pro

Chimpmate is MailChimp's Pop-up WordPress plugin, which will help you convert your readers into subscribers. It was designed to increase your email list without irritating visitors, with annoying pop-ups.

Chimpmate pro

It is fully customizable and you will master when and where to display pop-ups. His other features are: he fIt works perfectly on several browsers and has pmultiple scheduling options, a fully customizable layout, aresponsive customer upport, iperfect integration with WooCommerce, aExcellent cache management, perfect integration with several WordPress themes, the Multilingual support thanks to the WPML plugin, not much anymore.

DownloadDemo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here ! That's it for this tutorial. I hope it will allow you to better display maps and graphics on WordPress. Feel free to share the tip with your friends on your social networks.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
26 shares
Share22
tweet3
Save1