Site icon Hip-Hop Website Design and Development

Constructed Json array Utilizing ACF repeater fields

I attempt to generate Donut chart code utilizing Json array. I’ve caught with in a single place

That is my code

<?php 
  $canvas_data = array(
    
    'sort' => 'doughnut',
    'information' => array(
      'labels' => array(),  // this array might be populated from the repeater
      'datasets' => array(
        'label' => '',
        'backgroundColor' => array('#4e73df', '#1cc88a','#36b9cc','#df4e75'),
        'borderColor'=> array('#ffffff','#ffffff','#ffffff','#ffffff'),
        'information' => array() // this array might be populated from the repeater
      )
    ),
    'choices' => array(
      'maintainAspectRatio' => false,
      'legend' => array(
        'show' => false,
      ),
      'title' => array()
    ),
  );
  // loop over repeater and populate object
  if (have_rows('donut_graph_details')) {
    whereas (have_rows('donut_graph_details')) {
      the_row();
      $canvas_data['data']['labels'][] = get_sub_field('title');
      $canvas_data['data']['datasets']['data'][] = get_sub_field('proportion');
    }
  }
  // use json encode to output attribute
?>
<canvas data-bs-chart='<?php echo json_encode($canvas_data); ?>'></canvas>

Out put utilizing this code

<canvas data-bs-chart='{"type":"doughnut","data":{"labels":["IMPLEMENTED","PARTIALLY IMPLEMENTED","NOT IMPLEMENTED","UNDISCLOSED"],"datasets":{"label":"","backgroundColor":["#4e73df","#1cc88a","#36b9cc","#df4e75"],"borderColor":["#ffffff","#ffffff","#ffffff","#ffffff"],"data":["40","30","10","20"]}},"options":{"maintainAspectRatio":false,"legend":{"display":false},"title":[]}}'></canvas>

However i wish to do small modification to the Out put. I wish to add "[" before starting "datasets" and wants to close.
I have add the modification code below.

<canvas data-bs-chart='{"type":"doughnut","data":{"labels":["IMPLEMENTED","PARTIALLY IMPLEMENTED","NOT IMPLEMENTED","UNDISCLOSED"],"datasets":[{"label":"","backgroundColor":["#4e73df","#1cc88a","#36b9cc","#df4e75"],"borderColor":["#ffffff","#ffffff","#ffffff","#ffffff"],"data":["40","30","10","20"]}]},"options":{"maintainAspectRatio":false,"legend":{"display":false},"title":[]}}'></canvas>
            

Additionally final "title" has sq. bracket. I wish to exchange these with "{}"