I want to create a donut chart using repeater field data. Is there way to do it ?
<canvas data-bs-chart=”{"type":"doughnut"
,"data":{"labels":["Direct","Social","Referral"]
,"datasets":[{"label":""
,"backgroundColor":["#4e73df","#1cc88a","#36b9cc"]
,"borderColor":["#ffffff","#ffffff","#ffffff"]
,"data":["50","30","15"]}]}
,"options":{"maintainAspectRatio":false,"legend":{"display":false}
,"title":{}}}”>
</canvas>
This is the chart details. I want to change the “"data"” and “"labels"”
Row count also change time to time. any idea ?
How would you do this if you where not using an ACF repeater field?
Provide code that shows how the data is included.
Please use “code” tags available in the menu when you provide code.
I’m using ACF repeater fields and there are two sub field. One is label and other field has data.
<?php if( have_rows('donut_graph_details') ): ?>
<?php while( have_rows('donut_graph_details') ): the_row() ;
$title = get_sub_field('title');
$percentage = get_sub_field('percentage');
?>
<canvas data-bs-chart=”{"type":"doughnut"
,"data":{"labels":["Direct","Social","Referral"]
,"datasets":[{"label":""
,"backgroundColor":["#4e73df","#1cc88a","#36b9cc"]
,"borderColor":["#ffffff","#ffffff","#ffffff"]
,"data":["50","30","15"]}]}
,"options":{"maintainAspectRatio":false,"legend":{"display":false}
,"title":{}}}”>
</canvas>
<?php endwhile; endif;?>
This reply has been marked as private.
I do not know what you are using or how it works. I need to see the code that you would add to your <canvas> element for the data points and how it would be added normally if you were going to hard code it so that I can help you populate that data from ACF.
If that is in there and I’m missing it you will need to explain to me what part of that code is the data that you want to use and how it relates to the acf fields in question.
This reply has been marked as private.
<?php
// create a php array that represents the JSON object
$canvas_data = array(
'options' => array(
'maintainAspectRatio' => false,
'legend' => array(
'display' => false,
),
'title' => array()
),
'type' => 'donunt',
'data' => array(
'labels' => array(), // this array will be populated from the repeater
'datasets' => array(
'label' => '',
'backgroundColor' => array('#4e73df', '#1cc88a','#36b9cc'),
'data' => array() // this array will be populated from the repeater
)
)
);
// loop over repeater and populate object
if (have_rows('donut_graph_details')) {
while (have_rows('donut_graph_details')) {
the_row();
$canvas_data['data']['labels'][] = get_sub_field('title');
$canvas_data['data']['datasets']['data'][] = get_sub_field('percentage');
}
}
// use json encode to output attribute
?>
<canvas data-bs-chart="<?php echo json_encode($canvas_data); ?>"></canvas>
This reply has been marked as private.
I did my best using the code provide, it was a guess. I am just trying to show you how you would insert the field values into the data.
The content inside of data-bs-chart="" is a JSON object. The JSON object can be constructed as a PHP array and then converted to a JSON object. This allows you to insert the values PHP array where they are needed.
This reply has been marked as private.
