Google Donut Chart not displaying correct using data from database

Iva Nikolova

unread,

Jun 11, 2015, 3:33:36 AM6/11/15

to google-visua...@googlegroups.com

Hello everybody!

I'm trying to make Donut Chart using Google Charts. I get data from database - json format. I've seen example format for json data and I tried it. Now my pie chart looks in this way: http://prntscr.com/7fmpnx

It shows data - these 2 firms but it's not donut. Am I missing something? My json data is:


{"cols":[{"id":"name","label":"Name","type":"string"},{"id":"incomes","label":"Incomes","type":"number"}],"rows":[{"c":[{"v":"Kaufland"},{"v":"48"}]},{"c":[{"v":"Billa"},{"v":"24"}]},{"c":[{"v":"Hans"},{"v":"42"}]}]}

This is my model:

<?php 
public function pie_chart() {   
        $interval = $this->uri->segment(3);
     
      $firms = $this->receivedOrders_model->average_incomes_by_customer($interval);
 $p = array();
    foreach ($firms as $key => $firm) {
    $p[$key] = array('c' => array(array(
        'v' => $firm->name 
    ),
     
    array(
        'v' => $firm->incomes
    )));
}
echo json_encode(array(
    'cols' => array(
       array('id' => 'name',  'label' => 'Name',  'type' => 'string'),
        array('id' => 'incomes', 'label' => 'Incomes',  'type' => 'number'),

    ),
    'rows' => $p
));
    }

My view is:


$(document).ready(function() {
$('#interval').change(function(){
   var interval = $('#interval').val();   //This is when user choose interval to display donut data - for example 1 month
    if(interval != ''){
      $.ajax({
      type: 'get',
      url: "<?= base_url() ?>index.php/receivedOrders/pie_chart/" + interval,
      dataType: "json",
   success: function(jsonData){


drawChart(jsonData);

 }
});   
 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);  
function drawChart(jsonData) {

        var data = new google.visualization.DataTable(jsonData);
  var options = {
          title: '',
          pieHole: 0.4,
          width:'380',
          height:'300',
        
          'chartArea': {'width': '100%', 'height': '80%',
          left:10,top:'20',right:10},
       backgroundColor:'#FFFFFF',
       pieSliceText: 'none', 
       legend: {
            position: 'labeled'
          },
          colors:['#1abc9c','#2ecc71','#3498db','#9b59b6','#34495e',
          '#16a085','#2cc36b','#2980b9', '#8e44ad','#2c3e50',
          '#f1c40f','#e67e22','#e74c3c','#ecf0f1','#95a5a6',
          '#f39c12','#d35400','#c0392b','#bdc3c7','#7f8c8d']
        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
  
    }
  }});
});

My model is:

<?php
public function average_incomes_by_customer($interval = null) {
        if($interval) {
                if($interval == 1) {
                        $date = new DateTime("now");
                        $date->modify('-1 month');
                        $current =$date->format('Y-m-d');
                }
                if($interval == 3) {
                        $date = new DateTime("now");
                        $date->modify('-3 month');
                        $current =$date->format('Y-m-d');
                }
                
        }

        $this->db->select('customer.name,orderitems.incomes');
            $this->db->from('orderitems');
            $this->db->join('ordersheader', 'ordersheader.idOrder=
            orderitems.idOrder');
             $this->db->join('customer', 'ordersheader.idCustomer=
            customer.idCustomer','left');
             if($interval) {
                        $this->db->where('ordersheader.createdDate > ',$current);
                }
          
            $this->db->group_by('ordersheader.idCustomer');
            $query=$this->db->get();
                return $query->result();

    }

Sergey Grabkovsky

unread,

Jun 11, 2015, 10:07:42 AM6/11/15

to google-visua...@googlegroups.com

Hi,

I wasn't able to reproduce your issue. My guess would be that it's caused by the fact that you're storing your numbers as strings, i.e. "48", "24", "42". You should be returning unquoted numbers for that column. Here's what I get when plotting your data: http://jsfiddle.net/879dptny/

And here is the corrected data: http://jsfiddle.net/ejz7xypo/

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Iva Nikolova

unread,

Jun 12, 2015, 2:33:17 PM6/12/15

to google-visua...@googlegroups.com

Thank you! I have found it! That was problem! :)

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/LRcLLhIW-jc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward