Aujourd’hui, je vais vous parler de diagrammes.
J’ai trouvé un petit outil permettant de générer vos diagrammes en vue d’une impression.
Pour cela, rendez-vous sur ce site : nces.ed.gov
Rien de bien compliqué, il vous suffit de suivre les instructions données (abscisses, ordonnées, valeurs, légendes, etc. ).
Comme vous pouvez le constater, cet outil utilise le module Google Charts pour créer les diagrammes.
Du coup, c’est l’occasion de vous parler de ce module.
Comme pour l’ensemble des API Google, la mise en place est enfantine.
Pour avoir un diagramme personnalisé (et dynamique si la génération des données se trouve dans une boucle MySQL par exemple), il vous faudra d’abord lier votre page à l’API de Google en utilisant le code ci-dessous dans le HEADER.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Ensuite, toujours dans votre HEADER, vous allez générer votre diagramme en Javascript comme suit :
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
Enfin, il vous suffira de créer votre DIV dans votre BODY à l’endroit ou vous souhaitez voir votre diagramme, avec comme ID celui indiqué dans le code ci-dessus (4ème ligne en partant du bas).
Si vous avez suivi la procédure ci-dessus, vous devriez obtenir quelques chose comme ça :
Il est à noter que l’API vous permet de générer différents diagrammes, comme le Camembert (ci-dessus), mais aussi des cartes du monde, des histogrammes etc. Bref, une fois de plus, Google a fait fort dans le domaine…
