[D3.js] Tests difficiles avec l’arbre de D3.js (Customisation…)

d3js

Introduction


La librairie D3.js propose des solutions de visualisation de données innovantes, à intégrer dans les applications WEB de demain. C’est une librairie open source et donc gratuite.

Lorsque l’on suit les exemples des codes exemples, et que l’on y intègre ses propres modèles de données JSON, c’est relativement accessible.

Les problèmes commencent lorsque l’on veut ajouter des fonctionnalités inexistantes à un graphique D3.js, ouch , et que l’on ne connait pas l’API!

Là, je décide de customiser l’arbre de D3.JS (Qui n’est même pas celui de base !) en y ajoutant la faculté de supprimer un node, de le renommer et de faire d’autres choses comme ajouter des images… Je débute, donc je glane des portions de codes D3.Js associés à l’arbre sur internet, puis je les colle dans le code en essayant de réflechir…

J’ai aussi besoin de créer un menu contextuel avec un click droit, autant dire que ce n’est pas de la tarte au début !

Le but final est de pouvoir intégrer cet arbre à une application permettant de gérer des projets .

Pour tester, c’est ici:  http://nicolash.org/d3/

Photo de l’arbre à customiser :


d3.jpg

Ce que j’ai réussi à ajouter au jour 1:



  • Intégration dans AngularJs (Pas très beau, le code JS est directement dans une fonction Js)…
  • Ajout d’un node sur double clic (Il faudra le mettre dans un menu contextuel, en plus ca buggote au niveau des cercles)
  • Edition du nom d’un node
  • Suppression du behavior sur clic Droit.

 

Liens utiles


  • http://bl.ocks.org/robschmuecker/7880033
  • http://fiddle.jshell.net/mattsrinc/g8wfegyb/3/light/
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://bl.ocks.org/d3noob/9662ab6d5ac823c0e444
  • https://github.com/patorjk/d3-context-menu
  • http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=preview
  • http://jsfiddle.net/mnk/vfro9tkz/
  • http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

 

 

Lire la suite

Publicités

Exercice 20 : Elaboration des Statistiques.

Introduction :


La partie la plus excitante de la programmation dans Supercours va être les statistiques(Ou en Anglais, Reporting). Dans un premier temps, on va assurer les statistiques générales, décomposées en :

1. Enumérations génériques, des infos simples mais toujours très utiles pour les décisionnaires.

