Actualisation de données hightcharts

par **FredP38** » 31 déc. 2015, 18:53

Bonjour à tous,

J'utilise Highcharts pour des graphiques simples. J'alimente le graphique à partir d'une base SQL que j'interroge en PHP.
Il existe un plugin permettant de modifier un graphique à la souris et déplaçant simplement le point désiré.
Savez vous s'il serait possible de récupérer les données modifiées pour mettre à jour la base SQL ?
J'ai vu un plugin permettant de télécharger les données du graphique mais je n'ai pas testé plus loin cette fonction
L'application réalisée est un thermostat évolué pour piloter un chauffage. L'interface graphique permet de tracer les courbes de montée en température.
Merci par avance pour l'aide de la communauté

Frédéric

par **ghouariadel** » 22 mars 2014, 18:01

salut a tous, et salut libertux
désolé sur ce retard par ce que j'ai ete avec une autre application,
bref, j'ai suivé votre toto, je pense que j'ai fait la première partie, à l'aide de ce site web qui est très compréhensible http://blueflame-software.com/blog/how- ... sing-json/, je parle sur le fichier json je vous montre le résultat et le code, je avis continuer la deuxième partie bien sur c'est l'ajax, je avis continuer a suivre votre réponse.

je te promet qu'après avoir terminer la rédaction du tutoriel actuel je vais voir si je peut écrire un tutoriel sur le sujet.

la vérité merci merci, ça vraiment c'est une grande chose que tu va offrir pour les débutants comme moi, par ce que on est besoin de comprendre les notions de base, c'est pas juste de faire marcher l'application, donc je avis continuer, en même temps j’attends votre toto.
merci a la prochaine.

code, get_data.php

<?php
$con = mysql_connect("localhost","root","******");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("test", $con);

$sth = mysql_query("SELECT T_PV FROM pvt");
$rows = array();
$rows['T_PV'] = 'T_PV';
while($r = mysql_fetch_array($sth)) {
    $rows['data'][] = $r['T_PV'];
}

$sth = mysql_query("SELECT T_am FROM pvt");
$rows1 = array();
$rows1['T_am'] = 'T_am';
while($rr = mysql_fetch_assoc($sth)) {
    $rows1['data'][] = $rr['T_am'];
}

$result = array();
array_push($result,$rows);
array_push($result,$rows1);

print json_encode($result, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

la sortie (le résultat de ce code):
[{"T_PV":"T_PV","data":["40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","40\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","39\r\n","37\r\n","37\r\n","38\r\n","38\r\n","38\r\n","38\r\n","39\r\n","39\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","37\r\n","37\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","38\r\n","37\r\n","37\r\n","37\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","37\r\n","37\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","36\r\n","","36\r\n","36\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","36\r\n","36\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","35\r\n","34\r\n","34\r\n"]},{"T_am":"T_am","data":["22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","21\r\n","21\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n","22\r\n"]}]

par **libertux** » 16 mars 2014, 11:40

bonjour,

1- es ce que vous pouvez m'expliquer plus votre commentaire, merci et bien sur je suis désolé par ce que c'est la 1 fois que je avis utiliser ajax

//ici parcoure de ton json (qui est le "data") et mise a jour de ton affichage (reconstruction des graphes, vous pouvez utiliser md5 pour vérifier s'il y a des modification avant d’entamer la reconstruction des graphes)

en fait votre fichier "get_data.php" doit effectuer un "select" pour extraire l'état actuel des valeurs de la base de données, puis il doit retourner un tableau JSON comme suit :

...
return json_encode($resultat);
}
...

le "$resultat" est un tableau contenant les variables actuelle, si vous avez un tableau multi dimensionnel tu fait quelque chose comme suit :

...
//tableau final a retourner
$tabfinal = array();
//conteur d'éléments
$count = 1;
...
   foreach ($query as $row){
      
      $elem = array();
      $elem ['key1'] = $row->champs1;
      $elem ['key2'] = $row->champs2;
      ...
      $tabfinal[$count] = json_encode($elem);
      $count++;
   }
   //on retourne notre tabfinal au format JSON String.
   echo json_encode($tabfinal);
...

maintenant l'AJAX, nous avons le code suivant :

[javascript]
<script>

$(document).ready(function($) {
ajax_update();
function ajax_update(){

//on lance ajax
$.ajax({
url : "votreurl/get_data.php",
type: "POST",
data : Data,
success: function(data){

//ici parcoure de ton json (qui est le "data") et mise a jour de ton affichage (reconstruction des graphes, vous pouvez utiliser md5 pour vérifier s'il y a des modification avant d’entamer la reconstruction des graphes)

},error: function(){
//afficher une erreur
}
});

// on attend 5 secondes avant de rappeler la fonction ajax_update
setTimeout(ajax_update, 5000);

}

});

</script>
[/javascript]

voila une amèlioration déjà de l'ajax :

