将MySQL中的JSON导入Google图表
Getting JSON from MySQL into Google Charts
我正试图使用他们的示例和MySQL表中的一些数据来填充一个基本的谷歌区域图。这是我的:
<?php
include("inc/DBConn.php");
$link = connectToDB();
$query = "SELECT MONTH(checkout) as Checkout, COUNT(item_id) as BookCount FROM C_books WHERE YEAR(checkout) = 2012 GROUP BY MONTH(created) ASC";
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$numBooks[] = $row;
};
$chartData = json_encode($numBooks,JSON_NUMERIC_CHECK);
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo $chartData; ?>,false);
var options = {
title: 'Total Books',
hAxis: {title: 'Month', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
这是我的回声结果:
[{"Checkout":"3","BookCount":"19"},{"Checkout":"4","BookCount":"157"},{"Checkout":"5","BookCount":"30"},{"Checkout":"6","BookCount":"45"},{"Checkout":"7","BookCount":"688"},{"Checkout":"8","BookCount":"391"}]
我知道谷歌不喜欢这个,但我不明白如何格式化它???
$numBooks[] = array("Checkout", "BookCount");
while ($row = mysql_fetch_array($result)) {
$numBooks[] = $row;
};
以所需格式呈现数据
以下是我使用SQL->Array->GoogleDataTableJSONString的方法(我没有参考其他人是如何做到的,所以可能有更好的编码方法)。注意$task_submissions_arr是一个由行填充的数组&数据库查询中的列(但下面未显示)
<?php
// array to be converted to json string and used in google chart's bar chart
$bar_chart_cols_arr = array(
array('id' => 'Name', 'label' => 'Name', 'type' => 'string'),
array('id' => 'Auto Grading Marks', 'label' => 'Auto Grading Marks', 'type' => 'number'),
array('id' => 'Manual Grading Marks', 'label' => 'Manual Grading Marks', 'type' => 'number'));
// array to be converted to json string and used in google chart's bar chart
$bar_chart_rows_arr = array();
for($i=0; $i<count($task_submissions_arr); $i++){
// array nesting is complex owing to to google charts api
array_push($bar_chart_rows_arr, array('c' => array(
array('v' => $task_submissions_arr[$i]['name']),
array('v' => $task_submissions_arr[$i]['auto_grading_marks']),
array('v' => $task_submissions_arr[$i]['manual_grading_marks']))) );
}
?>
<script type="text/javascript">
google.setOnLoadCallback(draw_bar_chart);
function draw_bar_chart() {
var bar_chart_data = new google.visualization.DataTable(
{
cols: <?php echo json_encode($bar_chart_cols_arr); ?>,
rows: <?php echo json_encode($bar_chart_rows_arr); ?>
});
// to be continued...
</script>
相关文章:
- 在gwt HTMLPanel中使用JavaScript运行Google图表
- Google图表HTML工具提示,其中包含javascript onclick事件
- 在一个C#页面上显示多个Google图表
- Javascript数组或Google图表视图.setColumns
- 将MySQL中的JSON导入Google图表
- 使用Google图表API和源于PHP-的值
- no-op if 语句会导致 Google 图表失败
- Google 图表 - 设置选择不会滚动到表格可视化中的选定行
- 如何获取先前创建的Google图表的实例
- 如何确保Google图表面板中的过滤饼图保持一致的切片颜色
- 绘制的节点和Google图表/可视化中的数据节点之间的关系
- Salesforce.com和Google图表API数据查询
- 在服务器端保存Google图表
- Google图表:轴#0的数据列不能为字符串类型
- Spring MVC与Google图表,创建javascript数据表的最佳方式是什么
- 使用Google图表只显示主要值
- 在Ajax上加载Google图表——成功
- 来自 C# 的 Google 图表 JavaScript 值
- 如何使用for循环动态地将行添加到Google图表
- 用于日期格式的 Google 图表范围过滤器控件