[AJAX] les graphe en temps réel
Salut
Alors voici un problem qui a intreguer les developpeurs pour 37 joure de recherche.
le problem est coment réaliser un graphes qui defile dans le temps selon les donnée .
a titre d'exemple le graphe qui represent l'evolution du travaille du CPU sur window xp.
alors aider moi a realiser un script php qui extrait des donnée a partire d'une base de données Mysqle et affiche les donnée dans un graphe.
Remarque:
mon pc est connnecter avec une boite noir qui mesure la temperature de l'environement et insere c données sur ma base de données mysqle.
et commme la bas de donnée et ajour chaque mes 3 ou 5 seconde
Evolution du graphe en temps réel
voila les resultats obtenus jusqu'a maintennant.
bon aider moi de comment faire deffiler un graphe dans le temps .
donner moi des idée ou bien des lien utiles.
et surtout es que le jpgraphe fait l'affaire ou non .pour que je commence de travaille avec Ajax.
merci pour toutes formes d'aide.la solution est proche!!
//le script php qui crere le graphe
//Racine contient la bibliotheque jpgraphe
//Genere_Graphe.php
//remarque:
telecharger la bibliotheuq jpgraphe 1.20.5 et copier la dans le mem repertoire des 2 scriptes ces dessous et vous aller voire le resultats
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<?php
// Example on how to treat and format timestamp as human readable labels
require_once("Racine/jpgraph.php");
require_once("Racine/jpgraph_line.php");
// Number of "fake" data points
DEFINE('NDATAPOINTS',500);
// Assume data points are sample every 10th second
DEFINE('SAMPLERATE',10);
// Callback formatting function for the X-scale to convert timestamps
// to hour and minutes.
function TimeCallback($aVal) {
return Date('H:i', $aVal);
}
// Get start time
$start = time();
// Set the start time to be on the closest minute just before the "start" timestamp
$adjstart = floor($start);// / 60);
// Create a data set in range (20,100) and X-positions
// We also apply a simple low pass filter on the data to make it less
// random and a little smoother
$data = array();
$xdata = array();
$data[0] = rand(20,60);
$xdata[0] = $adjstart;
for( $i=1; $i < NDATAPOINTS; ++$i ) {
$data[$i] = rand(20,100)*0.2 + $data[$i-1]*0.8;
$xdata[$i] = $adjstart + $i * SAMPLERATE;
}
// Assume that the data points represents data that is sampled every 10s
// when determing the end value on the scale. We also add some extra
// length to end on an even label tick.
$adjend = $adjstart + (NDATAPOINTS+10)*10;
$graph = new Graph(950,500);
$graph->SetMargin(40,20,30,50);
// Now specify the X-scale explicit but let the Y-scale be auto-scaled
$graph->SetScale("intlin",0,0,$adjstart,$adjend);
$graph->title->Set("La Température Dans La Salle Des Cuves");
// Setup the callback and adjust the angle of the labels
$graph->xaxis->SetLabelFormatCallback('TimeCallback');
$graph->xaxis->SetLabelAngle(90);
// Set the labels every 5min (i.e. 300seconds) and minor ticks every minute
$graph->xaxis->scale->ticks->Set(300,60);
$line = new LinePlot($data,$xdata);
//$line->SetColor('lightblue');
$line->SetColor('red');
$graph->Add($line);
$graph->Stroke();
?> |
// contenu du fichier voire_graphe
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!doctype html public "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="refresh" content="0">
<title>Untitled web-page</title>
</head>
<body>
<?php
$i=0;
while($i<10)
{
echo '<img src="Genere_Graphe.php" >';
$i++;
}
?>
</body>
</html> |
