L'ajout de données dynamiques de la ligne graphique de base de données mysql avec highcharts
Je veux ajouter un point de données pour ma ligne graphique avec ajax ou json, maintenant je doit recharger toute la page web pour montrer mes nouvelles données sur le graphique. Mais je veux afficher des données par l'ajout de point comme ces lien:
www.highcharts.com/studies/live-server.htm
J'ai été essayer de récupérer mes données de mysql pour ajouter sur le graphique en json, mais rien ne s'est passé. C'est mon code live-server-data.php :
<?php
header("Content-type: text/json");
include_once 'include/connection.php';
$db = new DB_Class();
$query = "select distinct idchip from datatable ";
$result = mysql_query( $query );
$rows = array();
$count = 0;
while( $row = mysql_fetch_array( $result ) ) {
$SQL1 = "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." datetime DESC limit 0,1 ";
$result1 = mysql_query($SQL1);
while ($rows = mysql_fetch_array($result1)) {
$data[] = $rows['1'];
$datatime[] = 'moment('.$rows['0'].').valueOf()';
}
//The x value is the current JavaScript time, which is the Unix time multiplied
//by 1000.
$x = $datatime;
//The y value is a random number
$y = $data;
}
//Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
et c'est ce que j'ai utilisé pour obtenir les données et les afficher sur un graphique dans mon index.php page.
var chart; //global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; //shift if the series is longer than 20
//add the point
chart.series[0].addPoint(eval(point), true, shift);
//call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
C'est ma carte qui-je recharger la page pour obtenir de nouvelles données pour l'instant, mais je veux ajouter un nouveau point d'graphique "temps réel"
- Dans requestData fonction, remplacer "graphique" de référence avec "ce". Comment votre point de variable ressemble (que vous pouvez obtenir de l'ajax) ?
Vous devez vous connecter pour publier un commentaire.
Je suppose que vous avez plusieurs séries du graphique où backend fournit un point unique par série par le temps.
Par souci de simplicité, je vous suggère de retourner de temps en millisecondes. Je ne suis pas trop fort en PHP, mais je suppose que le point est clair
Code côté Client sera:
Vous pouvez voir la nouvelle mise à jour de l'exemple ici
http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD
show "Essayer d'insérer des données anciennes!!!!".
et Aucune émission d'Affichage de données en temps Réel.
Affichage
JSON