2. Moyennes générales les plus utiles (Moyenne de Notes des élèves, Moyenne de présence en Cours, Moyenne des notes des élèves d’un professeur donné; et bien d’autres…

3. Pourcentages de remplissage des cours, pourcentages d’évolution d’inscriptions par dates. (Tout cela en graphiques fromages, ou en barres, avec des graphes en 3 dimension et j’en passe, le but est que ça pête visuellement !)

4. Ensuite on pourra commencer à penser à des choses plus compliquées du style : Stats prévisionnelles, Optimisation de remplissage des cours par algorithmes, Evaluations de Rentabilité d’un cours, etc … (Vu que je ne suis pas spécialiste, il faudra étudier un peu… Voir beaucoup…)

st1

Introduction au code:


Le but est d’effectuer des requêtes dans la base de données, puis de présenter les données à l’utilisateur. Ordonnancement : ->AFFICHAGE DE HTML

->JQUERY AJAX EXECUTE UN FICHIER PHP

->PHP LIT UNE REQUETE SQL

->JQUERY AJAX RECUPERE LE CONTENU DE LA REQUETE AU FORMAT JSON DANS SUCCESS(){}

-> JQUERY AFFICHE LES DONNEES EN HTML.

Description : Il y a le fichier HTML, le fichier JAVASCRIPT, et les fichiers PHP.

  • Le fichier HTML contient 2 DIV :La div du menu appelée « men1 » et la div destinée à recevoir les données et les graphiques appelée « infovue« .Chaque click sur un élément du menu HTML lance une fonction Javascript à l’aide de onclick= »Gx() » ou onclick= »Nx() », qui remets à jours en tous les cas la div « infovue« . Si c’est une fonction Gx(), le résultat sera un graphe; si c’est une fonction Nx() le résultat sera des chiffres.
  • Le fichier Javascript contient toutes les fonctions javascript AJAX tel que Gx() soit une fonction de génération de graphe, et Nx() une fonction de génération de chiffres.(avec x<n pour n= nombre de fonctions). (Note:La fonction Jquery Ajax peut aussi bien récupérer les données d’un fichier Json mais peut aussi afficher directement le contenu d’un fichier PHP directement dans le HTML)
  • Les fichiers PHP vont requêter la base de données avec les requêtes SQL appropriées, puis créent un objet JSON qui est récupéré dans la fonction de rappel de chaque fonction Javascript tel que Gx.php soit un fichier de génération de graphe, et Nx.php soit un fichier de génération de chiffres.( avec x<n pour n = nombre de fichiers)

Le code :

Voici le fichier HTML statsGen.html

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
</head>
<body>

<div id="men1" > 
        
        <ul class="sf-menu" id="example">
            <li class="current">
                <a href="">Enumérations<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href="#" onclick="N1()">Chiffres</a>
                    </li>
                        <li class="current">
                            <a href="#">Graphiques</a>
                            <ul>
                                <li><a href="#"     onclick="G1()"    >Nombre de Professeurs par Catégories</a></li>
                                <li><a href="#"                    >Graphe 2</a></li>
                                <li><a href="#"                    >Graphe 3</a></li>
                                <li><a href="#"                    >Graphe 4</a></li> 
                            </ul>
                        </li>
                </ul>
            </li>
                
                <li class="current">
                <a href="">Moyennes<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href="#" onclick="N2()">Chiffres</a>
                    </li>
                        <li class="current">
                            <a href="#">Graphiques</a>
                            <ul>
                                <li><a href="#"     onclick=""    >Graphe 1</a></li>
                                <li><a href="#"                    >Graphe 2</a></li>
                                <li><a href="#"                    >Graphe 3</a></li>
                                <li><a href="#"                    >Graphe 4</a></li> 
                            </ul>
                        </li>
                </ul>
            </li>
            
            <li>
                <a href="">Pourcentages<span class="ui-icon ui-icon-person"></a>
                <ul>
                    <li>
                        <a href=""></a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                    <li>
                        <a href="">menu item</a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                    <li>
                        <a href="">menu item</a>
                        <ul>
                            <li><a href="#"                     >Graphe 1</a></li>
                            <li><a href="#"                    >Graphe 2</a></li>
                            <li><a href="#"                    >Graphe 3</a></li>
                            <li><a href="#"                    >Graphe 4</a></li> 
                        </ul>
                    </li>
                
                </ul>
            </li>
            <li>
                <a href="">Optimisations<span class="ui-icon ui-icon-person"></a>
            </li>    
            <li>
                <a href="">Stats Dynamiques<span class="ui-icon ui-icon-person"></a>
            </li>    
        </ul>
</div> 

<div id='infovue'></div>

</body>




Le fichier Javascript classeStatsGen.js comprends les fonctions de type Nx() ou Gx(), elles contiennent des appels AJAX de type $.ajax() et traitent les données reçues grâce à leurs fonctions de rappel success().

function statsGen(){
    $( "#statsGen" ).dialog( "open" );// Ouverture de la fenetre des stats générales
    $("#statsGen").load('statsGen.html'); 
    var example = $('#example').superfish({
                //add options here if required
                });
 
}

 
 // Decomptes 
function N1(){

document.getElementById("charge").style.visibility="visible";
    $.ajax({
        type: "POST",
        url: "N1.php",
        dataType: "json", 
        success: function (dataStats) {
            window.dataStats = dataStats;
            $("#infovue").empty();
            $("#infovue").append('\
                                <b>Nombre de Cours :                </b>\
                                <span id="nbcours">                    </span><br>\
                            \
                                <b>Nombre d\'étudiants :            </b>\
                                <span id="nbetudiants">                </span><br>\
                            \
                                <b>Nombre de professeurs :            </b>\
                                <span id="nbprofs">                    </span><br>\
                            \
                                <b>Nombre de documents hébergés :    </b>\
                                <span id="nbdocsheb">                </span><br>\
                            \
                                <b>Nombre d\'inscrits dans les cours:</b>\
                                <span id="nbinscrits">                </span><br>\
                                ');
            $("#nbcours").html        (dataStats[0].nbCours);
            $("#nbetudiants").html    (dataStats[1].nbEtudiants);
            $("#nbprofs").html        (dataStats[2].nbProfesseurs);
            $("#nbdocsheb").html    (dataStats[3].nbDocumentsCours); 
            $("#nbinscrits").html    (dataStats[4].nbInscrits); 
            document.getElementById("charge").style.visibility="hidden";
        }
    });

}

// Moyennes
function N2(){

document.getElementById("charge").style.visibility="visible";
    $.ajax({
        type: "POST",
        url: "N2.php",
        dataType: "json", 
        success: function (dataStats) {
            window.dataStats = dataStats;
            $("#infovue").empty();
            //Age Moyen des étudiants:
            $("#infovue").append('<b>Age Moyen des étudiants: </b>');
            $("#infovue").append(dataStats[0].ageMoyen);
            $("#infovue").append('<br>');
            //Paiement Moyen des étudiants: 
            $("#infovue").append('<b>Paiement Moyen des étudiants: </b>');
            $("#infovue").append(dataStats[1].paiementMoyen);
            $("#infovue").append(' Euros');
            $("#infovue").append('<br>');
            //Moyenne Etudiants Max par Cours
            $("#infovue").append('<b>Moyenne du nombre d\'Etudiants Max par Cours: </b>');
            $("#infovue").append(dataStats[2].nbemaxMoyen);
            $("#infovue").append(' Etudiants au maximum par Cours');
            $("#infovue").append('<br>');
            
            document.getElementById("charge").style.visibility="hidden";
        }
    });

}


function G1(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
    $.ajax({    
            type: "POST",
            url: "G1.php",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response){
                                        plot = $.jqplot('infovue',response, {// La librairie Jqplot se sert de l'objet JSON response pour créer le graphique,celui-ci a été généré par G1.php.
                                             async: false,
                                            title:'Nombre de professeurs par Catégories :',
                                            seriesDefaults:{
                                            renderer:$.jqplot.BarRenderer,pointLabels: { show: true },
                                            rendererOptions: { varyBarColor: true }},    
                                            axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer,}},
                                            });

            document.getElementById("charge").style.visibility="hidden";
            },
            failure: function (errMsg){
                                    $('#errorMessage').text(errMsg);  //errorMessage is id of the div
            }        
    })

};


Voici maintenant les fichiers PHP dont le nom correspond au nom de la fonction Javascript. Par Exemple, le fichier qui requête pour la génération du graphe Nombre de professeurs par Catégorie de Cours, il s’appelle G1.php et sa fonction Js associée est G1().


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();

/* --------------------------------------------------------Stat 6 : Nombre de professeurs par Catégorie de Cours----------------------------------------------------- */
$lectureSql5="SELECT distinct count(professeur.idcategcours) as decompte,categcours.nom as nom FROM professeur INNER JOIN categcours ON professeur.idcategcours=categcours.idcategcours group by professeur.idcategcours";
$lecture5 = mysql_query($lectureSql5) or die(mysql_error());

while ($col=mysql_fetch_array($lecture5)){ 
        $col[0]=intval($col[0]); 
        $tabGen[]=array($col[1],$col[0]);
};    

$tabAdded=json_encode($tabGen);
echo('['.$tabAdded.']');




Voici l’objet Json qu’on voit passer dans Firebug à la suite de l’exécution du script précédent : json1 Voici un autre exemple : N1.php est le fichier qui comprends des requêtes SQL de type count(), qui servent pour générer les Enumérations.

Sa fonction javascript relative est N1() dans le fichier Javascript: Le résultat de ces requêtes est placé dans un tableau PHP qui est converti en JSON à la fin du fichier PHP, pour être traité par la fonction de rappel de jquery.ajax() qui s’appelle success(dataStats). dataStats contient alors l’objet JSON, et donc toutes ses variables, qui deviennent accessibles dans la fonction success de jquery.ajax().


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();

// Initialisation du tableau
/* $tabGen = []; */


/* --------------------------------------------------------Stat 1 : Nombre de Cours----------------------------------------------------- */
$lectureSql="SELECT count(*) from cours  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 1
foreach ($row as $value){
 $tabGen[]=array(
    "nbCours"        =>$value,
    );
}

/* --------------------------------------------------------Stat 2 : Nombre d'étudiants----------------------------------------------------- */

$lectureSql="SELECT count(*) from etudiant  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 2
foreach ($row as $value){
 $tabGen[]=array(
    "nbEtudiants"        =>$value,
    );
}

/* --------------------------------------------------------Stat 3 : Nombre de professeurs----------------------------------------------------- */

$lectureSql="SELECT count(*) from professeur  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 3
foreach ($row as $value){

 $tabGen[]=array(
    "nbProfesseurs"        =>$value,
    );
}

/* --------------------------------------------------------Stat 4 : Nombre de documents hébergés----------------------------------------------------- */

$lectureSql="SELECT count(*) from documentscours  ";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 4
foreach ($row as $value){

 $tabGen[]=array(
    "nbDocumentsCours"        =>$value,
    );
}

/* --------------------------------------------------------Stat 5 : Nombre d'élèves inscrits----------------------------------------------------- */

$lectureSql="SELECT count(idetudiant) from listeetudiant";
$lecture = mysql_query($lectureSql) or die(mysql_error());
$row    = mysql_fetch_assoc($lecture);

// On remplit le tableau tabGen avec la Stat 5
foreach ($row as $value){

 $tabGen[]=array(
    "nbInscrits"        =>$value,
    );
}





echo json_encode($tabGen);

exit();


Voici l’objet Json qu’on voit passer dans Firebug à la suite de l’exécution du script précédent : json2 CONCLUSION :


Une fois que l’on a compris la logique de la génération des graphiques à l’aide de JSON, on peut envisager de créer des appllcations Sympas.

Les autres graphes -Google code- étant trèèèès esthétiques mais pas toujours faciles à créer et à gérer. La méthode énoncée ici va me permettre d’exploiter d’autres librairies de génération de graphes telles que D3.js, et cela avec une méthode structurée.

La méthode $.ajax() de Jquery: Avec la méthode jquery $.ajax(), on 2 choix

1. Afficher directement le contenu d’un fichier PHP dans le HTML avec un $.load(), ce qui est bien si un dév PHP a créé un super script.

2. Mais on peut aussi récupérer les variables du script PHP au format JSON et les traiter avec Javascript dans la fonction de rappel de $.ajax() success(reponse){]. En ce cas, reponse est un objet JSON qui comprends toutes les données récupérées par notre fichier PHP, et en ce cas on travaille en mémoire VIVE, avec toutes la vivacité de Javascript.

Note personelle : Contrairement à Commandis, les graphiques en barres ne sont plus générés à partir de fichiers en dur JSON, mais directement à partir de conversion à l’aide de la fonction php json_encode(), ça va bien plus vite.

Samedi 21 Février


Aujourd’hui, je vais créer un camembert de pourcentages statistiques avec la librairie Jqplot.js: cm Demain, j’en ferais d’autres avec Highcharts.js puis, plus tard, avec D3.js. On s’y prends la même manière que décrit précédemment, sauf que la requête SQL est naturellement différente, ainsi que la méthode Jqplot, qui, cette fois-ci, utilise $.jqplot.PieRenderer pour générer le graphique. La difficulté principale est la création de la requête SQL, qui fait appel à la logique. Le reste n’est que répétition. Je vais élaborer la requête Pourcentage d’étudiants inscrits par catégories :

Phase 1 : Créer le lien de menu qui appelle la méthode Ajax G7() : Fichier concerné :statsGen.html


 <li><a href="#" onclick="G7()" >Pourcentage d'étudiants inscrits par catégories</a></li>

Phase 2 : Elaborer la requête SQL puis, récupérer son résultat à l’aide du langage PHP, puis créer un objet JSON. Fichier concerné : G7.php

<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Pourcentage etudiants par catégories------------------------------ */
$lectureSql="SELECT Distinct COUNT( idetudiant ) AS nbinscrits,categcours.nom,ROUND(COUNT(idetudiant)/(SELECT COUNT(*) FROM listeetudiant )*100)FROM listeetudiant LEFT JOIN cours ON listeetudiant.idcours=cours.idcours LEFT JOIN categcours ON cours.idcategcours=categcours.idcategcours GROUP BY cours.idcategcours ";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 $col[0]=intval($col[0]); 
 $tabGen[]=array($col[1],$col[0]);
};
echo json_encode($tabGen); 
exit();


Note : Lors de l’élaboration de la Rqt, je récupère 3 champs, mais ensuite, finalement, je n’en récupère que 2 lors de la boucle PHP. Lorsque je conçois les rqts, je les teste dans Mysql, ce qui fait que parfois, c’est utilise de garder quelques champs dans le SQL, mais j’aurais du l’enlever. 2ème note, dans la boucle PHP, il y a une conversion INT, sans cela Json mets les nombres entre guillemets, bien sur.

Phase 3: Le contenu de l’objet JSON est récupéré dans la méthode success de Jquery, et c’est dans cette méthode de rappel que j’exécute la librairie Jqplot.(Note : L’indendation n’a pas été reprise par wordpress) Fichier concerné : ClasseStatsGen.js


// Pourcentages
function G7(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
$.ajax({
type: "POST",
url: "G7.php",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response){
var plot2 = jQuery.jqplot ('infovue', [response],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: false,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 4,
// stroke the slices with a little thicker line.
lineWidth: 5
}
},
legend: { show:true, location: 's' }
}
);
document.getElementById("charge").style.visibility="hidden";
},
failure: function (errMsg){
$('#infovue').append(errMsg); //infovue is id of the div
}
})
};

 

 

Mercredi 25 Février

 

Aujourd’hui, je vais élaborer une statistique avec un premier graphique HighCharts.js:

hc

 

C’est la somme des paiements des étudiants par mois (en Euros) pour une année donnée.

 

Comme d’hab, en PHASE 1, je crée un lien dans le menu qui pointe sur ma méthode Javascript G8() :


 <li><a href="#"  onclick="G8()" >Somme des Paiements par mois </a></li> 

 

Phase 2 : Je crée la requête SQL qui retourne la somme des paiements par mois :


SELECT sum( paiement ) , monthname( dateentree ) FROM etudiant WHERE year( dateentree ) =2014 GROUP BY month( dateentree )

A remarquer que cette requête retourne un tableau comme ceci :
tb1

 

On remarque donc que les mois ne sont pas cités lorsqu’il n’y a pas eu de paiement.

Par contrainte de temps, je m’en contente et adapte le graphique à cela , en Phase 3, en créant un premier appel ajax qui récupère les mois pour les nommer les colonnes.

Donc, toujours  pour la phase 2, comme d’hab je crée mon fichier PHP G8.php :


<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Somme des Paiement par mois ----------------------------------------------------- */
$lectureSql="SELECT sum( paiement ) , monthname( dateentree ) FROM etudiant WHERE year( dateentree ) =2014 GROUP BY month( dateentree )";

$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 $col[0]=intval($col[0]); 

 $tabGen[]=array($col[1],$col[0]);
};


echo json_encode($tabGen);

exit();

sauf qu’en plus j’en crée un annexe G8mois.php pour récupérer facilement les titres des colonnes:


<?php

