Support

Account

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

Solved

How to Create donut chart using repeater field data

  • 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&quot” and “"labels&quot”
    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.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.