javascript - Morris Donut Chart dynamic json data -

i trying build morris donut chart dynamic data can't seem understand how pass dynamic data labels.

sqli db method query:

    get_requests_count_per_ouc_per_month($month){         $connection = get_db(); $query = "select u.ouc ouc, count(r.engineer_uin) no_of_requests              users u              inner join request r on r.engineer_uin = u.uin             , extract(month r.date_received) =".$month."              group u.ouc             order no_of_requests";       return $connection->query($query); } 

the query returns following results:

ouc     |  no_of_requests  bvg15   |  1 bvg16   |  2 bvg13   |  4 bvg1c3  |  5 

i wish pass ouc labels , no_of_requests ykeys:

so donut chart should this:

donut_chart_pct = morris.donut({       element: 'donut_chart_pct',       data: [         {label: "bvg15", value: 1},         {label: "bvg16", value: 2},         {label: "bvg13", value: 4},         {label: "bvg1c3", value: 5}        ],      }); 

however, don't know how many ouc returned label has dynamic i.e. shrinking/expanding depending upon number of unique ouc's returned respective counts

this have tried:

    function prepare_donut_chart_requests_per_ouc_org_data(){     //$returnarray=array();             $month = date('m', strtotime(date('y-m-01')));             $requests = get_requests_count_per_ouc_per_month($month);              while($row = $requests->fetch_assoc()) {                 $returnarray[]=array('ouc'=>$row['ouc'],'total'=>$row['no_of_requests']);             }      return $returnarray;  } $returnarray = prepare_donut_chart_requests_per_ouc_org_data();     http_response_code(200);     echo json_encode($returnarray); 

the following array returned in json format:

[{"ouc":"bvg15","total":"1"},{"ouc":"bvg16","total":"2"},{"ouc":"bvg13","total":"4"},{"ouc":"bvg1c3","total":"5"}] 

now don't know how setup donut chart label corresponding values don't know how pass dynamically?

my javascript looks this:

function add_donut_chart_requests_per_ouc_org_data(){           $.ajax({         type:"get",         url:"graph-calls.php",         datatype:"json",         contenttype:"application/json",         data:"chart=donut_chart_requests_per_ouc_org",          success:function(response){          reload_chart('donut_chart_requests_per_ouc_org',response);         console.log(json.stringify(response));         },           error: function(response){              alert('there error!' + json.stringify(response));           }       });        return false; }  function reload_chart(chart,response){      if(chart=='donut_chart_requests_per_ouc_org'){      if(response!=null){       var ouc= response.ouc;       var total= response.total;        var donut_chart_data = [          {label: ouc, value: total}          ];          donut_chart_requests_per_ouc_org.setdata(donut_chart_data);         donut_chart_requests_per_ouc_org.redraw();      }      } } 

the problem can't seem ouc , total values. if print says undefined. doing wrong? :/any code example highly appreciated

update

made following changes javascript reload method , working now:

if(chart=='donut_chart_requests_per_ouc_org'){        donut_chart_data=[];        for(var i=0; i<response.length;i++){               var ouc= response[i].ouc;               var total= response[i].total;                donut_chart_data[i]={label:ouc,                           value:total                      };            }                 console.log(donut_chart_data);          if(donut_chart_data.length){          donut_chart_requests_per_ouc_org.setdata(donut_chart_data);         donut_chart_requests_per_ouc_org.redraw();         }    }