AmChartsを使用してMySQLデータベースに格納されたデータのグラフを表示するWebページを作成していますが、 AmChartsチャートメーカーの「時系列、秒」テンプレート(提供されたデータを含むdataProvider
を含む)のコードを自分のページにコピーしました。期待どおり、これは完全に正常に動作します。AmCharts dataLoaderがデータをロードしていないのにdataProviderにデータを貼り付けて使用しています。
その後、AmChartsのウェブサイトでdataLoader
チュートリアルを使用してデータベースからデータを読み込もうとしました。私はdataProvider
一部を除去し、"type": "serial",
ラインの下以下で添加することにより、私の現在のコード(上述のようにチャートメーカーからコピー)を編集:
"dataLoader": {
"url": "getdata.php"
},
最後IグラフセクションにcategoryField
二valueField
属性を変更しました彼らは私のデータとマッチしました。チャートのページをロードするときしかし、私が得るすべてのタイトルで空のチャートである
<?php
$host = "*";
$username = "*";
$password = "*";
$database = "*";
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 22:30:00'";
$executeReport = mysqli_query($connection, $reportQuery);
$data = array();
while ($row = $executeReport->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
?>
:getdata.php
ファイルには、私が上のグラフを表示したいページと同じディレクトリにあり、次のコードが含まれています、伝説とAmCharts透かし、データは表示されません。私はdataLoader
属性を削除し、dataProvider
属性に上記のJSONを貼り付けるとき、すべてが正常に動作し、さらに
[{"reportid":"00000001","timestamp":"2016-09-20 18:53:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000002","timestamp":"2016-09-20 18:54:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.94","soil30temp":"15.56","soil100temp":"15.63"},{"reportid":"00000003","timestamp":"2016-09-20 18:55:00","shieldedtemp":"16.31","exposedtemp":"16.38","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000004","timestamp":"2016-09-20 18:56:00","shieldedtemp":"16.31","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000005","timestamp":"2016-09-20 18:57:00","shieldedtemp":"16.25","exposedtemp":"16.25","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000006","timestamp":"2016-09-20 18:58:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000007","timestamp":"2016-09-20 18:59:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000008","timestamp":"2016-09-20 19:00:00","shieldedtemp":"16.19","exposedtemp":"16.13","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"}]
:私は、私は、ブラウザでそれを実行し、次の出力を得たのでgetdata.phpファイルが正しいことを知っていますデータが表示されます。
メインチャートのページのためのコードは以下の通りです: "; $ユーザ名= ""; $パスワード=" "; $データベース="「;
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 19:00:00'";
//$executeReport = mysqli_query($connection, $reportQuery);
//$data = array();
//while ($row = $executeReport->fetch_assoc()) {
// $data[] = $row;
//}
//echo json_encode($data);
?>
<html>
<head>
<title>Remote Latest Data Warwick</title>
<style>
* {
font-family: "Segoe UI", "-apple-system", "Helvetica Neue";
}
.headerContainer {
width: 100%;
height: 88;
top: 0;
position: fixed;
background: black;
}
.headerRight {
width: 560;
height: 78;
float: right;
}
.textMo {
margin-top: 16;
margin-left: 25;
float: left;
font-size: 38;
color: white;
}
.textRld {
margin-top: 8;
margin-right: 15;
float: right;
font-size: 40;
color: white;
}
.textLoc {
margin-right: 70;
float: right;
font-size: 13;
color: white;
}
.greenBar {
width: 100%;
height: 7;
top: 78;
position: fixed;
background: #cbff31;
}
.footerContainer {
width: 100%;
height: 39;
margin-bottom: 0 auto;
bottom: 0;
position: fixed;
background: black;
}
.footerFieldContainer {
max-width: 1216;
height: 39;
margin: 0 auto;
padding-top: 2;
padding-right: 10;
padding-left: 10;
position: center;
}
.footerFieldLabel {
margin-top: 0;
padding-top: 7;
margin-right: 10;
float: left;
color: #cbff31;
font-size: 15;
box-sizing: border-box;
}
.footerFieldBorder {
width: 91;
height: 31;
margin-top: 2;
padding-top: 2;
float: left;
background: black;
color: black;
border: 2 solid #575757;
border-radius: 5;
box-sizing: border-box;
}
.footerFieldText {
width: 100%;
float: right;
color: white;
text-align: center;
font-size: 19;
}
</style>
<script>
function onLoad() {
startTime();
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var dd = checkTime(today.getDate());
var yyyy = today.getFullYear();
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var MM = monthNames[today.getMonth()];
var hh = today.getHours();
var mm = checkTime(today.getMinutes());
var ss = checkTime(today.getSeconds());
var formatted = dd + " of " + MM + " " + yyyy + " at " + hh + ":" + mm + ":" + ss;
document.getElementById('currentTime').innerHTML = formatted;
timer = setTimeout(function() { startTime() }, 500);
}
</script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript">
AmCharts.makeChart("temperatures",
{
"type": "serial",
"dataLoader": {
"url": "getdata.php"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"theme": "default",
"categoryAxis": {
"minPeriod": "ss",
"parseDates": true
},
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN:SS"
},
"chartScrollbar": {
"enabled": true
},
"trendLines": [],
"graphs": [
{
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "shieldedtemp"
},
{
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "exposedtemp"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
]
}
);
</script>
</head>
<body onload="onLoad()" style="margin: 0">
<!-- MAIN: Page header -->
<div class="headerContainer">
<p class="textMo">Weather Station</p>
<div class="headerRight">
<b class="textRld">Remote Latest Data Warwick</b>
<i class="textLoc">Latitude: 52.279998, Longitude -1.561793</i>
</div>
<div class="greenBar"></div>
</div>
<!-- MAIN: Data fields -->
<div class="mainContainer" style="background: red">
<div class="actionBar">
<a style="float: right" href>View Live Data</a>
</div>
<div id="temperatures" style="width: 100%; height: 400; background: #ffffff"></div>
</div>
<!-- MAIN: Page footer -->
<div class="footerContainer">
<div class="footerFieldContainer">
<p class="footerFieldLabel">Current Time:</p>
<div class="footerFieldBorder" style="width: 273">
<b class="footerFieldText" id="currentTime">16 of Sep 2016 at 12:02:35</b>
</div>
<p class="footerFieldLabel" style="margin-left: 15">Time of Data:</p>
<div class="footerFieldBorder" style="width: 70">
<b class="footerFieldText">
<?php
$date = date("H:i", strtotime($reportArray[1]));
echo $date;
?>
</b>
</div>
<div style="float: right">
<p class="footerFieldLabel">Approximate Number of Seconds to Update:</p>
<div class="footerFieldBorder" style="width: 40">
<b class="footerFieldText">59</b>
</div>
</div>
</div>
</div>
</body>
</html>
それはのように思えますチャートとデータの間に何らかの壊れたリンクがありますが、チャートとデータそのものは問題ありません。なぜそれが機能しないのですか?どのようにすれば正常に動作するのですか?
完璧!チャートメーカーのコードをチュートリアルと混在させると明らかに見逃してしまいます。ありがとうございました – HenryHunt