[javascript]

<script>

$(document).ready(function($) {
ajax_update();
function ajax_update(){

//on lance ajax
$.ajax({
url : "votreurl/get_data.php",
type: "POST",
data : Data,
success: function(data){

//ici parcoure de ton json (qui est le "data") et mise a jour de ton affichage (reconstruction des graphes, vous pouvez utiliser md5 pour vérifier s'il y a des modification avant d’entamer la reconstruction des graphes)

},error: function(){
//afficher une erreur
},complete: function() {
// on attend 5 secondes avant de rappeler la fonction ajax_update
setTimeout(ajax_update, 5000);
}
});
}

});

</script>
[/javascript]

dans la section "success" on à :

[javascript]
...
success: function(data){

}
...
[/javascript]

la on doit recevoir la chaine JSON renvoyer par notre fichier "get_data.php" on doit donc la transformer en un tableau pour pouvoir extraire les données, on procède alors comme suit :

[javascript]
...
success: function(data){
data = jQuery.parseJSON(data);
//on parcoure notre tableau comme suit
$.each(data, function(key, value) {

//et n'oublions pas que nous avons définit u tableau multidimensionnel donc les "key" sont les valeurs d'un compteur et les "value" sont des chaine JSON alors on procède comme suit :
value = jQuery.parseJSON(value);
// et la on retrouve no données pour chaque élément: comme suit value['key1'], value['key2']

});
}
...
[/javascript]

supposant maintenant que dans notre fichier PHP ou interface graphique nous avons une "div" d'id = "mydiv" dont le contenu doit etre mis ajours par la valeur de "key1", on procède alors comme suit :

[javascript]
...
success: function(data){
data = jQuery.parseJSON(data);
//on parcoure notre tableau comme suit
$.each(data, function(key, value) {

//et n'oublions pas que nous avons définit u tableau multidimensionnel donc les "key" sont les valeurs d'un compteur et les "value" sont des chaine JSON alors on procède comme suit :
value = jQuery.parseJSON(value);
// et la on retrouve no données pour chaque élément: comme suit value['key1'], value['key2']
$("#mydiv").text(value['key1']);
....

});
}
...
[/javascript]

et voila, on à récupérer les valeurs de la Base de données et on à mis ajours notre interface ou (Dashboard) dynamiquement avec ajax

3- es ce que le code du graphe highcharts je avis l'insérer dans le code ajax?

bah ca dépend de la situation, si tu veut juste mettre ajours des valeurs simple afficher hors des graphe c'est pas obligatoire de l’intégrer dans la fonction ajax si non si tu veut régénérer les graphes bah tu est obliger de l'intégrer dans la section "success" de la fonction ajax.

4- ou je peut trouver des exemples ajax-mysql-highcharts-php?, bien sur quels traitent le sujet des graphes dynamiques avec la source mysql dynamique

La mon ami il faut voir avec ceux qui on déjà travailler avec highcharts, ou bien tu à GOOGLE

mais je te promet qu'après avoir terminer la rédaction du tutoriel actuel je vais voir si je peut écrire un tutoriel sur le sujet.

Bon Codage

par **ghouariadel** » 15 mars 2014, 12:38

bonjours libertux:
merci pour cette réponse qui est très intéressante.
la vérité je travail sur cette application de puis une semaine pour justement l'affichage du graphe interactif avec le changement de la base de donnée, pour votre réponse j'ai 4 questions.
1- es ce que vous pouvez m'expliquer plus votre commentaire, merci et bien sur je suis désolé par ce que c'est la 1 fois que je avis utiliser ajax

//ici parcoure de ton json (qui est le "data") et mise a jour de ton affichage (reconstruction des graphes, vous pouvez utiliser md5 pour vérifier s'il y a des modification avant d’entamer la reconstruction des graphes)

2- comme vous ma avez dit, j'ai créer une autre page php, et j'ai l'appelé get_data.php, cette page commence par la commande suivante:

require("mysql_connect.php");

// dans cette page (mysql_connect.php) il y a que les fonctions qui sont les responsables sur la communication avec la base de données mysql.

j'ai inséré après la commande

require("mysql_connect.php");

dans la page get_data.php, mes requêtes quelles interrogent la page de données, et après es ce que je doit insérer votre code ajax?, ou il y a d'autre choses a ajouter.
3- es ce que le code du graphe highcharts je avis l'insérer dans le code ajax?

4- ou je peut trouver des exemples ajax-mysql-highcharts-php?, bien sur quels traitent le sujet des graphes dynamiques avec la source mysql dynamique

merci

par **libertux** » 15 mars 2014, 01:31

Bonsoir,

Pour la mise à jour des données dynamiquement il faut utilisé ajax, j'explique:

1- tu fait un fichier php dans le quel tu exécute la requête sql et tu retourne le résultat en JSON comme t'as fait au dessus, disant que le fichier est nommé "get_data.php".
2- l'ajax:

