Witam wszystkich,
Dopiero zaczynam przygodę z amcharts oraz js w ogóle i mam problem, którego nie mogę rozwiązać. Mianowicie mam prostą tabelę w mysql o strukturze:
ID INT(11) AUTO_INCREMENT PRIVATE KEY
CZAS DATETIME NOT NULL
PM1 INT(11) NOT NULL
PM10 INT(11) NOT NULL
PM25 INT(11) NOT NULL
w skrypcie php pobieram te wartości z tabeli i wysyłam w postaci json dalej na stronę ze skryptami amCharts:
<?php
include_once 'strings.php';
$mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$sql = "SELECT pm1, pm10, pm25, czas FROM looko2 ORDER BY CZAS ASC";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode( $data );
} else {
echo "0 results";
}
$mysqli->close();
?>
Sam skrypt amCharts
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script src="amcharts/plugins/export/export.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="amcharts/themes/light.js" type="text/javascript"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
<style>
body, html {
font-family: Verdana;
font-size: 12px;
}
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<script>
$(document).ready(function(){
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataLoader": {
"url": "scripts/getData.php",
"format": "json",
"showErrors": true,
"noStyles": true,
"async": true
},
"categoryField": "czas",
"rotate": false,
"dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"labelRotation": 60,
"minPeriod": "ss"
},
"graphs": [{
"valueField": "pm1",
"bullet": "round",
"bulletBorderColor": "#FFFFFF"
}, {
"valueField": "pm10",
"bullet": "round",
"bulletBorderColor": "#FFFFFF"
}, {
"valueField": "pm25",
"bullet": "round",
"bulletBorderColor": "#FFFFFF"
} ]
} );
});
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
W wyniku wykonania tego skryptu ciągle mam domyślny interwał czasu - dzień. LabelRotation też nie działa i nie obraca etykiet. Ogólnie mam wrażenie, że coś jest nie tak, bo ile parametrów bym nie zmieniał, to wykres jakby nie reagował na zmiany. DateFormat już próbowałem inny ustawić i też nic to nie dało.
Proszę was o podpowiedzi co robię źle i co i jak ustawić aby dane były wyświetlane co sekundę.