CODEWITHSUNDEEP
javascriptjqueryjsonajaxdonut-chart
silvia zulinka
silvia zulinka

Reputation: 731

How to make morris donut chart with ajax json?

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);
}

Upvotes: 1

Views: 3800

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

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

Upvotes: 2

ktilcu
ktilcu

Reputation: 3128

It seems like the question is mostly, how do I get from 

{key: foo, key2:bar}

to

[{label: key, value:foo},{label: key2, value:bar}]

I'm a huge fan of libraries like lodash and ramda. If you had Ramda available I would recommend something like:

var input = {
  "BMW": 4,
  "Mercy": 0,
  "Ferrari": 0,
  "Toyota": 3,
  "Porsche": 0,
  "Limosin": 0,
  "Lamborgini": 3
}
var expected = [{
  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
}]


// First thing we want is to group the key and value together
var pairs = R.toPairs(input);

// This gives us something like
// [["BMW",4],["Mercy",0],...]

// This is getting a little far to explain here but Ramda
// curries all it's functions so we can pass the labels
// here and then the pairs later.
var label = R.zipObj(["label", "value"]);

// Here we map the label function over each set of pairs
var output = pairs.map(label);

tape('Same?', t => {
  t.deepEqual(expected, output);
  t.end();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
<script src="https://wzrd.in/standalone/tape@latest"></script>

Otherwise, you could do something in a for loop.

var input = {
  "BMW": 4,
  "Mercy": 0,
  "Ferrari": 0,
  "Toyota": 3,
  "Porsche": 0,
  "Limosin": 0,
  "Lamborgini": 3
}
var expected = [{
  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
}]
var output = [];
for (var k in input) {
  output.push({"label": k, "value": input[k]});
}

tape('Same?', t => {
  t.deepEqual(expected, output);
  t.end();
});
<script src="https://wzrd.in/standalone/tape@latest"></script>

Upvotes: 0

Related Questions