addons GraphPHP - Créez des graphiques à partir de vos BDD

[Ubrain 30]

Salut les devs !
Aujourd'hui je viens de terminer la création d'un nouveau plugin.

Son concept est simple, à partir de valeurs enregistrées dans une base de données, vous pouvez reconstituer un graphique.
Mon plugin fonctionne grâce à la technologie de Google que j'ai rendu compatible à vos BDD et accessible à tous, même aux débutants !

Voici ici les informations relatives au plugin

Révélation

Screen et apparence :

Révélation

Pour avoir accès à cette image, merci de vous connecter.

Voici un aperçu du graphique une fois les données entrées dans la BDD, par ailleurs, ceci est le graphique de base lors ce que vous téléchargerez le plugin
Il y a 2 axes, l'axe Y (les années) et l'axe X (Les visiteurs),

Dans la base de données, voici la liste des entrées pour donner le résultat (screen) ci-dessus

Pour avoir accès à cette image, merci de vous connecter.

Cette suite d'entrées servent à créer le graphique
De plus, le plafond est automatique et selon ce que vous entrez tout change entre la taille, l'espace, le plafond et l'étirement des courbes.,
Il n'y a aucune limites, vous pouvez faire autant d'entrées que vous voulez, le graphique n' pas officiellement de limite  (si ce n'est celle de mettre zéro entrées, ce qui va afficher l'erreur PDO_VAR) 

Vous pouvez aussi personnaliser le graphique en modifiant sa taille,

Pour avoir accès à cette image, merci de vous connecter.

La taille initiale est de 100%, mais vous pouvez la modifier, par exemple, ci-dessous est le résultat si je change la taille à 50%

Pour avoir accès à cette image, merci de vous connecter.

 
 

Liste des erreurs possible :

Révélation

Il n'existe pas beaucoup d'erreur possible (contrairement à mes autres plugins) étant donné que le code est relativement court.

1. [GRAPH_PLUGIN_UBRAIN] ERROR (PDO_ERR)

Révélation

En entier :

[GRAPH_PLUGIN_UBRAIN] ERROR (PDO_ERR) : Impossible de se connecter à la base de données : merci de vérifier les informations entrées dans le fichier pdo.php

Toute est dit dans le message  
Il faut configurer le fichier PDO.php

Pour avoir accès à cette image, merci de vous connecter.

2. [GRAPH_PLUGIN_UBRAIN] FATAL ERROR (FILE_NO_EXIST)

Révélation

En entier :

[GRAPH_PLUGIN_UBRAIN] FATAL ERROR (FILE_NO_EXIST) : Le fichier PDO n\'a pas été trouvé sur le serveur.

C'est que le fichier pdo.php n'est pas détecté et le plugin ne peut établir une connexion avec la base de données,
A noter : il est souvent suivi de cette erreur :

[GRAPH_PLUGIN_UBRAIN] ERROR (PDO_ERR) : Impossible de se connecter à la base de données : vérifiez l\'état du fichier

Ceci veut simplement dire que le fichier ne peut pas être trouvé sur le serveur,

3. [GRAPH_PLUGIN_UBRAIN] FATAL ERROR (PDO_VAR)

Révélation

En entier :

[GRAPH_PLUGIN_UBRAIN] FATAL ERROR (PDO_VAR) : Variables corrompues, merci de consulter le manuel ou de réinstaller le plugin

Allors, il existe deux raisons à cette erreur :

• La table 

  Pour avoir accès à ce lien, merci de vous connecter.

   est vide
• Soit elle est inexistante

 

Si elle est vide, il faut simplement créer des entrées,
Si elle est inexistante, il faut simplement la réinstaller !

 

Code Entier (sauf pdo)

Révélation

/****************************************************************
* GraphPHP 1.0 développé par UBrain Fr                          *
*****************************************************************
* Merci de ne pas modifier ce message et de garder en cas de    *
* modifications "Basé sur WebController par UBrain Fr"          *
*****************************************************************
* Version 1.0 du 23 aout 2018                                   *
****************************************************************/


