Editions ENI Livres | Vidéos | e-Formations
Graphiques de gestion
Différentes solutions de conception de graphiques de gestion
Il existe de multiples solutions permettant d’élaborer des graphiques de gestion (histogrammes, représentations en secteurs, nuages de points...) disponibles sur des pages web.
Les outils à disposition sont souvent des librairies écrites en PHP ou encore en Java. Citons par exemple :
-
JpGraph : http://jpgraph.net/
-
JFreeChart : http://www.jfree.org/jfreechart/
-
GraphViz : http://www.graphviz.org/
-
Highcharts JS : http://www.highcharts.com/
Google a développé de son côté une série d’API permettant de concevoir simplement des graphiques de gestion de bonne facture. Ces API sont regroupées sous l’appellation Google Charts.
Exemples d’utilisation des API Google Charts
Il ne peut être ici question de reproduire l’intégralité des exemples proposés par Google pour illustrer les très nombreuses possibilités offertes par ces API.
Nous nous contenterons ici de proposer quelques exemples significatifs.
Les exemples fournis par Google sont disponibles à l’adresse suivante : https://developers.google.com/chart/?hl=fr
1. Exemple 1 : Tracé d’un histogramme
L’objectif de ce graphe est simple, assurer la présentation sous forme d’un histogramme (barres verticales) de la production d’un produit LAMBDA (exprimée en tonnes) de trois pays (Allemagne, France et Italie) et ceci pour les années 2010, 2011 et 2012.
Une représentation en "ligne brisée" de la moyenne de la production par année sera superposée sur l’histogramme.
Section HTML <body>
Le code placé dans cette section sera quasiment identique pour l’ensemble des exemples de ce chapitre. Il est ici reproduit intégralement :
<!-- Début section body du script HTML -->
<body>
<!-- Titre du traitement -->
<h1>Editions ENI - JavaScript - COMBO</h1>
<!-- Début script JavaScript -->
<script type="text/javascript">
/* Affichage du nom du script */
alert("COMBO");
</script>
<!-- Définition de la division d'affichage du graphique -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<!-- Affichage du code source -->
<br /><br /><br />
<center>
<a href="JavaScript:window.location='view-source:' +
window.location">
Code source
</a>
</center>
</body> Une division (chart_div) est prévue dans ce code pour l’affichage du graphique (par l’intermédiaire de la fonction tracerGraphe, intégrée à la section <head>) :
<!-- Définition de la division d'affichage du graphique -->
<div id="chart_div" style="width: 900px; height: 500px;"></div> Section HTML <head>
Comme pour la section précédente, le code source de cette section est entièrement listé ci-après :
<!-- Début en-tête script HTML -->
<head>
<!-- Balise meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Titre du script HTML -->
<title>COMBO</title>
<!-- Chargement de l'API Google Chart -->
<script type="text/javascript"
src="https://www.google.com/jsapi"></script> ...
