Back to contents

JetEngine: Charts Builder Overview

From this tutorial, you’ll find out everything about Dynamic Charts functionality from the JetEngine plugin. With Dynamic Charts, you can dynamically get the data from the previously created Query and display it in beautiful charts, such as Bar, Line, Pie, Geo, Histogram, and many others. 

 

This overview will describe the general settings of Dynamic Charts, how to create and customize them.

Let’s discover what we can achieve with Dynamic Charts!

Create a Query

Firstly, go to JetEngine > JetEngine > Modules > External Modules and enable the Dynamic Charts Builder module.

After that, you need to create a Query with Query Builder.
In our case, we’ll use the previously created WC Product Query for products.

Charts Builder Overview

Open the Charts Builder block in the JetEngine dashboard, and let’s have a closer look at all settings.

General Settings

  • Name. Here you can add the name of the Custom Content Type that will be shown in the admin menu;
  • Data Query. In this field, you need to choose the query you’ve created before with the Query Builder. No worries if you didn’t create it. There’s always an opportunity to create a new query or edit the existing one; 
  • Fetch the data. Fetch a sample of the data to find all possible columns and preview the table.
NOTE!
Re-fetch Data won’t work with WooCommerce.

Chart Type

In this block, you can choose the chart type. Here you can see a lot of amazing charts, such as Bar, Line, Area, Pie, Donut, Columns, and many others. In our case, we’ll choose the Columns chart type. 

Columns

Here you can add the required data for your chart. It will work similarly to the meta fields.

NOTE!
The first column is used for chart group labels. All following columns are used for chart data.
  • Column Name. The column name is displayed in the table heading;
  • Data Source. Here you can choose from two options – “Fetched Column” and “Post/Term/User/Object Field.” In our case, we have only the “Post/Term/User/Object Field” option because “Fetched Column” doesn’t work with WooCommerce;
  • Select Field. Select a field from the current object to be shown in this column. We’ve added title, price, and reviews fields to show the price-demand ratio for books;
  • Data Type. Converts column data into the selected type. You can choose between “Default,” “Ensure number,” and “Ensure string.” In our case, we’ve chosen “Ensure number”.

You can click on the “Reload Preview” button to check the changes.

NOTE!
To see the preview, you’ll need to set the Width for the Chart in the Chart Styles section.

Also, if you want to display fewer products in the Chart, you can always use the limit from the Query Builder. Previously, we’ve created a WC Product Query. Now we need to return to it, open the Pagination section, enable the pagination option, and set the needed number of products per page in the Limit field. For example, I want to display only 6. 

As a result, we’ll see only six products in the preview.

Chart Config 

  • Legend. Set the chart legend position or disable it;
  • Advanced Options. This toggle allows you to set more configuration options manually. After you’ve enabled this option, the Set Advanced Options field will appear. Here you can set advanced options for the chart in JSON format. Please check the Allowed options list to see what you can add. We’ll add the following:
{
"backgroundColor":"#EEEEEE",
"backgroundColor.strokeWidth":"20",
"animation":{

"duration":"5000",
"easing": "linear",
"startup":"true"
}
}

Now let’s check the result.

Without Advanced Option, the chart would not be animated.

Chart Styles

In this module, you can adjust the width and set the height for the chart in pixels. 

Dynamic Chart widget in Elementor

There’s an opportunity to display the chart on any page with a Dynamic Chart widget. Go to the needed page and click on the Edit with Elementor button. Search for the Dynamic Chart widget and add it to the page.

In the Chart field, you can choose the chart you’ve created before. 

Dynamic Chart widget in Gutenberg

You can also add the Dynamic Chart widget in Gutenberg. Open the needed page, click on the plus icon,  and search for the Dynamic Chart widget. 

After that, you can simply add the widget to the needed section. In the widget’s settings, you’ll need to choose the Chart you’ve created before.

Let’s have a look at the chart on the frontend. 

Well done! Now you know how to use Chart Builder from the JetEngine plugin to display data with the help of beautiful charts.