Visualizer: Charts and Graphs Documentation

NOTE: If you purchased Visualizer Pro then you need to have both Visualizer Lite & 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

After you have purchased the plugin go to Purchase History to download the Visualizer: Charts and Graphs Lite 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.

After that, you need to install Visualizer Charts and Graphs which is the Pro-add, and gives you many features which makes creating new maps easy.

12 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 and combo 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.

HTML5/SVG

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

A chart can be created from two places: the post editor and the charts library. The process of chart creation from both places is identical. This section will describe the chart creation process via the post editor. Please complete the following steps to create your chart:

From the post editor click on the Add Media button. Click on Visualizations from the left menu, and then click on Create New link. Select the chart type that best suits your data visualization needs and click on the Next button located near the bottom right corner of the popup.

Now there are four ways to create a chart, which are:

  • Importing CSV file from your computer.
  • Importing CSV file from web/Google Spreadsheet.
  • Live Chart Editor, which is exclusive to the Pro version.
  • Importing data from other charts, which is also exclusive to the Pro version.

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.

Editing/Cloning/Deleting Charts

To edit a chart you need to go to the charts library, which could be found by following route: Media > Visualizer Library. Once you open the library, you will be able to find a chart what 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 from Media > Visualizer Library. 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.