<?php
// Connexion à la BDD
include('connexionSql.php');
connexionSql();
/* --------------------------------------------------------Somme des Paiement par mois ----------------------------------------------------- */
$lectureSql="SELECT sum(paiement),monthname(dateentree) from etudiant group by month(dateentree)";
$lecture = mysql_query($lectureSql) or die(mysql_error());

while ($col=mysql_fetch_array($lecture)){ 
 
 

 $tabGen[]=array($col[1]);
};



echo json_encode($tabGen); 
exit();

 

En Phase 3, Je récupère le contenu des 2 fichiers PHP dans la fonction de rappel de Jquery Ajax, puis crée le graphe( Comme d’hab, wordpress ne reprends pas l’indentation, on ne comprends rien…) :


function G8(){
$("#infovue").empty();
document.getElementById("charge").style.visibility="visible";
$.ajax({ 
 type: "POST",
 url: "G8mois.php",
 dataType: "json",
 contentType: "application/json; charset=utf-8",
 success: function (mois){
 $.ajax({ 
 type: "POST",
 url: "G8.php",
 dataType: "json",
 contentType: "application/json; charset=utf-8",
 success: function (response){
 $(function () {
 $('#infovue').highcharts({
 chart: {
 type: 'column',
 margin: 75,
 options3d: {
 enabled: true,
 alpha: 10,
 beta: 25,
 depth: 70
 }
 },
 title: {
 text: 'Paiements par mois'
 },
 tooltip: {
 headerFormat: '<b>{point.key}</b><br>',
 pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
 },
 
 subtitle: {
 text: 'Somme des paiements des étudiants par mois'
 },
 plotOptions: {
 column: {
 depth: 25
 }
 },
 xAxis: {
 categories: mois/* ['January', 'February', 'March', 'June', 'August','September','October','November'] */
 
 },
 yAxis: {
 title: {
 text: "Euros"
 }
 },
 series: [{
 name: 'Ventes',
 data: response,
 stack: 'Euros'
 
 }]
 });
 });

 document.getElementById("charge").style.visibility="hidden";
 },
 failure: function (errMsg){
 $('#infovue').append(errMsg); //infovue is id of the div
 } 
 })


 }
 });
};

pour conlure, on constate que les noms des mois sont en Anglais, pour les traduire, une solution est utiliser month( dateentree ) à la place de monthname( dateentree ) dans le sql, cela retourne des vars « int », de cette façon, on peut affecter chaque int à un nom en français en javascript.

Exercice 17 : Création de la vue  » Pourcentages d’Evolutions  » de l’exercice 11 avec une boucle FOR.

Introduction

Il faut donc que l’utilisateur de l’exercice 11(Commandis) soit capable de visualiser les Pourcentages d’évolution du prix d’un objet quelconque en tapant sa référence. (Il est aidé pour cela par un JQUERY AUTOCOMPLETE, lorsqu’il tape dans le champs.). Il doit aussi visualiser la date de changement du pourcentage d’évolution du prix dans le graphe qui va se générer. Comme d’hab, il s’agit d’un pseudo MVC avec AJAX->VUE->GENEREJSON-GENEREGRAPHE

Ma méthode pour y arriver :

Tout d’abord, je lis le théorème des pourcentages d’évolution dans un livre de PREBABAC 1ère ES de Nathan Copyright 2008:

maths1

Ensuite, vu qu’il n’y a pas d’UML2.0, je pense les variables mathématiques dans le contexte de l’exercice 11, un peu à l' »arrache ». Comme d’hab, faut remplacer les var mathématiques par des vars « informatiques »… La difficulté ici, est que nous n’avons pas qu’un seul pourcentage d’évolution à calculer, mais un tableau …D’ou l’idée de la boucle For.

L' »ordonnancement » du traitement dans la vue sera donc celui-ci (J’ai choisi cela) :

1. Une Requête SQL en Lecture sous le critère référence de l’objet, qui va donc chercher tous les prix d’un objet puis les trie par date.

2. Création de 3 tableaux
-Les dates
-les Prix
-Et une copie du tableau prix.
Ceux ci sont en quelque sorte « synchronisés  » de par leur ids qui sont identiques, ce qui va permettre de réassembler le tableau des dates et celui des pourcentages $Pe qui aura été généré.

3. L’idée est d’avoir 2 tableaux des prix identiques afin de pouvoir traiter à l’aide d’une boucle for les variables PRIX  » de départ » et PRIX « d’arrivée ». Ensuite, je crée mon pourcentage et l’injecte dans un nouveau tableau de pourcentage $Pe dans la boucle for qui sera ensuite collé à mon tableau de date $tabDates. C’est la solution que j’ai trouvé. L’index du prix dans ma première boucle for sera $x, et je vais me servir de cet index de cette façon $x-1 ou $x+1 afin de me déplacer dans mon tableau pour faire les calculs conformément au théorème du livre prépabac puis les injecter dans $Pe.

4. Au final, le tableau $tabF qui comprends les dates et les pourcentages est converti au format JSON et nous obtenons une vue très importante suceptible d’être utilisée dans un Graphe !
En l’occurrence, c’est JQPLOT qui va devoir être également paramétré pour les dates et les pourcentages(C’est assez difficile).

