How to make morris donut chart with ajax json?

Question

How to make morris donut chart with ajax json ?

this is my code :

$(function() {

$.ajax({
    url : 'dashboard/total-data',    
}).done(function(data){
    initDonut(JSON.parse(data));
    console.log(data);
}).fail(function(){

});

var initDonut = function(data){

    return Morris.Donut({
        element: 'morris-donut-chart',
        data: [ data ],
        // data: [ 
                // {label: "BMW", value: 4},
                // {label: "Mercy", value: 0},
                // {label: "Ferrari", value: 0},
                // {label: "Toyota", value: 3},
                // {label: "Porsche", value: 0},
                // {label: "Limosin", value: 0},
                // {label: "Lamborgini", value: 3} ],
        resize: true,
        colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394'],
    });

} });

Ajax code above return data format like this:

{"BMW":4,"Mercy":0,"Ferrari":0,"Toyota":3,"Porsche":0,"Limosin":0,"Lamborgini":3}

my question,

How to make format data above become like this with javascript?

[ {label: "BMW", value: 4},{label: "Mercy", value: 0},{label: "Ferrari", value: 0},{label: "Toyota", value: 3},{label: "Porsche", value: 0},{label: "Limosin", value: 0},{label: "Lamborgini", value: 3} ]

This is code for show json:

public function total_data()
{
    $data['BMW']        = $this->m_dashboard->get_total_product_bmw();
    $data['Mercy']      = $this->m_dashboard->get_total_product_mercy();
    echo json_encode($data);
    $data['Ferrari']    = $this->m_dashboard->get_total_product_ferrari();
    $data['Toyota']     = $this->m_dashboard->get_total_product_toyota();
    $data['Porsche']    = $this->m_dashboard->get_total_product_porsche();
    $data['Limosin']    = $this->m_dashboard->get_total_product_limosin();
    $data['Lamborgini'] = $this->m_dashboard->get_total_product_lamborgini();
    echo json_encode($data);
}

Answer 1

You need to change code of total-data like below:-

public function total_data()
{
    $data[0]['label']= 'BMW'; 
    $data[0]['value']= $this->m_dashboard->get_total_product_bmw();

    $data[1]['label']= 'Mercy'; 
    $data[1]['value']= $this->m_dashboard->get_total_product_mercy();


    $data[2]['label']= 'Ferrari'; 
    $data[2]['value']=  $this->m_dashboard->get_total_product_ferrari();

    $data[3]['label']= 'Toyota'; 
    $data[3]['value']=  $this->m_dashboard->get_total_product_toyota();

    $data[4]['label']= 'Porsche'; 
    $data[4]['value']=  $this->m_dashboard->get_total_product_porsche();

    $data[5]['label']= 'Limosin'; 
    $data[5]['value']=  $this->m_dashboard->get_total_product_limosin();

    $data[6]['label']= 'Lamborgini'; 
    $data[6]['value']=  $this->m_dashboard->get_total_product_lamborgini();

    echo json_encode($data);
}

jQuery code need to be:-

$(function() {

    $.ajax({
        url : 'dashboard/total-data',    
    }).done(function(data){
        Morris.Donut({
          element: 'morris-donut-chart',
          data: JSON.parse(data),
           resize: true,
           colors: ['#87d6c6', '#54cdb4','#1ab394', '#54cdb4','#1ab394', '#54cdb4','#1ab394']
        });

    }).fail(function(){

    });
});

Working at my end:- http://prntscr.com/f6399z