How can I pull Charts widget data dynamically?

Important
This article shows how you can set charts data dynamically using ACF plugin, if you are not familiar with ACF, you can watch this video tutorial.

Create ACF Fields

First, we will need to create ACF fields to pull our charts data from, you can follow the steps below to create a group of ACF fields:
  • On your dashboard, go to Custom Fields -> click on `Add New` to create a field group,  Once you have created your field group, you can start adding fields from `Add Field`. Check this for detailed description.
Using Elementor Chart with ACF
Using Elementor Chart with ACF
Add field to ACF to Use with Elementor Chart Widget
Add field to ACF to Use with Elementor Chart Widget

Put ACF Fields Together

Now, we will need to put ACF fields together in one field that we will use in our charts

    • On your dashboard, go to Appearance -> Editor, on the right side, select Theme Functions `functions.php`
    • Add the following code to the very end of the file:

function create_charts_field_group() {

acf_add_local_field_group(array(
‘key’ => ‘group_1’,
‘title’ => ‘Charts Group’,
‘location’ => array (
array (
array (
‘param’ => ‘post_type’,
‘operator’ => ‘==’,
‘value’ => ‘post’,
),
),
),
));

acf_add_local_field(array(
‘key’ => ‘info’,
‘label’ => ‘Person Info’,
‘name’ => ‘person_info’,
‘type’ => ‘text’,
‘parent’ => ‘group_1’
));

}

function create_charts_update_field() {
$age = get_field(‘age’);

$weight = get_field(‘weight’);

$height = get_field(‘height’);

$data = $age .  ‘,’  . $weight  .  ‘,’  .  $height;

update_field( ‘info’ , $data );

}

add_action(‘acf/init’, ‘create_charts_field_group’);

add_action(‘acf/save_post’, ‘create_charts_update_field’);

Elementor Chart Widget Add Code to Functions.php
Elementor Chart Widget Add Code to Functions.php
Elementor Chart Widget Adding Code to the Fucntions.php
Elementor Chart Widget Adding Code to the Fucntions.php
 
This should create a new field group that contains one field of text type and its value is equal to your ACF fields separated by a comma updated each time you update/save your post.
 
Functions.php location
Functions.php location
If you want to add more fields, you can use field name to get the field value.
Elementor Chart Widget ACF
Elementor Chart Widget ACF
$field_value = get_field(‘field_name’);
 
then, update your data variable to be:
 
 $data = $age  .  ‘,’  .  $weight  .  ‘,’ .   $height . ‘,’ . $field_value;

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.