Visualizer: Charts and Graphs Documentation
NOTE: If you purchased Visualizer Pro then you need to have both Visualizer Free & Pro activated to take advantage of the plugin's pro features.
WordPress Visualizer plugin is a simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages.
The plugin 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.
How to Install
Firstly, make sure you have the free version of Visualizer installed. To install it, you can simple search for "visualizer" in the search bar when you are searching for plugins within wordpress.
Once the free visualizer plugin is installed, you also need to install the pro-versions, which adds the new features that are only available to pro-users.
Once you have purchased the plugin go to Purchase History to download the Visualizer: Charts and Graphs plugin. After downloading the plugin, navigate to Plugins > Add New > Upload, in your WordPress dashboard. Now, click the Choose File button, select the archive of your plugin from your local computer and press the Install Now button. In few seconds, WordPress will upload and extract the plugin archive for you. All you need to do next is to press the Activate link under the message for successful plugin installation.
Here's what this would look like:
Don't forget to activate the license key to unlock the pro features of the plugin and get the automatic updates directly in your dashboard.
Check this video to set up the plugin
14 Chart Types
The plugin provides a variety of charts that are optimized to address your data visualization needs. It is line chart, area chart, bar chart, column chart, pie chart, geo chart, gauge chart, candlestick chart, scatter chart, table chart, timeline chart, combo chart, radar chart and polar area chart. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no extra plugins are required. Adding these charts to your page can be done in a few simple steps.
Flexible and Customizable
Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website. You can use Google Chart Tools with their default setting - all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel.
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. Your users will never have to mess with extra plugins or any software. If they have a web browser, they can see your charts.
Creating New Charts
The following video shows you the easiest way to create and publish a new chart:
Click on the "Visualizer" menu, click "add a chart", then you can choose the type of chart you need and customize it accordingly.
There are multiple ways to populate the data of your charts, including:
- Importing CSV file from your computer.
- Importing CSV file from web/Google Spreadsheet.
- Manual data editor
- Importing data from other charts
You can use any of the given methods to create a chart.
The CSV file must use commas as column delimiters and be enclosed with double quotes. The first line of the file should contain the series titles. The second line of the file must contain the type of series’ data. You may use one of six data types: string, number, boolean, date, time date, and time of day. The other lines need to contain data values according to the data type chosen. If you are unsure about how to format your data CSV then every chart contains a demo CSV file which you can download to see the format.
Depending on the chart type you selected, you will have a different set of chart options available. You can amend these options by clicking on Advanced, and view the changes in the chart preview section. When you setup chart options, click on the "Insert Chart" button located at the bottom right corner of the popup. This will save your settings and the shortcode, [visualizer id="xxx"], will be inserted into your post.
Save your post and go to the front end view. Your new chart will be presented within the post.
To edit a chart you need to go to the charts library (on the left menu). Once you open the library, you will be able to find the chart that you need. When you find a chart, click on Edit icon. After you click on Edit icon, the editor popup will appear. This popup wizard will walk you through all screens of general chart creation process, but this time instead of creation chart you will edit it. After you select chart type (or leave it as it is), upload data (or skip it) and adjust chart options, click on Save Chart button in the right bottom corner of the popup.
You can also clone or delete your charts. If you click on Clone icon, the chart will be duplicated and appear in at the beginning of the list. After cloning a chart, you can do whatever you need with it. And if you click on Delete icon, the chart will be deleted from the database.
Importing Data from Google Spreadsheet
Go to your Google Drive and create a new spreadsheet document. The first line of the spreadsheet should contain the series titles. The second line of the spreadsheet must contain the type of series’ data. You may use one of six data types: string, number, boolean, date, time date, and time of day. The other lines need to contain data values according to the data type chosen.
After you enter your data, save the spreadsheet and click on File > Publish to the Web… menu item. In the new dialog, you need to click the Start publishing button. A link to the published item appears in the publishing dialog. Choose CSV (comma-separated values) type and select the box below Get a link to published data sub header and copy link to the published spreadsheet at the text area below.
After you've published your spreadsheet, create a new chart or edit existing one and go to the second step, which allows you to upload your CSV file. Click on the From Web button. Then enter the published link into the dialog box and click Ok. After you have entered the link, it will be automatically uploaded and a chart preview with the data will be updated. Now your chart will use this spreadsheet as data source. Each time when the chart will be displayed, it will fetch data from this spreadsheet. Don’t forget to republish your spreadsheet each time you make any changes to it.
Check our video tutorial to import and edit the data in Visualizer
- How can I create a chart?
- How can I populate data from Google Spreadsheet?
- Visualizer: How to populate chart series and data dynamically
- How to automatically sync charts with online files
- How to create charts from your WordPress posts
- How can I edit a chart?
- How to format chart series values
- How can i edit the data manually
- How to enable frontend action buttons
- How to use Google Visualization variables
- How can i import content from another chart
- How can I highlight a single bar?
- How to export a chart
- Manual Configuration
- How can I clone a chart
- How can I delete a chart
- How to change colour of graphs in Visualizer
- Install and use the pro version of Visualizer
- How to change width and height of a chart in Visualizer
More guides for different options are available here for Visualizer plugin - https://docs.themeisle.com/category/657-visualizer