Le code :

C’est une vue, il n’y a donc qu’un fichier:
afficherPourcentages.php

<?php
include('connexionSql.php');
indique que le type de la réponse renvoyée au client sera du Texte
header(&quot;Content-Type: text/plain&quot;);
//anti Cache pour HTTP/1.1
header(&quot;Cache-Control: no-cache , private&quot;);
//anti Cache pour HTTP/1.0
header(&quot;Pragma: no-cache&quot;);

// Transmission des var qui arrivent en mode get en variables classique PHP
$referenceP= $_GET['referenceP'];

connexionSql();
$lectureSql=&quot;Select date,prix from livraison where reference like ".$referenceP." order by livraison.date;&quot;;
$lecture = mysql_query($lectureSql) or die(mysql_error());

/* REQUETE SQL pour GRAPHE 1 */
/* POURCENTAGE DEVOLUTION DES PRIX PAR DATES*/
/* -----------------------------------------------------------------------------------------------------	 */	
while ($col=mysql_fetch_array($lecture)){
		$col[prix]=intval($col[prix]); 
		$tabPrix[] = $col[prix];
		$tabDates[] = $col['date'];
		$tabCopie[]=$col[prix];
}
/* -------------------------------------------------------------------------------------------------------- */

 // CALCUL ET POSITIONNEMENT DES POURCENTAGES D EVOLUTION des prix dans le tableau $Pe
for ($x=0;$x<sizeof($tabPrix);$x++){
	$Pe[$x]=$tabCopie[$x+1]-$tabPrix[$x];// IDEM LIVRE MATHSPREPABAC
	$Pe[$x]=$Pe[$x]/$tabPrix[$x]*100; // FORMULE DU LIVRE PREPABAC
	};

// ENLEVE LE DERNIER POURCENTAGE DU TABLEAU PE QUI EST forcement a zero et ne sert à rien
$size=sizeof($Pe)-1;
unset($Pe[$size]);

// INJECTION DES POURCENTAGES DEVOLUTION DANS LE TABLEAU DES DATES
for ($z=0;$z<sizeof($Pe);$z++){
	$tabF[]=array($tabDates[$z+1],$Pe[$z]);
	}

echo json_encode($tabF);

Voici les données JSON générées, Je n’ai pas encore arrondi les pourcentages à x.xx%, parce que certains moteurs de graphes le font par défaut. On voit donc que le 17 Septembre 2014, prix de notre article a bondi de 175.9 pour cent:

[["2014-09-17",175.86206896552],["2014-09-17",400],["2014-09-17",5.2],["2014-09-20",-87.690114068441],["2014-09-20",33.204633204633]]

Pour contrôle, on voit bien que ces pourcentages d’évolution correspondent bien aux données de PRIX de la requête SQL concernant l’article de référence gh2012 :

exercice17-1

Note : Ces données ne sont pas réalistes, car généralement, le prix d’un article ne peux bondir de 400 pour cent en une journée, ce qui nous donne des pourcentages d’évolution grotesques du style +400% ou -87.7% …

Note:
Jqplot a besoin de placer ces donnnées entre deux crochets additionels, ce qui donne (J’lai pas encore fait dans le code):

[[["2014-09-17",175.86206896552],["2014-09-17",400],["2014-09-17",5.2],["2014-09-20",-87.690114068441],["2014-09-20",33.204633204633]]]

Truc 2 : Lire un fichier JSON à intervalles régulières avec JQuery

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  type="text/javascript" src="jquery.min.js"></script>
  </head>
 <script>
<!-- relancer une lecture json a intervalles régulières.
 setInterval('getPos()', 5000) 
 window.onload = function(){setInterval('getPos()',5000)};
 
  function getPos() {
 $.getJSON( "testjson.txt", function( json ) {
  document.write( "donnees  "+json);
 });
 }
 getPos();

 </script>
 
 
 
 

Code récupéré sur experts-exchange concernant le refresh Automatique de graphes JQPLOT

Introduction:

A la recherche d’un code concernant le refresh automatique de données sur un graphe jqplot, j’ai trouvé ce code à tester:

Code:

Ticker: Update HTML

var l1 = [50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50,50];
var l2 = [150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150];
var l3 = [250,250,250,250,250,250,250,250,250,250,250,250,250,250,250,250,250,250,250,250];
var l4 = [350,350,350,350,350,350,350,350,350,350,350,350,350,350,350,350,350,350,350,350];

function updateGraph(n1, n2, n3, n4) {

l1.shift();
l1.push(n1);
l2.shift();
l2.push(n2);
l3.shift();
l3.push(n3);
l4.shift();
l4.push(n4);

$('#chart1').html('');

$.jqplot('chart1', [l1, l2, l3, l4], {
legend:{show:true,location:'sw',xoffset: 3,yoffset: 3},
series:[
{label: 'Item 1'},
{label: 'Item 2'},
{label: 'Item 3'},
{label: 'Item 4'}
]
});
}

