“UberChart” Documentation by “DAEXT” v1.19

“UberChart”

Created: 13/04/2019
By: DAEXT
Email: support@daext.com

Thank you for using UberChart. If you have any questions that are beyond the scope of this help file please contact us via email or with the contact form available in our CodeCanyon Profile.

Table of Contents

  1. Video Tutorials
  2. Installation (Single Site)
  3. Installation (Multisite)
  4. Charts Menu
  5. Import Menu
  6. Export Menu
  7. Options Menu
  8. Include a chart in a post
  9. Duplicate a chart
  10. Set a time format
  11. Load a model
  12. Import the default models
  13. Convert a chart to a model
  14. Convert a model to a chart
  15. Plot a dataset on the Y2 axis
  16. Create scatter and bubble charts
  17. Credits
  18. FAQ

A) Video Tutorials

This video series covers the functionalities of the UberChart plugin.

Please note that not all the aspects and implications are covered in this section, it's recommended that you read the entire documentation (FAQ included) before using this plugin in a production environment or asking for support to the plugin author.

B) Installation (Single Site)

With this procedure you will be able to install the UberChart plugin on your WordPress website.

  1. Visit the Plugins -> Add New menu
  2. Click on the Upload Plugin button and select the zip file you just downloaded
  3. Click on Install Now
  4. Click on Activate Plugin

C) Installation (Multisite)

This plugin supports both a Network Activation (the plugin will be activated on all the sites of your WordPress Network) and a Single Site Activation in a WordPress Network environment (your plugin will be activated on a single site of the network).

With this procedure you will be able to perform a Network Activation:

  1. Visit the Plugins -> Add New menu
  2. Click on the Upload Plugin button and select the zip file you just downloaded
  3. Click on Install Now
  4. Click on Network Activate

With this procedure you will be able to perform a Single Site Activation in a WordPress Network environment:

  1. Visit the specific site of the WordPress Network where you want to install the plugin
  2. Visit the Plugins menu
  3. Click on the Activate button (just below the name of the plugin)

D) Charts Menu

The Charts Menu allows you to create and customize your charts with 240 options per chart and 30 options per dataset. The main source of information when you are using this menu should be the tooltips associated with each option. To activate the tooltip of an option simply hover over the black question mark icon.

Here I'm going to introduce you to the various sections available in this menu:

Preview

This section should be used to preview the chart, so you can verify every aspect of the chart during its creation. Note that each time this section is opened or refreshed through the green button the chart is also saved (or updated in case you are editing an existing chart.

If the chart can't be generated you will receive the message "Preview not available" instead of the actual rendering of the chart. This message is generated when one of these two conditions occurs:

If you receive the "Preview not available" message please review each input field you recently modified and correct the errors. If this message is generated by the validation system you can receive more details about the issue by clicking the Add Chart button or the Update Chart button.

Common

This section includes unrelated common options. Please refer to the tooltips on the right of the options for more details.

Title

This section gives you the ability to display or not the title of the chart and to customize the aspect of the title.

Legend

This section gives you the ability to display or not the legend of the chart and to customize the aspect of the legend.

Tooltip

This section gives you the ability to display or not the tooltips of the chart and to customize the aspect of the tooltips. Tooltips are displayed when the user hover the mouse cursor over data points.

Animation

This section should be used to enable, disable or customize the animations performed by the chart.

Misc

In this section you can find unrelated uncommon options. Please refer to the tooltips on the right of the options for more details.

X Scale (Common, Grid Line, Title, Tick, Options, Time)

The X Scale should be used in the following situations:

It's recommended to disable the X Scale (by using the X Scale Common -> Display option) with the following types of chart:

Y Scale (Common, Grid Line, Title, Tick, Options, Time)

The Y Scale should be used in the following situations:

It's recommended to disable the Y Scale (by using the Y Scale Common -> Display option) with the following types of chart:

Y2 Scale (Common, Grid Line, Title, Tick, Options, Time)

The Y2 Scale should be used to represent the values of the data points of a dataset (or multiple datasets) that has the Plot Y2 option enabled.

It's recommended to disable the Y2 Scale (by using the Y2 Scale Common -> Display option) with the following types of chart:

RL Scale (Common, Grid Line, Title, Tick, Options, Time)

The RL Scale should be used with the Radar and Polar Area chart types.

It's recommended to disable the RL Scale (by using the RL Scale Common -> Display option) with the following types of chart:

Datasets

This section, available on the right side of the menu, should be used to customize the options associated with the datasets.

To modify the options associated with a dataset follow this procedure:

  1. Click the Data spreadsheet on a specific row (each row is associated with a dataset)
  2. Customize the options in the Dataset section
  3. Click the Update button to save your changes

To modify the option associated with all the datasets of the chart please follow this procedure:

  1. Click the Data spreadsheet on a specific row (each row is associated with a dataset)
  2. Customize the options in the Dataset section
  3. Click the Update and Globalize button to apply the options of the edited dataset to all the datasets of the chart (all the options except Label, which is the name of the specific dataset, will be globalized)

Fore more information on the two procedures above please watch the Modify the properties of the datasets video.

E) Import Menu

The Import Menu should be used to import collections of charts previously stored inside XML files generated with the Export Menu.

Import your charts with this procedure:

  1. Visit the UberChart -> Import menu
  2. Click the Choose File button and select the XML file that includes the charts
  3. Click the Upload file and import button to start the process
  4. Verify the number of charts actually imported by reading the message provided at the end of the procedure

F) Export Menu

The Export Menu gives you the ability to generate an XML file with included all your charts.

Export your charts by following this procedure:

  1. Visit the UberChart -> Export menu
  2. Click the Export button
  3. You can now access to the generated XML file from your downloads folder

G) Options Menu

