「テーブルに列がありません」というエラーが発生します。以下のリンクをご覧ください。
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);
}
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});
});
}
(このコードはテストされていません。正しい方向にヒントを与える必要があります)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加