Des Graphiques sur vos pages (JS)
05/03/2017
HTML - CSS - JS
Réaliser des graphiques présentées, par exemple, sous la forme suivante :
Et bien d'autres encore !
L'origine de cette note
En 2009 j'avais développé un Plugin Joomla afin d'utiliser des graphiques propulsés par FusionCharts Free.
Or, comme indiqué sur le site de FusionCharts : "World is moving away from Flash and so are we." / "Le monde s'éloigne de Flash et nous aussi.".
En effet, l'outil était basé sur le passage par JavaScript de valeurs à un flash générique, par type de graphique, pour l'afficher dans cette technologie.
Le monde s'éloignant effectivement de flash j'ai donc cherché un composant "Free", ou s'y rapprochant, pour afficher des graphiques.
Un de mes premiers test c'est tourné vers uvCharts.
C'est une librairie JavaScript basée sur d3.js et SVG/HTML5 pour construire des graphiques.
La simplicité d'utilisation est le crédo de cette librairie.
Puis mes tests m'ont amenés à jeter un oeil sur amCharts qui m'a convaincu !
Une librairie simple d'utilisation basée sur des compossants JavaScript (JS).
amCharts : des graphiques affichés en 4 étapes
L'affichage d'un graphique amCharts s'éffectue en 4 étapes à l'intérieur du bloc <body> de votre page :
- le style (CSS)
- les ressources (HTML)
- le code du graphique (JS)
- l'affichage (HTML)
Les points sensibles seront ainsi nommés :
- MG1_DIV : l'Id du bloc DIV de Mon Graphique 1
- MG2_DIV : l'Id du bloc DIV de Mon Graphique 2
- ...
- MG1 : le nom de mon objet JavaScript représentant mon graphique 1
- MG2 : le nom de mon objet JavaScript représentant mon graphique 2
- ...
Les styles des blocs DIV des graphiques (CSS)
La première étape est de donner les caractéristiques du bloc DIV de chacun graphiques.
En ce qui concerne les graphiques de cette page cela ressemble à :
<!-- Styles -->
<style>
#MG1_DIV {
width: 100%;
height: 400px;
}
</style>
<style>
#MG2_DIV {
width : 100%;
height : 500px;
}
</style>
L'inclusion des ressources (HTML)
Cette étape permet d'inclure les JavaScript et feuilles de style CSS nécessaires.
Regardez le code source de la démo, sur le site amcharts.com, pour connaître vos besoins.
En ce qui me concerne j'ai téléchargé leur JavaScript et déposé juste le nécessaire pour inclure les librairies dont j'ai besoin.
En ce qui concerne les graphiques de cette page, cela ressemble à :
<!-- Resources -->
<script src="REPERTOIRE_VERS_JS_DE_AMCHARTS/amcharts.js"></script>
<script src="REPERTOIRE_VERS_JS_DE_AMCHARTS/gauge.js"></script>
<script src="REPERTOIRE_VERS_JS_DE_AMCHARTS/serial.js"></script>
<script src="REPERTOIRE_VERS_JS_DE_AMCHARTS/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="REPERTOIRE_VERS_JS_DE_AMCHARTS/plugins/export/export.css" type="text/css" media="all" />
<script src="REPERTOIRE_VERS_JS_DE_AMCHARTS/themes/light.js"></script>
Le code des graphiques (JS)
Cette étape permet de définir un graphique (exple : MG1) et de dire dans quel bloc <DIV> l'afficher (exemple : MG1_DIV).
Regardez le code source de la démo, sur le site amcharts.com, pour connaître vos besoins.
En ce qui concerne les graphiques de cette page, cela ressemble à :
<!-- Charts code -->
<script>
var MG1 = AmCharts.makeChart("MG1_DIV", {
....
});
....
</script>
<script>
var MG2 = AmCharts.makeChart("MG2_DIV", {
....
});
....
MG2.addListener("rendered", zoomChart);
if(MG2.zoomChart){
MG2.zoomChart();
}
function zoomChart(){
MG2.zoomToIndexes(Math.round(MG2.dataProvider.length * 0.4), Math.round(MG2.dataProvider.length * 0.55));
}
</script>
Définition des zones de réception des graphiques (HTML)
Cela va se faire par la déclaration des DIV de réception.
En ce qui concerne les graphiques de cette page, cela ressemble à :
<!-- HTML -->
<div id="MG1_DIV"></div>
<div id="MG2_DIV"></div>
