1
Google Charts APIを使用してMySQLデータベースに基づく折れ線グラフを作成しようとしています。データベースには、温度とタイムスタンプが含まれています。Google Chart API Line Chartの無効なJSON文字列
データを取得してJSONに変換するgetData.phpがあります。
<?php
$servername = "xxx";
$username = "xxx";
$password = "xxx";
$dbname = "xxx";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$qry = "SELECT * FROM temp";
$result = mysqli_query($conn,$qry);
$table = array();
$table['cols'] = array(
array('label' => 'Time', 'type' => 'datetime'),
array('label' => 'Temperature', 'type' => 'number')
);
$rows = array();
foreach($result as $row){
$temp = array();
//$temp[] = array('v' => 'Date(' . $row['time'] . ')'); OLD
//turn timestamps into correct datetime form Date(Y,n,d,H,i,s)
$temp[] = array('v' => 'Date('.date('Y',strtotime($row['time'])).',' .
(date('n',strtotime($row['time'])) - 1).','.
date('d',strtotime($row['time'])).','.
date('H',strtotime($row['time'])).','.
date('i',strtotime($row['time'])).','.
date('s',strtotime($row['time'])).')');
$temp[] = array('v' => (float) $row['temperature']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, true);
echo $jsonTable;
?>
タイムスタンプはここでGoogleの指示に従って、「日付（年、月、日、時、分、秒、ミリ秒）」形式に変換されます。ここではhttps://developers.google.com/chart/interactive/docs/datesandtimes#dates-times-and-timezones
は私のmain.htmlとあります。これは、Googleの例に基づいている（https://developers.google.com/chart/interactive/docs/php_example#exampleusingphphtml-file）
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData); //Line 27
var options = {'title':'Temperature',
'width':720,
'height':480};
var chart = new google.charts.Line(document.getElementById('chart_div'));
//chart.draw(data, options);
//chart.draw(data, {width: 400, height: 240});
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart_div"><p id="test"></p></div>
</body>
<html>
ウェブサイトが空白のとChromeのデバッガはこのエラーを示しています
不明なエラー：無効なJSON文字列：
<body>
{"cols":[{"label":"Time","type":"datetime"},{"label":"Temperature","type":"number"}],"rows":[{"c":[{"v":"Date(2016,3,14,10,36,30)"},{"v":22}]},{"c":[{"v":"Date(2016,3,14,10,37,31)"},{"v":25}]},{"c":[{"v":"Date(2016,3,14,10,37,53)"},{"v":21}]},{"c":[{"v":"Date(2016,3,15,01,23,37)"},{"v":21}]}]}
</body>
yl @ VM1981:170
Ol @ VM1981:174
Sp @ VM1981:234
drawChart @ main.html:27
google.a.b.Na @ loader.js:147
g @ loader.js:145
main.htmlと： 27はvar data = new google.visualization.DataTable（jsonData）です。ライン。ここで
は、私がここに途方に暮れて完全だjsonlint
{
"cols": [{
"label": "Time",
"type": "datetime"
}, {
"label": "Temperature",
"type": "number"
}],
"rows": [{
"c": [{
"v": "Date(2016,3,14,10,36,30)"
}, {
"v": 22
}]
}, {
"c": [{
"v": "Date(2016,3,14,10,37,31)"
}, {
"v": 25
}]
}, {
"c": [{
"v": "Date(2016,3,14,10,37,53)"
}, {
"v": 21
}]
}, {
"c": [{
"v": "Date(2016,3,15,01,23,37)"
}, {
"v": 21
}]
}]
}
でフォーマットJSONです。 JSON文字列はうまくなければならず、jsonlint.comによっても検証されています。どんな助けでも大歓迎です。
削除されたコメントについて：データポイントは非常に近く、軸ラベルはそれほど有用ではありませんでした。あなたはフォーマットを編集することができます。varオプション= { 'タイトル'： '温度'、 '幅'：720、 '高さ'：480、 \t \t \t \t \t 'hAxis'：{ '形式'：「DD/MM/yyyy HH：mm '}}; –
もう一度、私は自分自身を見つけ出すことができたので、コメントを編集できなかったので、それを削除することにしました。答えは、
タグをgetData.phpから削除することでした。答えに感謝します。私は実際にはどのようにグラフのすべてのドットのX軸上のタイムスタンプを取得することができます考えています。ここにグラフの写真があります。現在の数値はテスト用です。 http://puu.sh/olQh0/8307ba8a9c.png – Alqio連続したグラフに問題があるようです。横軸を時間軸に合わせてスケーリングする必要がない場合は、datetime型からstring型に切り替えて、タイムスタンプを文字列としてフォーマットすることで離散型チャートに切り替えることができます。それ以外の場合、私は解決策を知りません、多分別の質問を開きますか？ –