setInterval(function(){updateGraph( (Math.floor(Math.random()*50)+10) , (Math.floor(Math.random()*50)+100) , (Math.floor(Math.random()*50)+200) , (Math.floor(Math.random()*50)+300) );}, 500);
updateGraph( (Math.floor(Math.random()*85)+10) , (Math.floor(Math.random()*85)+100) , (Math.floor(Math.random()*100)+200) , (Math.floor(Math.random()*100)+300) );

obj=document.getElementById('recentNumbers');
if (obj) obj.innerHTML=l1;

codeshit

Exercice 8 : Faire une boucle PHP pour alimenter l’API Google. (Son graphe et son tableau BDD)

Introduction:

Plutôt que d’utiliser du JSON, je génére directement en PHP le format d’alimentation de données de l’API google et je stocke tout cela dans un tableau PHP.

Par exemple , l’API Google attends cette ligne pour générer son graphe :

[‘Name’,   ‘Age’, ‘Instrument’, ‘Color’],

et bien, je reconstitue chaque ligne avec PHP, je les place dans un tableau PHP, tout en y injectant les variables de la base de donnée à chaque fois, tout en respectant le format de la ligne. ce qui donne :

$ligneFormatee[]= »[$row[0],$row[1],$row[2],$row[3]], »;

C’est à dire que je formate un tableau PHP qui va automatiquement alimenter l’API Google et ses nombreux graphiques avec un simple ECHO …

Ce qui est super, c’est que du coup, tout est auto adaptable, et s’alimente facilement, qu’il y ait 10 variables, ou 1500 variables en base de données.

Les graphiques s’auto-générent et adaptent automatiquement selon la quantité de données.

(Faudra voir à inclure un time out ou un maxi quelconque.)

 

Image du programme en action :

 

exo8

Plus on entre de données, plus le graphique généré augmente et le tableau aussi, et tout cela sans rien faire:

exo82

Vu que la boucle qui récupère les données peut facilement se copier-coller dans tous les graphes et tableaux de l’API Google, je vous laisse imaginer les possibilités du truc … Et c’est facile.. Ca tient dans cette ligne de code, qui lit le tableau qui contient les lignes formatées pour l’api google:

foreach ($ligneFormatee as $valeur) {
 echo $valeur;}

 

 

Le Code:


<BODY BGCOLOR="#e7dfce">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<FONT size="3pt" face="arial" >
<!-- PHASE 1 L utilisateur entre des données dans des champs pour renseigner la base de donnée avec la méthode AJAX -->

<!-- Inclus le petit fichier de traitement en AJAX, c'est celui qui va enregistrer en bdd-->
<script src="ajax_framework.js" language="javascript"></script>

<!-- Montre un message quand l'enregistrement AJAX est bien fait -->
<div id="insert_response"></div>

<!-- Form: L'action="javascript:insert()"apelle la javascript function "insert" dans le fichier ajax_framework.js -->

<form action="javascript:insert()" method="post">
<input name="cadres" type="text" id="cadres" placeholder="Nombre de Cadres" value=""/>
<input name="employes" type="text" id="employes" placeholder="Nombres d'Employés" value=""/>
<input name="ouvriers" type="text" id="ouvriers" placeholder="Nombre d'Ouvriers" value=""/>
<input name="externe" type="text" id="externe" placeholder="Employés Interim" value=""/>
<input type="submit" name="Submit" value="insert" />
</form>

<?php
// Connexion à la base de données et lecture des données
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe FROM ca ";
$result = mysql_query($query) or die(mysql_error());

// récupération des 4 colonnes dans un tableau $tab
 while($row = mysql_fetch_array($result))
 {

// remplissage du tableau
 $tab[]=$row;

// Mise en forme de la ligne qui va s'intégrer à JQPLOT plus bas dans l'API google.
 $ligneFormatee[]="[$row[0],$row[1],$row[2],$row[3]],";
 }

// On enlève la dernière virgule de la dernière ligne du tableau, qui empecherait le graphe de se générer.
$result = count($ligneFormatee);
$effaceVirgule=$result-1;
$ligneFormatee[$effaceVirgule] = rtrim($ligneFormatee[$effaceVirgule],',');
//var_dump($ligneFormatee);
 ?>

<!--
API GOOGLE
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>
 API GOOGLE
 </title>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['table', 'columnchart']});
 </script>
 <script type="text/javascript">

 function drawVisualization() {
 var dataTable = google.visualization.arrayToDataTable(

 [
 ['Cadres', 'Employés', 'Ouvriers', 'Intérim'],
 <?php // Ici l'astuce c'est de rebalancer tout le contenu du tableau PHP dans l'api google sans la dernière virgule qui bloquait tout.
 foreach ($ligneFormatee as $valeur) {
 echo $valeur;}
 ?>
 ]
 );

 var table = new google.visualization.Table(document.getElementById('table'));
 table.draw(dataTable, null);

 var dataView = new google.visualization.DataView(dataTable);
 dataView.setColumns([0,1,2,3]);

 var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
 chart.draw(dataView, {width: 800, height: 500});
 }

 google.setOnLoadCallback(drawVisualization);
 </script>
 </head>
 <body style="font-family: Arial;border: 0 none;">
 <div>le Contenu de la base de données ...</div>
 <div id="table"></div>
 <br />
 <div>Le Graphique</div>
 <div id="chart"></div>
 </body>
