The DevTeam Alpha News Aggregation service has sourced the following article originally published on WP Dev Shed:
Whether you run polls, compile data, or do statistical study, creating charts and graphs is the best way to effectively present information on your WordPress website in a visual way. It allows you to turn complex datasets and findings into easy-to-understand information.
In this post we’ll show you how you can create interactive and dynamic charts and graphs and add them to your WordPress website using the free Visualizer plugin. Before we begin, let’s quickly step through some of the main reasons why you should create charts and graphs directly in WordPress instead of using chart builders or graph software.
Why You Should Use a Plugin to Make Charts and Graphs in WordPress
If you regularly create charts and graphs to add to your website then, chances are, you use a tool like Excel or Google Sheets. The problem with this approach is the workflow and process:
- Create charts (or graphs) in Excel or Google Sheets.
- Take a screenshot of the chart (or graph).
- Upload it as an image to your WordPress website.
This approach is great for anyone who creates charts occasionally. But what if you want your charts to be native to the site, have some interactivity, be mobile responsive and maybe even update from a 3rd party source in real time? If that sounds like you then it’s a better idea to use a WordPress charts and graphs plugin – like Visualizer.
Here are a few more reasons why you should consider using a plugin to make charts and graphs directly in WordPress:
- Lets you build graphs and publish them from one place. If you have to create charts and graphs on a regular basis, this will help you save a lot of time and improve your workflow.
- Allows you to easily open up a project and make quick changes and modifications. When working with Excel or Google Sheets, you’d have to go back and find the file you were working on, make the required changes, take a new screenshot, and upload it to your website again.
- Access to interactive features to make your charts and graphs more interesting. You simply can’t add interactive elements to images or screenshots.
- Makes it easier to collaborate with other users. For example, if you need authors or editors to review the graph (and make changes or additions), it’s much easier if everyone is able to modify the same graph so you don’t have multiple versions floating around.
Simply put, a WordPress charts and graphs plugin helps simplify your workflow and comes with most of the features you’ll need to add engaging (and interactive) charts to your WordPress website.
Introducing Visualizer: Tables and Charts Manager for WordPress
Themeisle’s Visualizer: Tables and Charts Manager for WordPress is a lightweight plugin that enables users to create charts, graphs, and tables directly from their WordPress website.
Visualizer WordPress Plugin
The plugin features a user-friendly interface that allows users to create, manage, and embed interactive visuals into posts and pages. Out of the box, Visualizer comes with eight different chart types:
- Pie/donut chart
- Line chart
- Area chart
- Geo chart
- Bar chart
- Column chart
- Scatter chart
You’ll be able to customize the tables, charts, and graphs you create by changing their colors, adding or hiding text, and using different fonts. In addition to this, every chart has its own options that allow you to customize its look and feel.
In addition to this, you can also change the type of graph that’s displayed on your website’s front-end. For example, you can easily change a pie chart into a line chart just by clicking the edit button and choosing the type of chart you’d like to switch to. The tables, charts, and graphs you create with Visualizer are rendered using HTML5 and SVG technology. In other words, they’re fully responsive and cross-platform portable.
The Visualizer plugin also has a premium version, Visualizer Pro, which starts at $59 for a single site license. The premium version of the plugin unlocks additional chart types (gauge chart, candlestick chart, timeline, combo, polar area, and radar/spider chart) and offers advanced features including:
- Giving users editing permissions.
- Private graph and chart building.
- Automatically sync charts with your online file.
- Access to the live editor for quick and easy data editing.
- Importing data directly from other charts.
Now that we know what the Visualizer plugin is and what you can do with it, let’s walk through a quick step-by-step tutorial explaining how to get started creating charts and graphs in WordPress.
How to Create Charts and Graphs in WordPress Using Visualizer
Visualizer is one of the best (and most intuitive) plugins available for creating tables, charts, and graphs in WordPress. Here, we’ll take you through the step-by-step tutorial of creating visually-appealing charts and graphs and displaying them on your site’s front-end.
Step #1: Install and Activate the Plugin
The first step is to install the Visualizer plugin to your WordPress website. Since this is a free plugin, you can do this directly from within the admin panel by heading over to Plugins > Add New.
Once you’ve installed the plugin, click the Activate button. You’ll notice that a new menu item is added to the sidebar menu called Visualizer.
Step #2: Add a New Chart
Once you’ve installed the Visualizer plugin, click on the Visualizer menu item from the admin panel to access the Visualizer Library.
From here, click on the Add New button to begin creating your first chart.
In the pop-up screen, you’ll see some different chart types to choose from.
Click on the radio button next to the chart type you’d like to add to your WordPress website. For the purpose of this tutorial, we’ll demonstrate by creating a simple column chart. Click on the Next button at the bottom of the screen to proceed.
Step #3: Import Data Into the Chart
In this step, we’ll show you how you can import data and add it to your table, chart, or graph. Visualizer automatically adds sample data to your chart so that you can see how it would look on the front-end.
To replace the dummy data with your own, you can pick from one of the following data import methods:
- Import data from file, URL or other chart (available with the Pro version)
- Import from WordPress (available with the Pro version)
- Import from database (available with the Pro version)
- Import data manually
For the purpose of demonstration, we’ll import a dataset from a CSV file. To do this, click the Choose File button under the Import data from file option and look for the CSV file on your desktop. Press the Import button to continue.
In the left panel, you should be able to see a preview of what the new imported data will look like. If you need to make changes to your dataset, you can update your CSV file and re-import it.
Pro-tip: If you are not sure how to format the data in your CSV file, you can download an example CSV file from the plugin. Once you have selected the chart type there will be a text link to the example CSV in the right hand panel of the popup (as shown above). Click on this to download the relevant CSV file example.
Step #4: Customize the Chart
Now that you’ve selected a chart type and imported your dataset, you can customize your table, chart, or graph. Here’s how:
From the same screen, you’ll see a link called Advanced directly under the data import options. Click on the link to reveal the customization options that are available to you for the type of chart you chose.
Broadly speaking, you should see general settings (chart titles, fonts, legends, tooltips, and animation), frontend actions, manual configurations, and chart size and placement settings. Depending on the type of chart you chose to create, you might see slightly different options under the Chart Settings section.
One of the standout features you get with Visualizer is its ability to let you enable front-end options for your charts. You can access these settings by heading over to Chart Settings > Frontend Actions > Actions.
The available options include:
- Print. To enable printing the chart or table.
- CSV. To enable downloading the data as a CSV directly from the front-end.
- Excel. To enable downloading the data as an Excel spreadsheet.
- Copy. To enable copying the data to the clipboard.
When you’ve customized your chart and enabled all of the front-end options you’d like to make available, click the Create Chart button.
Step #5: Add the Chart Shortcode to a Page or Post
Once you’ve created the chart, you’ll automatically be redirected to the Visualizer Library screen you started from. You should be able to see the chart or graph you just created. The next step is to add the chart to your site’s front-end. For this, you’ll have to copy the chart’s shortcode. Here’s what you need to do:
You should be able to see the chart shortcode in the bottom left corner of the chart directly below the preview. Simply copy it to your clipboard.
Next, create a new post or page where you’d like to add the chart. (Alternatively, you can open up an existing post or page.) Simply paste the chart shortcode wherever you’d like to display the chart.
Click the Preview button to preview your post or page on your site’s front-end. It should look something like this:
You should take a moment to make sure everything works properly (for example, animations and front-end options). If everything looks good, you can go ahead and Publish the post or page.
However, if you need to make modifications to your table, chart, or graph, simply head back to Visualizer > Chart Library from the admin panel and edit your chart. You can further customize the graph, enable (or disable) options, change legend positions, and even replace the dataset.
Since the chart’s shortcode remains the same even after editing, you won’t have to go back to the post or page and update it manually. Any changes you make to the chart from Visualizer will automatically reflect on your site’s front-end.
Interactive Chart Examples
Here are some live interactive examples of the tables, charts, and graphs you can create using the free version of the Visualizer plugin:
Pie Chart Demo
Geo Chart Demo
Column Chart Demo
Line Chart Demo
Area Chart Demo
Bar Chart Demo
Scatter Chart Demo
Data Table Example
Excel or Google Sheets might not be the most efficient way to add tables, charts, and graphs to your WordPress website – especially if you need to do this frequently. Instead, we recommend using the free Visualizerplugin which lets you:
- Create, edit, and manage all of your tables, charts, and graphs without having to leave your WordPress website.
- Deliver better user experiences by embedding interactive, visually-appealing charts into your posts and pages.
- Easily customize the charts and graphs you create to match your site’s branding.
- Enable front-end options that allow visitors to print charts, download datasets (as CSVs and Excel spreadsheets, and copy data directly to their clipboard.
And, whenever you’re ready to take things to the next level, you can upgrade to Visualizer Pro to unlock additional chart types and access advanced functionality. What are some of the different types of charts and graphs you need to add to your WordPress website? Let us know by commenting below.
Learn more about WP Dev Shed by visiting their website.