The Options Menu includes general plugin options. Please refer to the tooltips on the right of the options for more details.

H) Include a chart in a post

Please follow this procedure to include a chart in a post with the TinyMCE editor:

  1. Edit a post, page or custom post type
  2. Select the Visual mode
  3. Click the UberChart button
  4. Search or select a chart with the provided select box
  5. Click the Add Chart button

Please follow this procedure to include a chart in a post with the UberChart block:

  1. Edit a post, page or custom post type
  2. Select the Visual Editor mode
  3. Add the UberChart block
  4. Search or select a chart with the provided select box

Note that you are free to include multiple charts in the same post and also to include the generated shortcodes inside custom containers, so that you can achieve your desired layout for your charts.

I) Duplicate a chart

If you purpose is to experiment new changes on an existing chart you should considered creating a backup copy of the chart by using the Clone button.

To duplicate a chart please follow this procedure:

  1. Visit the UberChart -> Charts menu
  2. Click on the Clone button associated with the chart that you want to duplicate

J) Set a time format

Inside the X Scale Time section available in the UberChart -> Charts menu you have the ability to define a time format that will be used when the X Scale is a time scale (in other words when the X Scale Common -> Type option is set to Time).

When you create a new format please use the tokens accepted by Moment.js, here you can find a list of common supported formats:

K) Load a model

If you want to save the time required to configure a chart it's a good idea to start from a model.

Follow this procedure to load a model:

  1. Create or edit a chart with the UberChart -> Charts menu
  2. Click the Load Model select box
  3. Search for a model or select a model
  4. The data of the current chart will be replaced with the data of the loaded model
  5. Use the Data spreadsheet and the Rows and Columns input fields to alter the data points
  6. Before previewing or publishing your chart make sure that the loaded model doesn't apply any limit to the axes configuration that is not compatible with the new data points

For more information on the procedure please watch the video Create a chart from a model.

L) Import the default models

Inside the main plugin folder you will find a file named models.xml, which includes 34 ready to use models.

To import the default models simply apply the procedure described in the Import Menu section with the models.xml file.

For more information on the procedure please watch the video Import the default models.

M) Convert a chart to a model

To convert a chart to a model please follow this procedure:

  1. Edit the chart that you want to convert to a model
  2. Select Model with the Common -> Status option
  3. Update the chart with the Update Chart button

For more information on the procedure please watch the video Convert a chart to a model (and vice versa).

N) Convert a model to a chart

To convert a model to a chart please follow this procedure:

  1. Edit the model that you want to convert to a chart
  2. Select Chart with the Common -> Status option
  3. Update the chart with the Update Chart button

For more information on the procedure please watch the video Convert a chart to a model (and vice versa).

O) Plot a dataset on the Y2 axis

Follow this procedure to plot a dataset on the Y2 axis:

  1. Enable the Y2 axis by selecting Yes on the Y2 Scale Common -> Display option
  2. Select a dataset by clicking on a row of the Data spreadsheet
  3. Select Yes on the Plot Y2 option associated with the edited dataset
  4. Click the Update button

Note that you are free to plot more than one dataset on the Y2 axis simply by repeating the procedure above. (each time with a different dataset)

For more information on the procedure please watch the video Plot a dataset on the Y2 axis.

P) Create Scatter and Bubble charts

The creation of Scatter and Bubble charts requires that you include multiple values in the cells of the Data spreadsheet.

Scatter Chart

A scatter chart requires two values per cell, the first value or "variable 1" will be plotted on the X axis and the second value or "variable 2" will be plotted on the Y axis. A slash character should be used to separate the two values, for this reason you have to enter your data in this format:

variable 1/variable 2 (Examples: 14/25, 1200/800, 0.32/7.44, etc.)

Please note that in the UberChart -> Charts menu there isn't a chart type named "Scatter" available in the Type option. To create a Scatter chart simply create a line chart and then set a linear or logarithmic scale for the X axis and a linear or logarithmic scale for the Y axis.

If you want to create a scatter chart without spending time with its configuration I recommend you to start from one of the following two models:

Bubble Chart

A bubble chart requires three values per cell, the first value or "variable 1" will be plotted on the X axis, the second value or "variable 2" will be plotted on the Y axis, and the third value or "variable 3" will be used to determine the bubble area. A slash character should be used to separate the three values, for this reason you have to enter your data in this format:

variable 1/variable 2/variable 3 (Examples: 24/25/60, 1200/800/2400, 0.32/7.44/5.26, etc.)

If you want to create a bubble chart without spending time with its configuration I recommend you to start from one of the following two models:

Q) Credits

This plugin makes use of the following resources:

For each library you can find the actual copy of the license inside the folder used to store the library files.

R) FAQ

How to improve the mobile version of a responsive chart?

To improve the mobile version of a responsive chart consider the following changes:

How to increase the maximum number of rows and columns?

In the UberChart -> Charts menu the maximum number of rows and columns is limited based on the value of the "post_max_size" PHP directive. You can use this table to determine the exact limit applied in your UberChart installation:

Value of the "post_max_size" directive Rows Columns Cells
<= 8M 100 100 10,000
> 8M and <= 16M 200 200 40,000
> 16M and <= 32M 400 400 160,000
> 32M and <= 64M 600 600 360,000
> 64M and <= 128M 800 800 640,000
> 128M 1000 1000 1,000,000

Please note that you can, at any time, change these limits by altering the value of the "post_max_size" PHP directive. Ask to your server administrator or to your hosting provider how to modify this value.

How to decrease the width of the textual elements of the chart?

If there isn't enough space to include a long chart title, a long axis title, or long labels, consider the following changes:

Which versions of PHP are supported?

PHP 5.3 and later versions are supported.

WordPress 4.0 and later versions are supported.