### “UberChart” Documentation by “DAEXT” v1.20

# “UberChart”

Created: 14/12/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.

- Import the default models
- Create a chart from a model
- Create a chart from scratch
- Include a chart in a post with the TinyMCE editor
- Include a chart in a post with the UberChart block
- Modify the properties of the datasets
- Use the included spreadsheet editor
- Convert a chart to a model (and vice versa)
- Plot a dataset on the Y2 axis
- Use the color picker

### 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 the validation system detects an error in the chart data. For example if you leave a required field empty, if you enter alphanumeric characters where numbers are required, etc.
- If the library used to plot the chart is not able to generated the chart. This occurs when invalid combination of data not detected by the validation system are used to plot the chart.

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:

- To represent the categories of a Line or Bar chart
- To represent the time intervals of a Line or Bar chart
- To represent the values of the data points of an Horizontal Bar chart
- To represent the values of the first variable of a Scatter or Bubble chart

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

- Radar
- Polar Area
- Pie
- Doughnut

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

The Y Scale should be used in the following situations:

- To represent the categories of an Horizontal Bar chart
- To represent the values of the data points of a Line or Bar chart
- To represent the values of the second variable of a Scatter or Bubble chart

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

- Radar
- Polar Area
- Pie
- Doughnut

#### 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:

- Radar
- Polar Area
- Pie
- Doughnut

#### 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:

- Line
- Bar
- Horizontal Bar
- Pie
- Doughnut
- Scatter
- Bubble

#### 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:

- DD MM YYYY (Example: "25 05 1980")
- MMM D hA (Example: "Sep 22 4PM")
- MMMM (Example: "April")
- DD MMM YYYY (Example: "15 Sep 1988")
- YYYY MM DD (Example: "2005 05 18")
- dddd (Example: "Tuesday")
- h:mm:ss a (Example: "8:32:06 am")
- MMM YYYY (Example: "Sep 2017")
- MMM (Example: "Aug")
- YYYY (Example: "2016")

### 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:

- Scatter Chart with linear scale on X axis and linear scale on Y axis
- Scatter Chart with linear scale on X axis and logarithmic scale on Y axis

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:

- Bubble chart with linear scale on X axis and linear scale on Y axis
- Bubble chart with linear scale on X axis and logarithmic scale on Y axis

### Q) Credits

This plugin makes use of the following resources:

- Composer licensed under the MIT License
- Chosen licensed under the MIT License
- Handsontable licensed under the MIT License
- Spectrum licensed under the MIT License
- Chart.js licensed under the MIT License
- JShrink license under the BSD 3 Clause License

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:

- Set the Common -> Maintain Aspect Ratio option to "No"
- Use the Common -> Fixed Height option to set a fixed height in pixels (for example 400, 600, 1000). This value should be determined based on the complexity of the chart.

#### 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:

- Use a condensed font
- Decrease the font size
- Use abbreviations
- Convert text with uppercase letters to lowercase letters

#### Which versions of PHP are supported?

PHP 5.3 and later versions are supported.

#### Which versions of WordPress are supported?

WordPress 4.0 and later versions are supported.