[javascript]

<script>

$(document).ready(function($) {
ajax_update();
function ajax_update(){

//on lance ajax
$.ajax({
url : "votreurl/get_data.php",
type: "POST",
data : Data,
success: function(data){

//ici parcoure de ton json (qui est le "data") et mise a jour de ton affichage (reconstruction des graphes, vous pouvez utiliser md5 pour vérifier s'il y a des modification avant d’entamer la reconstruction des graphes)

},error: function(){
//afficher une erreur
}
});

// on attend 5 secondes avant de rappeler la fonction ajax_update
setTimeout(ajax_update, 5000);

}

});

</script>

[/javascript]

par **ghouariadel** » 14 mars 2014, 15:46

salut a tous,
j'ai un problème avec l'actualisation de données automatiquement du graphe hightcharts, j'ai adapté un code hightcharts pour mon application, ça marche il fonctionne correctement le code est le suivant:

<?php
//Connexion a la base de données
// Remplacer localhost, highcharts, username, password, par vos informations de connexion.
$hostname = "localhost";
$database = "test";
$username = "root";
$password = "*******";
$Conn = mysql_pconnect($hostname, $username, $password);
 
mysql_select_db($database, $Conn);
 
$query_conso = "SELECT P FROM  `pvt`";

$conso = mysql_query($query_conso, $Conn);
$row_conso = mysql_fetch_assoc($conso);
$mysql_select_db($database, $Conn);
$query_date = "SELECT Date FROM  `pvt`";
$date = mysql_query($query_date, $Conn);
$row_date = mysql_fetch_assoc($date);
?>
<html>
<head>
<title> teste avec notre base mysql</title>
<!-- Chargement des librairies: Jquery & highcharts -->
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/gray.js" ></script>
<script type="text/javascript" src="js/modules/exporting.js" ></script>
</head>
 
<body>
    <p>
<!-- Chargement des variables, et paramètres de Highcharts -->
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
            //Titre du graphique
                text: 'ssanino'
            },
        subtitle: {
        //date("d/m/Y - H:i", strtotime($row_date['Date'])) permet la mise en forme de la date:
        //Dans le cas actuel: Jour / mois / Année - Heure : Minutes
            text: 'Dernier enregistrement: <?php echo date("d/m/Y - H:i", strtotime($row_date['Date'])); ?> <br/>Vous pouvez effectuer un zoom sur le graphique en maintenant le clique gauche souris sur une zone du graphique'
 
        },
            xAxis: {
            tickmarkPlacement: 'on',
            //Affichage des dates précédemment sélectionnées dans la requete sql
                categories : [<?php do { ?>'<?php echo date("H:i", strtotime($row_date['Date'])); ?>', <?php } while ($row_date = mysql_fetch_assoc($date)); ?>],
                labels: {
                //Step 2 permet d'afficher qu'une date sur deux
                 step: 2,
                 //rotation 90 permet la rotation a 90° des dates
                rotation: 45
 
            }
                },
            yAxis: {
                title: {
                    text: 'P (jW)'
                }
            },
            tooltip: {
                shared: true,
                //Ajout d'une unité de mesure lors du survole d'un point du graphique
                valueSuffix: ' jW'
            },
            legend: {
            //Legend permet d'afficher la légende sous le graphique.
            //La légende affiche, le nom de la courbe, ainsi que sa couleur
        //Pas forcément utile lorsqu'il n'y a qu'une seule courbe
            //false pour désactiver et true pour activer
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    threshold: null
                }
            },
 
            series: [{
                type: 'area',
                name: 'P',
                //Affichage des consommations précédemment sélectionnées dans la requete sql
                data: [<?php do { ?><?php echo $row_conso['P']; ?>,<?php } while ($row_conso = mysql_fetch_assoc($conso)); ?>]
            }]
        });
    });

        </script>
<!-- Affichage du graphique -->
<div id="container" style="width:100%; height:400px;">
</div></p>
<div align="center">
    <p><a </a></p>
    </div>
</body>
</html>

comme j'ai déjà dit mes données dans une base de données mysql ils sont dynamique avec le temps, je veut que mon graphe aussi etre dynamique avec le changement de données source, j'ai trouvé plusieurs solution sur web (Ajax particulièrement) mais j'ai pas arrivé a comprendre le principe de fonctionnement de cette bibliothèque, commet je peut actualiser une partie de mon script php, bien sur le commande select from chaque période de temps

j'ai besoin d'aide merci

Actualisation de données hightcharts

Répondre

Étendre la vue Revue du sujet : Actualisation de données hightcharts

Re: Actualisation de données hightcharts

Re: Php,Mysql,Json & highcharts

Re: Php,Mysql,Json & highcharts

Re: Php,Mysql,Json & highcharts

Re: Php,Mysql,Json & highcharts

Actualisation de données hightcharts