FAT78 - Artisan numérique

Ben ... oui ! On peut tracer des graphiques assez simplement, moyennant une installation un peu complexe.
— 1) il faut télécharger et dézipper le plugin "JpGraph" ici : http://files.spip.org/spip-zone/jpgraph.zip
— 2) il faut télécharger et dézipper la librairie "jpgraph" (version 3.0.7) ici : https://sourceforge.net/projects/jpgraph/
— 3) il faut tester les capacités du serveur en ouvrant les instructions de la librairie "jpgraph/docs/index.html" et suivre les instructions données dans la page "3.2. Necessary system requirements for the library" (pour cela il faudra créer divers fichiers php, les installer sur le serveur et les lancer pour vérifier leur correcte exécution)
— 4) il faut ouvrir le fichier src/jpg-config.inc.php de la librairie "jpgraph" pour le modifier en enregistrant les chemins du cache (ici = /local/cache-jpgraph/) et des polices ttf (ici = squelettes-dist/polices/) aux lignes 38 39 40 (enlever ensuite les // en début de ces lignes)
— 5) sur le serveur il faut créer dans "/lib" le répertoire "/jpgraph-3.0.7"
— 6) recopier dans "/lib/jpgraph-3.0.7" le fichier "VERSION" et le répertoire "src" de la librairie "jpgraph"
— 7) installer "normalement" le plugin "JpGraph" ... ouf !!!

Maintenant on dispose d’un modèle <jpgraph> qui permet de tracer des graphiques et dispose d’un grand nombre de paramètres :

Par exemple, le graphique ci-dessous est obtenu par l’écriture suivante :

<jpgraph|type_graphe=barre|titre=Plugins|

donnee=10;12;20;40|legende=Agenda;Crayons;CFG;Divers|

largeur=480|hauteur=480|couleur=darkgreen>

Ce modèle génère une image png (le diagramme) de dimensions fixes (donc pas responsive) : une taille de 480 x 480 pixels est un choix qui convient à tous les supports.

Une alternative à "jpgraph" consiste à utiliser l’API "Google Charts" qui permet d’intégrer à sa page web un javascript qui comporte dans son code les données à afficher. Voir ici : https://developers.google.com/chart/interactive/docs/

Exemple :

C’est très beau, googlechart propose un large choix de présentations "responsives" en largeur mais à hauteur fixe, déterminée par les valeurs "height" du fichier html qui comporte le script et les données du graphique. Le graphique ci-dessus est obtenu par l’insertion du code suivant directement dans le texte de l’article :

-div style="width:90%;min-width:600px;min-height:400px;margin:0 auto;background:#eeffee;"-

-html-

  -head-

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

      google.charts.load('current', {'packages':['line']});

      google.charts.setOnLoadCallback(drawChart);



      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Date', 'Italy', 'France','Germany','Spain','U.K.'],

          ['21/02',  1,      1, 0, 0, 0],

          ['22/02',  1,      0, 0, 0, 0],

          ['23/02',  1,      0, 0, 0, 0],

          ['24/02',  3,      0, 0, 0, 0],

          ['25/02',  4,      0, 0, 0, 0],

          ['26/02',  2,      1, 0, 0, 0],

          ['27/02',  5,      0, 0, 0, 0],

          ['28/02',  4,      0, 0, 0, 0],

          ['29/02',  8,      0, 0, 0, 0],

          ['01/03',  5,      0, 0, 0, 0],

          ['02/03',  18, 1, 0, 0, 0],

          ['03/03',  27, 1, 0, 1, 0],

          ['04/03',  28, 0, 0, 1, 0],

          ['05/03',  41, 2, 0, 1, 1],

          ['06/03',  49, 3, 0, 2, 1],

          ['07/03',  36, 2, 0, 5, 0],

          ['08/03',  133, 8, 0, 7, 1],

          ['09/03',  96, 0, 2, 11, 1],

          ['10/03',  169, 14, 0, 7, 2],

          ['11/03',  196, 15, 1, 19, 2],

          ['12/03',  189, 13, 2, 1, 0],

          ['13/03',  250, 18, 0, 78, 0],

          ['14/03',  175, 12, 3, 62, 13],

          ['15/03',  368, 36, 4, 94, 0],

          ['16/03',  349, 21, 1, 53, 34],

          ['17/03',  345, 27, 13, 149, 5],

          ['18/03',  475, 69, 1, 107, 43],

          ['19/03',  427, 128, 16, 169, 41],

          ['20/03',  627, 78, 9, 235, 33],

          ['21/03',  793, 112, 16, 324, 57]

        ]);



        var options = {

          title: 'Company Performance',

          curveType: 'function',

          legend: { position: 'bottom' }

        };



        var chart = new google.charts.Line(document.getElementById('curve_chart'));



        chart.draw(data, options);

      }

    </script>

  -/head-

  <body style="width: 100%;">

    <div id="curve_chart" style="width: 100%; height: 400px"></div>

  </body>

-/html-

-/div-

Graphiques ?