Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetEngine: Dynamic 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.

activated dynamic charts module in the external modules section

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.
charts builder general settings
knowledge base information icon
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. 

dynamic chart types


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

knowledge base information icon
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;
data source for chart columns
  • 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;
creating columns in the charts builder settings
  • 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”.
data type drop-down in the charts builder columns tab

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

knowledge base information icon
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. 

wc product query pagination tab

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

reload preview feature in charts builder

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:

"easing": "linear",
set advanced options section in the chart config tab

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. 

chart styles tab

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.

dynamic chart widget in Elementor

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

selecting dynamic chart source in Elementor

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. 

dynamic chart block in Gutenberg

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.

dynamic chart building in Gutenberg

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

dynamic chart widget on the front end

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