Visualizer: Charts and Graphs Documentation

Visualizer is a powerful tool that can easily be used to create, manage and embed interactive charts into your WordPress posts and pages. 

The plugin uses Google Visualization API to render charts, which supports:

  • πŸ–‡οΈ cross-browser compatibility
  • πŸ“± cross-platform portability to iOS and Android

πŸ“© Download and Install 

To download and install the Visualizer Plugin, make sure you follow the steps below:

1
Navigate to Visualizer's page to check the plans and view the demo.
2
Navigate to the WordPress Dashboard > Plugins.
  • Click on Add New.
  • Type in the Search Bar "Visualizer".
  • Click on the Install Now button.

3
Click on the Activate button, to start using the plugin.

πŸ“ Note: These instructions are just for Visualizer. To install purchased Visualizer Pro, make sure you follow these instructions.


🧰 Managing the Charts

There are many available  operations with Charts and Graphs, within the Visualizer plugin. This section will present how a user can:

Create a Chart
Delete a Chart
Customize a chart
Display a Chart
Clone a chart
A

 Create a Chart

There are two ways to follow, in order to create a chart:

Block Editor

  • Step 1: Situated on a page / post, click on the βž• button, to Add a new block.
  • Step 2: Type "Visualizer" and click on the specific icon.
  • Step 3: Click on Create a new chart.  
  • Step 4: You have been redirected to the Visualizer menu:
    • Click on Add New.
    • Choose a library and a chart.
    • Once you're done, click on Next.
    • Customize the Chart as you wish.

    Before creating the chart, please note that by default, the plugin saves an image of the chart in your Media Library. The purpose of this is to be available for download in case you enable it in the front-end actions, and for rendering the chart as an image on the AMP version of the page, which is done automatically. To prevent creating a copy of the chart as an image in your media library, just uncheck this box in the chart settings(click for image). Please note that if AMP is enabled on your website, this option is automatically turned on.

    • When everything is ready, click on Create.

Visualizer Library

  • Step 1: Navigate to Dashboard > Visualizer > Chart Library.
  • Step 2: Click on Add new.
  • From this moment, follow the steps described above, in order to create a new chart.

πŸ“  Note: The settings are different for every distinct chart and also, for every library: DataTable, GoogleCharts, Charts.js (eg. the settings from Table - GoogleCharts are not the same as the settings from Table - DataTable).

B

 Delete a Chart

The process of deleting a chart is quite simple:

  • Step 1: Navigate to Dashboard > Visualizer > Chart Library.
  • Step 2: Pick the chart that you want to delete.
  • Step 3: Click on the πŸ—‘️ icon.
  • Step 4: A pop-up will appear, asking if you are sure that you want to delete the chart. If you are, click on "OK".

C

 Customize a Chart

In order to customize a chart, you need to follow these steps:

  • Step 1: Navigate to Dashboard > Visualizer > Chart Library
  • Step 2: Select the chart that you want to customize.
  • Step 3: Click on the πŸ–ŒοΈ icon.
  • Step 4: Go into the Settings panel and start making some changes.

D

 Display a Chart

There are two ways of displaying the charts created with Visualizer:

  • Using the Shortcode block.
    • Step 1: Navigate to Dashboard > Visualizer > Chart Library.
    • Step 2: Click on the βœ‚οΈ icon, to copy the specific shortcode.

    • Step 3: Choose one of the posts / pages where you want to add a graphic / chart.
    • Step 4: Click on the βž• button, to Add a new block.
    • Step 5: Type "Shortcode" into the search bar and select the specific icon.
    • Step 6: Paste the code of the graph that you copied in Step 2.

    • Step 7: Update the page and click on View Post.

  • Using the Visualizer block.
    • Step 1: Navigate to the desired Page / Post where you want to add the chart / graph.
    • Step 2: Click on the βž• button, to Add a new block.
    • Step 3: Type "Visualizer Chart" into the search bar.
    • Step 4: Choose one of the charts from the library.
    • Step 5: Save the changes and click on Done.

πŸ“ Note: On AMP there is an extra feature that renders chart as image. In this way, the mobile display of the charts will not be affected when switching devices.

E

 Clone a Chart