if (file_exists("pdo.php")) {
include('pdo.php');
        $sql = "SELECT * FROM graph_ubrain_data";
        foreach ($bdd->query($sql) as $graph) {
            $graph_value++;
        }
if($graph_value == NULL){
echo '[GRAPH_PLUGIN_UBRAIN] FATAL ERROR (PDO_VAR) : Variables corrompues, merci de consulter le manuel ou de réinstaller le plugin.<br>';
exit;
}
} else {
echo '[GRAPH_PLUGIN_UBRAIN] FATAL ERROR (FILE_NO_EXIST) : Le fichier PDO n\'a pas été trouvé sur le serveur.<br>';
echo '[GRAPH_PLUGIN_UBRAIN] ERROR (PDO_ERR) : Impossible de se connecter à la base de données : vérifiez l\'état du fichier<br>';
exit;
}
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Année', 'Visiteurs'],
<?php
        $sql = "SELECT * FROM graph_ubrain_data";
        foreach ($bdd->query($sql) as $graph) {
            echo '["'.$graph['y'].'",  '.$graph['x'].'],';
        }
?>
        ]);

        var options = {

// Titre du graphique
          title: 'Activité du Forum',
          hAxis: {title: 'Années',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 50%; height: 500px;"></div>
  </body>
</html>

Le code reste relativement court  

 

Voici ici une aide à l'insertion de données pour fabriquer un graphique

Révélation

Voici pour vous aider, un petit guide pour insérer les bons données et construire un graphique,
A noter : je n'ai pas codé de code permettant d'insertions automatiques, ce tutoriel permet d'apprendre à faire le graphique de façon manuelle !

Premièrement, vous devez choisir d'insérer une nouvelle entrée (actuellement je suis sur phpmyadmin)

Pour avoir accès à cette image, merci de vous connecter.

Puis, vous devriez tomber devant ces champs à remplir pour faire une nouvelle entrée

Pour avoir accès à cette image, merci de vous connecter.

Voici ce que vous devez compléter
L'id n'a pas besoin d’être complété, laissez ce champ vide, il sera traité automatiquement !

Pour compléter les deux autres champs, il va falloir comprendre ce que sont les deux axes x et y,
Voici une petit schéma représentant les deux axes,

Pour avoir accès à cette image, merci de vous connecter.

Donc, dans le champ Y, vous allez devoir entrer la valeur associée au graphique, 
Par exemple, si vous faites un graphique sur le nombre de visiteur annuels, dans la case y, vous allez entrer le nombre de visiteurs ayant visité votre site durant l'année x

Si par exemple 8000 visiteurs ont visité votre site en 2014, 
Y = 8000
X = 2014

Puis vous pouvez traiter la demande et votre graphique évoluera automatiquement !
A noter : vous ne pouvez pas entrer de chaîne de caractères dans la variable Y, la graphique crashera en cas d’insertion, par contre, vous pouvez dans la variable X !

Voici ici les fichiers à installer et la configuration .sql

Révélation

Fichiers à installer :
Fichier principal ou sera le graphique -> charts.php
Fichier permettant la connexion à la Base de données -> pdo.php

Fichier SQL :
graph_ubrain_data.sql

Voilà, j'espère que le plugin vous aura plu, et que vous en ferez une très bonne et longue utilisation !
N'oubliez pas le +1 pour le soutien  
 

Cordialement,
U-Brain Dev,

Modifié le 23 août 2018 par Ubrain

[Akrino 21]

Salut!

Super plugin ! Tu fais du bon boulot, et surtout de l'exclusif  !

 

[Ubrain 30]

il y a 1 minute, Clement a dit :

Salut!

Super plugin ! Tu fais du bon boulot, et surtout de l'exclusif  !

 

Merci beaucoup  

[Pancani 168]

Très intéressant! Merci de nous partager tes connaissances à travers ces tutoriels  

[Nagamasa 27]

Ça me fait penser au graphique présent dans l'administration de HabboPHP

 

Merci de ton tuto très complet

[Ubrain 30]

@Scorpio C'est possible étant donné que j'utilise la technologie Google

Modifié le 23 août 2018 par Ubrain