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

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.

  📝 Note: 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).

 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".

 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.

 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.

 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.

 Export a Chart

Exporting a Chart is a simple operation. Follow the steps below to accomplish the cloning process:

• Step 1: Navigate to Dashboard > Visualizer > Chart Library.
• Step 2: Click on the exporting ( ↪️ ) icon.
• Step 3: Check the .csv file in the download bar.

⚙️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:

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

• dedicated documentation: How can I populate data from Google Spreadsheet

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

• dedicated documentation: How to automatically sync charts with online files

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

• dedicated documentation: How to use 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

• 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 Line Chart.

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

📌 GoogleChart: Here is a dedicated documentation about the Bar Chart.

📝 Note: The free version does not offer the ChartJS rendering engine. You can find it in the PRO version.

 Charts of the Pro Version

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

• 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.

• 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.

It is possible, using Visualizer, to represent trendlines in the Scatter Chart, using the manual configuration ( Edit Chart > Settings > Manual Configuration ), by adding this code in the field: 

{"trendlines": { "0": {} }}

{"trendlines": { "1": {} }}

The  number within the code ( 0 and 1 ) represents the set of data in the Scatter Chart. You can replace it according to your set.

💡Result

• 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.

• 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.