我想使用 php 从 MySQL 中的数据创建图表。我使用 json_encode 在谷歌图表中获取数据。我可以看到图表,但它显示没有可用的数据。下面是我的图表页面的页面源。
<html>
<head>
</head>
<body>
<script type="text/javascript">
var encoded_P1data = ["1111","1234","1111","1111","1234","1111","1111","1234","1111","1111"];
var encoded_P2data = ["2222","2345","2222","2222","2345","2222","2222","2345","2222","2222"];
var encoded_P3data = ["3333","3456","3333","3333","3456","3333","3333","3456","3333","3333"];
var encoded_P4data = ["4444","4567","4444","4444","4567","4444","4444","4567","4444","4444"];
var encoded_xdata = ["10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00","10:20:00"];
</script>
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
var RecordTime= new Array;
var P1data = new Array; // This would be the first array passed from PHP
var P2data = new Array; // This would be the second array passed from PHP
var P3data= new Array; // This would be the third array passed from PHP
var P4data = new Array; // This would be the second array passed from PHP
P1data = encoded_P1data;
P2data = encoded_P2data;
P3data= encoded_P3data;
P4data = encoded_P4data;
RecordTime = encoded_xdata ;
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'RecordTime');
data.addColumn('number', 'P1');
data.addColumn('number', 'P2');
data.addColumn('number', 'P3');
data.addColumn('number', 'P4');
/* create for loops to add as many columns as necessary */
var len = encoded_P1data.length;
data.addRows(len);
for(i=0; i<len; i++) {
data.setValue(i, 0, new Date(RecordTime[i])),
//data.setValue(i, 0, RecordTime([i])); /* x-axis */
data.setValue(i, 1, parseInt(P1data[i])), /* Y-axis category #1*/
data.setValue(i, 2, parseInt(P2data[i])), /* Y-axis category #2*/
data.setValue(i, 1, parseInt(P3data[i])), /* Y-axis category #3*/
data.setValue(i, 2, parseInt(P4data[i])) /* Y-axis category #4*/
}
/**************************end of loops*****************************/
var chart = new
google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.allowRedraw = true;
chart.draw(data, {displayAnnotations: false });
}
//chart.draw(data);
</script>
</body>
<div id='chart_div' style='width: 800px; height: 600px;'></div>
</html>