[英]Convert mySQL pivot table into string for google visualization
Thanks to a lot of different resources both on SO ( This one specifically ) and the intrawebs in general, I've managed to create a pivot table with mySQL. 由于在SO( 特别是本网站 )和Intraweb上有许多不同的资源,我设法用mySQL创建了一个数据透视表。
You can see a working example (limited data) here: SQL Fiddle 您可以在此处看到一个有效的示例(有限的数据): SQL Fiddle
Now I want to get that data out, through PHP and convert it into a json string so I can send it as an ajax response to an HTML page where I'm trying to display a chart (column chart) via google visualization just like this one: https://code.google.com/apis/ajax/playground/?type=visualization#column_chart 现在,我想通过PHP提取数据并将其转换为json字符串,这样我就可以将其作为ajax响应发送到HTML页面,在该页面中,我试图通过google可视化来显示图表(列图表),就像这样一个: https : //code.google.com/apis/ajax/playground/?type = visualization#column_chart
My question is: How do I transform the pivot table into the correct format for the chart to understand it? 我的问题是:如何将数据透视表转换为正确的格式,以使图表易于理解?
The echo(ed) results from my php file (sph.php) end up with data structured as so: 我的php文件(sph.php)产生的echo(ed)结果最终具有如下结构的数据:
[{"ps_job_serial_num":"888888","105":null,"104":"4.00","400":null,"101":"5.00","102":"3.00","204":"6.00","103":"2.00","399":"1.00","300":"1.00","205":"7.00","203":"2.00","404":null,"405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null},
{"ps_job_serial_num":"999999","105":null,"104":"2.00","400":null,"101":"1.00","102":"0.00","204":null,"103":null,"399":"3.00","300":"2.00","205":"3.00","203":null,"404":null,"405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null},
{"ps_job_serial_num":"111111","105":"1.00","104":"3.00","400":null,"101":"5.00","102":"4.00","204":"10.00","103":"7.00","399":"1.00","300":"2.00","205":null,"203":null,"404":null,"405":null,"202":null,"301":null,"106":null,"304":"1.00","401":null,"201":null,"402":null,"403":null,"303":null},
{"ps_job_serial_num":"222222","105":null,"104":"1.00","400":null,"101":"1.00","102":"1.00","204":"3.00","103":"1.00","399":null,"300":null,"205":null,"203":null,"404":"3.00","405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null},
{"ps_job_serial_num":"333333","105":"2.00","104":"8.00","400":null,"101":"8.00","102":"9.00","204":"10.00","103":"8.00","399":"2.00","300":"5.00","205":"8.00","203":"8.00","404":null,"405":"7.00","202":"8.00","301":null,"106":"1.00","304":null,"401":null,"201":"6.00","402":null,"403":"6.00","303":null},
{"ps_job_serial_num":"444444","105":"2.00","104":"5.00","400":null,"101":"8.00","102":"9.00","204":"10.00","103":"8.00","399":"4.00","300":"3.00","205":"8.00","203":"5.50","404":"2.00","405":"8.00","202":"8.00","301":"2.00","106":"4.00","304":null,"401":"10.00","201":"10.00","402":"7.00","403":"7.00","303":"2.00"},
etc
But I really want the data formatted like so: 但是我真的希望数据格式化为:
([
['ps_job_serial_num', '101', '102', '103', '104', '105', '106'],
['888888', 500, 381, 381, 110, 665, 157],
['999999', 750, 396, 381, 115, 594, 173],
['111111', 120, 406, 381, 115, 571, 167],
['222222', 100, 460, 381, 116, 619, 185],
['333333', 430, 401, 381, 120, 642, 195],
['444444', 120, 679, 381, 128, 624, 198]
]);
How can I make my data look like it needs to look? 如何使数据看起来像需要的样子?
Here is my full PHP code: 这是我完整的PHP代码:
<?php
$mysqli = new mysqli("localhost", "user", "password", "database");
$query = "CALL new_procedure()";
$result = $mysqli->query($query);
while ($row = $result->fetch_assoc()) {$results_array[] = $row;}
$jsontable = json_encode($results_array);
echo $jsontable;
?>
Here is the full HTML page: 这是完整的HTML页面:
<head>
<title>My realtime chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "sph.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1200, height: 600});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>
</body>
</html>
The error that is displayed on the HTML page is "Table has no columns"... HTML页面上显示的错误是“表无列” ...
Update #1 更新#1
After making the changes suggested by @asgallant (below), the data returned from PHP now looks like this: 进行@asgallant(如下)建议的更改后,从PHP返回的数据现在如下所示:
[
["ps_job_serial_num",105,104,400,101,102,204,103,399,300,205,203,404,405,202,301,106,304,401,201,402,403,303],
["888888",null,4,null,5,3,6,2,1,1,7,2,null,null,null,null,null,null,null,null,null,null,null],
["999999",null,2,null,1,0,null,null,3,2,3,null,null,null,null,null,null,null,null,null,null,null,null],
["111111",1,3,null,5,4,10,7,1,2,null,null,null,null,null,null,null,1,null,null,null,null,null],
["222222",null,1,null,1,1,3,1,null,null,null,null,3,null,null,null,null,null,null,null,null,null,null],
[333333,2,8,null,8,9,10,8,2,5,8,8,null,7,8,null,1,null,null,6,null,6,null],
[444444,null,3,null,2,2,8,3,1,1,null,null,2,6,null,null,null,null,null,null,null,null,null],
[555555,null,2,null,2,2,8,3,2,1,null,null,2,3,null,null,null,null,null,null,null,null,null],
[666666,null,2,null,2,2,7,3,1,2,null,null,2,8,null,null,null,null,null,null,null,null,null],
[777777,null,2,null,2,2,8,3,1,1,null,null,2,7,null,null,null,null,2,null,null,null,null]
]
Which looks correct. 看起来正确。 However I noticed starting after the 5th line, there are no longer quotes around the ps_job_serial_number. 但是我注意到从第5行开始,ps_job_serial_number周围不再有引号。 I'm wondering if this is what's making it bonk? 我想知道这是什么使它弹跳吗?
The error message from the Chrome console is: Chrome控制台的错误消息是:
Uncaught Error: Not an array
(anonymous function)
drawChart
Update #2 Changed the query to only return the rows that had quotes around the ps_job_serial_num (to trouble shoot if that was causing the error). 更新#2更改了查询,使其仅返回在ps_job_serial_num周围带有引号的行(如果引起错误,则进行排错)。 it made no difference. 没关系。 The error remains the same: 错误保持不变:
Uncaught Error: Not an array
(anonymous function)
drawChart
Try this in your PHP: 在您的PHP中尝试一下:
<?php
$mysqli = new mysqli("localhost", "user", "password", "database");
$query = "CALL new_procedure()";
$result = $mysqli->query($query);
$results_array = Array(Array());
$fillKeys = true;
while ($row = $result->fetch_assoc()) {
$temp = Array();
foreach ($row as $key => val) {
if ($fillKeys) {
$results_array[0][] = $key;
}
$temp[] = $val;
}
$results_array[] = $temp;
$fillKeys = false;
}
$jsontable = json_encode($results_array, JSON_NUMERIC_CHECK);
echo $jsontable;
?>
and in your javascript, change the DataTable construction to use the #arrayToDataTable
method (which is required if you want to put the data in this particular format - if you want to use the standard constructor, you have to know what the data type of each column is): 然后在您的javascript中,将DataTable的结构更改为使用#arrayToDataTable
方法(如果您想以这种特殊格式放置数据,则必须使用此方法-如果您要使用标准的构造函数,则必须知道每种方法的数据类型列是):
[edit - added JSON.parse
below] [编辑-在下面添加了JSON.parse
]
var data = google.visualization.arrayToDataTable(JSON.parse(jsonData));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.