</html>

<pre><pre>

 

Exercice 7 : Utiliser L’API GOOGLE pour générer des graphes.

Introduction :

Une Première approche de l’utilisation de l’API Google, je génére 3 graphes dans 3 divs différentes.

Les graphes ne sont pas encore tous reliés à un élément de base de données, je le ferais plus tard.

Lorsqu’on injecte les variables directement avec PHP, c’est particulièrement facile. Par contre, il va falloir voir comment utiliser du XML ou du JSON pour injecter les données, dans le prochain article .

Première impression : C’est beau et facile à mettre en place.

Image du programme :

Image

Le code :

<BODY BGCOLOR="#e7dfce">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<FONT size="1pt" face="arial" >
<!-- PHASE 1 L utilisateur entre des données dans des champs pour renseigner la base de donnée avec la méthode AJAX -->

<!-- Inclus le petit fichier de traitement en AJAX, c'est celui qui va enregistrer en bdd-->
<script src="ajax_framework.js" language="javascript"></script>

<!-- Montre un message quand l'enregistrement AJAX est bien fait -->
<div id="insert_response"></div>

<!-- Form: L'action="javascript:insert()"apelle la javascript function "insert" dans le fichier ajax_framework.js -->

<form action="javascript:insert()" method="post">

<input name="cadres" type="text" id="cadres" placeholder="Nombre de Cadres" value=""/>
<input name="employes" type="text" id="employes" placeholder="Nombres d'Employés" value=""/>
<input name="ouvriers" type="text" id="ouvriers" placeholder="Nombre d'Ouvriers" value=""/>
<input name="externe" type="text" id="externe" placeholder="Employés Interim" value=""/>
<input type="submit" name="Submit" value="insert" />
</form>

<?php

// Connexion à la base de données et lecture des données
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe FROM ca where id=(SELECT MAX(id) from ca); ";
$result = mysql_query($query) or die(mysql_error());

// récupération des 4 colonnes dans un tableau $tab
while($row = mysql_fetch_array($result))
 {

 // remplissage du tableau
 $tab[]=$row[0];
 $tab[]=$row[1];
 $tab[]=$row[2];
 $tab[]=$row[3];
 //var_dump($tab);
 }

?> 

 <!--
On se mets à utiliser l'api Google à partir de plus bas
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>
 Google Visualization API Sample
 </title>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
 </script>
 <script type="text/javascript">

 // 1ER GRAPHE
 function drawVisualization() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Année', 'Cadres', 'Employes', 'Ouvriers', 'Interim'],
 ['2003',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2004',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],

 ]);

 // Create and draw the visualization.
 new google.visualization.ColumnChart(document.getElementById('visualization')).
 draw(data,
 {title:"Employes",
 width:600, height:400,
 hAxis: {title: "Year"}}
 );
 }

 google.setOnLoadCallback(drawVisualization);

 // 2EME GRAPHE
 function drawVisualization2() {
 // Some raw data (not necessarily accurate)
 var data = google.visualization.arrayToDataTable([
 ['Mois', 'Cadres', 'Employés', 'Ouvriers', 'Interim'],
 ['2004/05', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2005/06', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2006/07', 157, 1167, 587, 807],
 ['2007/08', 139, 1110, 615, 968],
 ['2008/09', 136, 691, 629, 1026]
 ]);

 // Create and draw the visualization.
 var ac = new google.visualization.AreaChart(document.getElementById('visualization2'));
 ac.draw(data, {
 title : 'Employés embauches par mois',
 isStacked: true,
 width: 600,
 height: 400,
 vAxis: {title: "Nouveaux"},
 hAxis: {title: "Mois"}
 });
}
 google.setOnLoadCallback(drawVisualization2);

 // 3EME GRAPHE
 function drawVisualization3() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Tache', 'Hobbies des Employés'],
 ['Travailler', 11],
 ['Manger', 2],
 ['Glander', 2],
 ['Regarder la télévision', 2],
 ['Dormir', 7]
 ]);

 // Create and draw the visualization.
 new google.visualization.PieChart(document.getElementById('visualization3')).
 draw(data, {title:"Quels sont les hobbies de vos employés?"});
}
 google.setOnLoadCallback(drawVisualization3);

 </script>
 </head>
 <!-- les 3 divs ont l'attribut float left qui les mets les unes à coté des autres . !-->
 <body style="font-family: Arial;border: 0 none;">
 <div id="visualization" style="width: 600px; height: 400px; float:left;";></div>
 <div id="visualization2" style="width: 600px; height: 400px;float:left;";></div>
 <div id="visualization3" style="width: 600px; height: 400px;float:left;";></div>
</body>
</html>