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 is a lot of WordPress plugins to add bars and graphs to your content. However, most users find these tools difficult to use.
So much to see... 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
Please 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.
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
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.
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
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 ».
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.
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.
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.
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.
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.
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.
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 appearance and to optimize the handling 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 frontend data addition, modification, deletion operations.
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, thexportation 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 which 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.
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
3. ChimpMate Pro
Chimpmate is the WordPress Plugin from MailChimp Pop-up, which will help you convert your readers into subscribers. It was designed to grow your email list without irritating visitors with annoying pop-ups.
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 many WordPress themes, Multilingual support thanks to the WPML plugin, andnot much anymore.
Download | Demo | 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.
- How to display all your WordPress publications on a single page
- How to use categories and labels effectively on WordPress
- How to add a WhatsApp button on a WordPress blog
- How to find a sponsor and monetize your blog? : Guide
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.
...
