Afficher vos graphiques avec HighStock

Vous avez crée un script lua dont vous êtes fier, un .sh génial, un programme python hors du commun, un tuto , c'est ici que vous pouvez les partager.
Soyez précis quant aux prérequis, les manips à faire pour que votre bijou fonctionne (des chmod ?, un apt-get à faire ...)
Décrivez précisément son fonctionnement
Placez votre code entre [Quote] et {/Quote]
papoo
Messages : 965
Inscription : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :

Afficher vos graphiques avec HighStock

Messagepar papoo » 26 nov. 2017, 15:50

Après avoir stocké vos données dans une base MySql passons à leurs mise en forme et exploitation.
pour cela il vous faut décompresser le fichier zip
mesgraphs.zip
(560.23 Kio) Téléchargé 49 fois
sur votre serveur web .
Le fichier info_db.php est à personnaliser avec les informations de votre base de données adresse:port, login et mot de passe notamment.
ensuite lancez le fichier feeds.php qui va vous permettre de lister les données contenues dans votre base de données et afficher celles que vous désirez via un formulaire tout simple dont vous pourrez modifier le style via le fichier form.css.
le contenu du fichier feeds.php

Code : Tout sélectionner

 <?php //feeds.php
include("info_db.php");

/* if (!isset($_GET['f1']) || !isset($_GET['v1']))
    die ("v or f is null");

$feeds = $_GET['feeds']; */

$db = mysql_connect($hostname, $db_login, $db_passw);
mysql_select_db($db_name, $db) or die('Erreur SQL !<br>'.mysql_error());
/* $sql = "INSERT INTO ".$db_table." (ffeed, fvalue) VALUES";
for($i=1;$i<=$feeds;$i++){
   $feed = $_GET['f'.$i];
   $value = $_GET['v'.$i];
   if ($i==$feeds){
      $sql.=" (\"".$feed."\", ".$value.")";
   } else {
      $sql.=" (\"".$feed."\", ".$value."),";
   }
} */
$sql = "SELECT DISTINCT ffeed FROM ".$db_table." ORDER BY ffeed ASC";
$req = mysql_query($sql, $db) or die('Erreur SQL !<br>'.mysql_error());

// on recupere le resultat sous forme d'un tableau
//$data = mysql_fetch_array($req);
?>
<!DOCTYPE HTML>
<html manifest="" lang="fr-FR">
<head>
   <meta charset="UTF-8">
<link rel="stylesheet" href="form.css">
<meta charset="UTF-8">
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

    <title>Graphiques</title> 
 
 
<script>
 
    $(document).ready(function() {
        $("#checkall").click(function() {
         
            $("input:checkbox").each(function(){
                 
                var checked = $("#checkall").attr("checked");
                 
                if(checked == "checked") {
                     
                    $(this).attr('checked', true);
                } else {
                     
                    $(this).attr('checked', false);
                     
                } 
            });
        });
    });
</script>
</head>
<body>


 
    <form method="get" action="graph.php">
   <p>
       <H2>Sélectionner les graphiques à afficher</H2><br />   
    <div>
        <label for="titre">titre :</label>
        <input type="text" name="titre" id="titre" />
    </div>
    <div>
           <label for="suffix">Unité à afficher</label>
       <select name="suffix" id="suffix">
           <option value=""></option>
           <option value="°C">°C</option>
           <option value="Watt">Watt</option>
           <option value="kWh">kWh</option>
           <option value="%">%</option>
     </div>           
</select><br /> </br>
     
<?php
    // on scanne tous les tuples un par un
while ($data = mysql_fetch_array($req)) {
   // on affiche les résultats
   //echo $data['ffeed']."<br>";

?>       <input type="checkbox" name="feeds[<?php echo $data['ffeed']?>]" id="<?php echo $data['ffeed']?>" /> <label for="<?php echo $data['ffeed']?>"><?php echo $data['ffeed']?></label><br />


<?php   

}


// on libère l'espace mémoire alloué pour cette interrogation de la base
/* mysql_free_result ($req);
mysql_close (); */

?>
<br/>
<input type="checkbox"  id="checkall"/> <label>tout sélectionner</label>
<br/>
</p>
<p><input type="submit" value="OK"></p>
</form></body>

</html>

vous devriez obtenir un résultat similaire à celui la pour le formulaire
pour le CSS du formulaire je ne me suis pas foulé, n'hésitez pas à me proposer votre travail si vous l'améliorez.
2017-12-31 15_29_48-Graphiques - Firefox Developer Edition.png
2017-12-31 15_29_48-Graphiques - Firefox Developer Edition.png (25.43 Kio) Consulté 263 fois


validez le formulaire et vous obtiendrez l'affichage de vos données similaires à mes températures départ et retour chauffage

Graph.png
Graph.png (134.74 Kio) Consulté 443 fois
domoticz beta/RaspBerry PI3 jessie
http://pon.fr github

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


papoo
Messages : 965
Inscription : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :

Re: Afficher vos graphiques avec HighStock

Messagepar papoo » 31 déc. 2017, 15:37

mise à jour du fichier feeds.php comprenant maintenant une case à cocher "tout sélectionner"
https://github.com/papo-o/domoticz_scri ... /Mesgraphs
domoticz beta/RaspBerry PI3 jessie
http://pon.fr github

konix
Messages : 20
Inscription : 17 nov. 2015, 09:00

Re: Afficher vos graphiques avec HighStock

Messagepar konix » 08 janv. 2018, 15:26

Merci bcp pour ton boulot.
Je l'utilise et cela fonctionne vraiment très bien !
:)

papoo
Messages : 965
Inscription : 10 janv. 2016, 11:29
Localisation : Limoges (87)
Contact :

Re: Afficher vos graphiques avec HighStock

Messagepar papoo » 08 janv. 2018, 21:16

merci de ton retour :D
domoticz beta/RaspBerry PI3 jessie
http://pon.fr github

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


thuglife
Messages : 29
Inscription : 28 janv. 2017, 23:08

Re: Afficher vos graphiques avec HighStock

Messagepar thuglife » 13 janv. 2018, 19:52

Deux évolutions :
Pour les kwh, possible d'afficher en barregraph ?
Avoir une deuxième échelle à droite pour afficher par exemple la Condo en barregraph et la température extérieure en courbe ?
:D

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.



Revenir vers « La Bibliothèque Scripts et Tutos »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 10 invités