Cloning a Chart is as intuitive as customizing one. Follow the steps below to accomplish the cloning process:

  • Step 1: Navigate to Dashboard Visualizer Chart Library.
  • Step 2: Click on the clone icon.
  • Step 3: Enjoy the new chart.


βš™οΈAvailable Data Sources of Charts

One of the most important features of the Visualizer plugin is that it can be a time-saver, due to the import function. 

Below is a table with the import possibilities and the plans that include them:

Type Free Personal Developer
Import from a local uploaded .csv file
 Yes
 Yes
 Yes
Import from an online resourse - URL (.csv file)
 One-time
 One-time/Live/Each hour/12 hours/day/3 days
 One-time/Live/Each hour/12 hours/day/3 days
Import from an online resource - URL (JSON file)
 One-time
 One-time/Live/Each hour/12 hours/day/3 days
 One-time/Live/Each hour/12 hours/day/3 days
Import from other charts (previously created )
 No
 Yes
 Yes
Import from WordPress 
 No
 One-time
 One-time/Live/Each hour/12 hours/day/3 days
Import from database
 No
 One-time 
 One-time/Live/Each hour/12 hours/day/3 days
Manual Data
 Text/Simple
 Text/Simple/Excel 
 Text/Simple/Excel 

Visualizer: Charts and Graphs works well with Google Spreadsheet, having the option of populating data from it.

It gives the user the possibility to reflect upon the changes made through time by syncing the charts.

Due to the great integration with Google, the Visualizer plugin allows for using Google Visualization variables.

Another interesting fact is that Visualizer engages the public, by allowing for many operations, such as:

β†’ How to add animations to charts in Visualizer
β†’ How to change the color of Graphs in Visualizer
β†’ How to change the width and height of a chart in Visualizer
β†’ How can I disable the legends in Charts in Visualizer
β†’ How can I add a title to the Chart


πŸ“‚Charts Library

In order to access the Charts Library, navigate to Dashboard > Visualizer > Chart Library.

To prevent a crowded library, you can choose a smaller number of charts to appear on each page:

  • Click on Screen Options on the top right side of the screen.
  • Add your preferred number.
  • Click Apply.

The charts can also be filtered based on type, used library, creation date:

  • Choose your preferred options.
  • Click on Apply Filters.
  • To reset the search, just click on Clear Filters.

There are 15 chart types available in the Visualizer Library, optimized to address your data visualization needs, split into the Free Version and Pro Version, including:

  • the popular DataTables library
  • 12 Google charts
  • 6 charts from Chart.js
Charts of the Free Version
Charts of the Pro version
A

 Charts of the Free Version

  • Table Chart - organizes information according to the rows and columns.

πŸ“Œ Here is a dedicated documentation about the Table Chart.


  • Pie / Donut Chart - shows the relational proportions between data.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Pie / Donut Chart.


  • Line Chart - very useful when it comes to determining how statistics vary from month to month.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Scatter Chart.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Scatter Chart.


  • Area Chart - displays tips when hovering over points.

   πŸ“Œ GoogleChart: Here is a dedicated documentation about the Area Chart.


  • Geo Chart - represents a map of a country / continent / region.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Geo Chart.


  • Bar Chart - used to show the comparison of multiple data sets side by side.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Scatter Chart.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Scatter Chart.


  • Column Chart - displays tooltips when the user hovers over the data.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Column Chart.


  • Scatter Chart - contains a line chart with the x-axis changed to a linear axis.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Scatter Chart.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Scatter Chart.


  • Bubble Chart - used to display three dimensions of data at the same time.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Scatter Chart.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Scatter Chart.


B

 Charts of the Pro Version

We also offer extra charts for users of the Pro Version.

  • Gauge Chart - is represented by a gauge with a dial.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Gauge Chart.


  • Candlestick Chart - used to show an opening and closing value overlaid on top of the total variance.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Candlestick Chart.


  • Timeline Chart - depicts how a set of resources are used over time.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Timeline Chart.


  • Combo Chart - lets the user render each series as a different marker type.

πŸ“Œ GoogleChart: Here is a dedicated documentation about the Combo Chart.


  • Polar Chart - used for the comparison data, showing a scale of values for context.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Polar Chart.


  • Radar Chart - shows multiple data points and the variation between them.

πŸ“Œ Chart.js: Here is a dedicated documentation about the Radar Chart.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.