Support

Account

Home Forums Add-ons Repeater Field How to Create donut chart using repeater field data Reply To: How to Create donut chart using repeater field data

  • 
    <?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>