表格没有行 - 使用 PHP 和 AJAX 的 Google 饼图

Question

我收到“表格没有列”错误。请看下面的链接。

http://admin.millionkidstoschool.org/index.php/

什么可能导致这个问题？

在提供的链接上，您可以在 XHR 下看到 JSON 输出。

是否可以使用相同的 JSON 输出但使用不同的数据集绘制多个图表（饼图、条形图）？

查看：

 google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(filter_data); 


       function filter_data(){
           $('#filter_data').html("<div id='loading'></div>");
           var action = 'fetch_data';
           //var minimum_price = $('#hidden_minimum_price').val();
           //var maximum_price = $('#hidden_maximum_price').val();
           var reporting_period = get_filter('reporting_period');
           var category = get_filter('category');
           var region = get_filter('region');
           var partner = get_filter('partner');

           var mapData = $.ajax({
               url:"http://admin.millionkidstoschool.org/index.php/enrollments/fetch_data",
               type:"POST",
               dataType:"JSON",
               data:{action:action, reporting_period:reporting_period, category:category, region:region, partner:partner},

                /*success:function(data){
                   $('.filter_data').html(data.enrollments);
                   /*$('#pagination_link').html(data.pagination_link);
               }*/
           }).responseText;


           // Create our data table out of JSON data loaded from server. 
            var data = new google.visualization.DataTable(mapData);




            // Instantiate and draw our chart, passing in some options. 
            var chart = new google.visualization.PieChart(document.getElementById('filter_data')); 
            chart.draw(data, {width: 900, height: 500}); 

       }

控制器：

        $data = $this->db->query($query);



        $result = '';
        $total_ex_nf = '0';
        $total_new_nf = '0';
        $total_formal='0';
        if($data->num_rows() > 0)
        {
            foreach($data->result_array() as $row)
            {
                if($row['category']=='Ex-Non-Formal'){
                    $total_ex_nf += $row['total_enrolled'];
                    //$result .= $total_ex_nf;
                }
                if($row['category']=='New-Non-Formal'){
                    $total_new_nf += $row['total_enrolled'];
                    //$result .= $total_new_nf;
                }
                if($row['category']=='Formal'){
                    $total_formal += $row['total_enrolled'];
                    //$result .= $total_formal;
                }

                $result .= '


                <div class="col-lg-12">
                 <div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px;">


                  <p>Total Enrollments : '. $row['total_enrolled'].' <br />
                  Partner : '. $row['partner'] .'  <br />
                  Reporting Period : '. $row['reporting_period'] .' <br />
                  Category : '. $row['category'] .'<br />


                  Region : '. $row['region'] .'</p>
                 </div>
                </div>
                ';
            }

            $result .= '<div class="col-lg-12">

            Total Formal: '.$total_ex_nf.' <br/>
            Total Ex-Non-Formal: '.$total_new_nf.' <br/>
            Total New-Non-Formal: '.$total_formal.' <br/>

            </div>';


            $output = array('enrollments' => $result);
        }
        else
        {
            $result = '<h3>No Data Found</h3>';
        }

    $categoryType1 = "Fromal";
    $categoryType2 = "Ex-Non-Fromal";
    $categoryType3 = "New-Non-Fromal";

   $responce->cols[] = array( 
        "id" => "", 
        "label" => "Category", 
        "pattern" => "", 
        "type" => "string" 
    ); 
    $responce->cols[] = array( 
        "id" => "", 
        "label" => "Total Enrolled", 
        "pattern" => "", 
        "type" => "number" 
    ); 

        $responce->rows[0]["c"] = array( 
            array( 
                "v" => "$categoryType1", 
                "f" => null 
            ) , 
            array( 
                "v" => (int)$total_formal, 
                "f" => null 
            )
        ); 

        $responce->rows[1]["c"] = array( 
            array( 
                "v" => "$categoryType2", 
                "f" => null 
            ) , 
            array( 
                "v" => (int)$total_ex_nf, 
                "f" => null 
            )
        ); 

        $responce->rows[2]["c"] = array( 
            array(
                "v" => "$categoryType3", 
                "f" => null 
            ) , 
            array( 
                "v" => (int)$total_new_nf, 
                "f" => null 
            )
        ); 

    echo json_encode($responce);
 }

Answer 1

jquery ajax 函数有一个.done() 函数，该函数在请求完成并传递数据时触发。您访问数据的方式导致您将 google 图表传递给 jqXHR 对象。更多信息请看这里：http://api.jquery.com/jQuery.ajax/。

你可以试试这样的：

 google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(filter_data); 


       function filter_data(){
           $('#filter_data').html("<div id='loading'></div>");
           var action = 'fetch_data';
           //var minimum_price = $('#hidden_minimum_price').val();
           //var maximum_price = $('#hidden_maximum_price').val();
           var reporting_period = get_filter('reporting_period');
           var category = get_filter('category');
           var region = get_filter('region');
           var partner = get_filter('partner');

           var mapData = $.ajax({
               url:"http://admin.millionkidstoschool.org/index.php/enrollments/fetch_data",
               type:"POST",
               dataType:"JSON",
               data:{action:action, reporting_period:reporting_period, category:category, region:region, partner:partner},

                /*success:function(data){
                   $('.filter_data').html(data.enrollments);
                   /*$('#pagination_link').html(data.pagination_link);
               }*/
           }).done(function (mapData) {
               // Create our data table out of JSON data loaded from server. 
               var data = new google.visualization.DataTable(mapData);

               // Instantiate and draw our chart, passing in some options. 
              var chart = new google.visualization.PieChart(document.getElementById('filter_data')); 
              chart.draw(data, {width: 900, height: 500}); 
           });

       }

（此代码未经测试，如果您给出正确方向的提示）