Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Voici comme promis avec un peu de retard la suite du post sur Highchart la fameuse librarie javascript pour faire des graphiques. La partie 2 sur 3 sera donc consacré à un tutoriel pour démarrer avec la librarie.

Comme je viens de découvrir un site qui va bien m’amuser (j’ai nommé data.gouv.fr), je vais utiliser un des datasets proposés par ce site. J’ai décidé d’illustrer donc notre premier exemple de cette librarie Highcharts avec les données des dépenses de la sécurité sociale en France continentale par Région pour le mois de Janvier. (voici le dataset que je vous donne en json). Attention les chiffres sont impressionnants.

Préparation

Pour commencer allez sur le site de Highcharts et téléchargez la librairie. Créez un fichier index.html comme ceci :

Le fichier index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Exemples librairie js Highcharts</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Libs -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js'></script>
<script type='text/javascript' src='../js/utils.js'></script>
<script type='text/javascript' src='data.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body style='margin:0px;'>
<div class='wrapper'>
<div id='pieChart'></div>
</div>
</body>
</html>

On charge les fichiers suivants :

  • Jquery (via google api)
  • Highchart (mettre le bon chemin vers highcharts que vous avez télécharger)
  • Fichier utils.js (expliqué en dessous)
  • Fichier data.js (Le fichier data de l’exemple)
  • Main.js (le fichier qui va contenir notre code javascript pour lancer highcharts)
Le fichier utils.js est un fichier qui comprends des fonctions javascript que j’utilise souvent. La plupart de ces fonctions proviennent de php.js (voir mon post à propos de php.js). – Télécharger le fichier utils.js

Le fichier main.js

$(document).ready(function() {
$.displayPieChart(colors, data);
});
var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];
$.displayPieChart = function(colors, data) {
var chart;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'pieChart',
width: 598,
height: 450,
marginLeft: 25,
marginRight: 25,
},
colors: colors,
title: {
text: "Dépenses SECU janvier par région",
margin: 10
},
tooltip: {
formatter: function() {
return "Dépense : " + number_format(this.y,0,',',' ') + "€" ;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return "" + this.point.name.toLowerCase() + "";
}
}
},
series: {
dataLabels: {
enabled: true,
color: 'black',
fontSize: 3
}
}
},
series: [{
type: 'pie',
data: data
}]
});
}

Dans ce fichier on crée une fonction $.displayPieChart qui paramètre notre graphique.

Le array color représente les couleurs que l’on va utiliser pour notre graphique (je les change car j’aime mieux ce set de couleur que celui par défaut).

On appelle ensuite la fonction $.displayPieChart au document ready en passant 2 paramètres, la variable data (représente le dataset contenu dans data.js) et le array color.

Le résultat


Voici un beau camembert présentant les dépenses de la sécu au mois de janvier réparties par régions.

Conclusion

Comme vous pouvez le voir, un diagramme circulaire (camembert) est assez facile à mettre en place avec Highcharts. Aussi comme c’est mon premier tutoriel (d’une grande lignée j’espère) j’attend vos commentaires avec impatience pour améliorer ce post et les tutoriaux suivants.

Bientôt d’autres exemples avec Highcharts qui seront un peu plus avancés.

47 Commentaires

skulk

A propos12 ans ago

Merci pour ce tutoriel ! Avez vous des astuces concernant highchart et oracle? Je voudrais pouvoir afficher les données de ma base oracle en graphique.

Répondre

Imatt

A propos12 ans ago

Merci pour ton commentaire :) Si tu veux interfacer des données provenant d'Oracle, il faudra passer par un language de script tel que PHP ou autre. Ainsi tu pourra appeler des données provenant de Oracle via des requêtes ajax. Voici un exemple sur le site d'Highchart qui pourrait t'être utile : http://www.highcharts.com/demo/line-ajax N'hésites pas si tu as d'autres problème.

Répondre

Islam

A propos11 ans ago

SVP Est que vous pouvez expliquer plus concernant highchart et oracle ...vraiment j'ai pas trouver aucune idée !!

Répondre

skulk

A propos12 ans ago

Merci !! Problème résolu ;)

Répondre

Ben

A propos12 ans ago

Bonjour, de quelle façon procède-t-on pour obtenir le même type de graphique (camembert) avec les données provenant d'un fichier XML ?

Répondre

Imatt

A propos12 ans ago

Salut Ben Voici 2 liens qui devraient t'aider. http://www.highcharts.com/studies/data-from-xml.htm (Le graph) http://www.highcharts.com/studies/data.xml (le fichier xml) En gros pour gérer des données XML avec Highcharts tu va devoir créer ta propre fonction de parsing de ton XML. Regarde la source du fichier http://www.highcharts.com/studies/data-from-xml.htm tu va trouver ce qu'il faut. Ensuite prend le code de l'aricle pour créer un pie chart et adapte ta fonction de parsing. Tiens moi au courant de l'avancée et bon courage :)

Répondre

Ben

A propos12 ans ago

Merci, j'avais déjà essayé d'adapter la fonction de parsing de cet exemple mais en vain, c'est pour ça que j'ai posté ici au cas où tu aurais à ta disposition un exemple avec un camembert directement. Je vais donc continuer de chercher dans cette voie, je te tiens au courant.

Répondre

Imatt

A propos12 ans ago

Je vais voir si j'ai le temps ce midi de tester un xml.

Répondre

Marc Van Kerckhove

A propos12 ans ago

Bonjour, Super intéressant comme tutoriel. Pour ma part je cherche à générer des graphiques au départ de données dans une base Mysql. Auriez-vous des infos ou un exemple ? merci beaucoup,

Répondre

Imatt

A propos12 ans ago

Bonjour Marc, Merci ça fait plaisir que tu aimes ce tutoriel :) Pour te connecter à des données Mysql tu n'auras pas le choix de formater les donnés provenant de MySQL via un langage de script. Par exemple, tu peux utiliser PHP pour te connecter à ta base de données MySQL et créer un script pour formater tes données en json pour avoir une variable javascript comme dans l'exemple. Est-ce que cela t'aide un peu ?

Répondre

Lusitanio

A propos11 ans ago

Bonjour, Pour afficher des données issues d'une bdd mysql, postgres... pas besoin de passer par le json. Il suffit simplement de se connecter en php à la bdd en question et sélectionner la base puis les données(mysql_connect, mysql_select_db puis mysql_select). De boucler sur le/les résultats et d'afficher le tout via un 'echo' au bon endroit dans le script javascript. Perso j'utilise cette méthode aussi bien avec highgraph (.js) qu'avec jpgraph (.php).

Répondre

Lusitanio

A propos11 ans ago

Pardon je voulais parler de highchart ;) (et non highgraph...)

Répondre

Rachid

A propos11 ans ago

Bonjour; Merci pour ce tutoriel. je suis nouveau avec cette librairie java. je viens d'appliquer exactement ce que vous avez décrit dans ce tutoriel, mais ca ne marche pas. je ne sais pas c quoi le problème! pouvez vous m'orienter SVP. PS: j'utilise WAMP.

Répondre

Imatt

A propos11 ans ago

Salut Rachid, Pourrais-tu m'envoyer ton code par courriel dans un zip ? Si c'est possible je vais regarder vite fait. SI ce n'est pas possible, peux-tu en dire plus sur l'erreur que tu as ? As tu regarder ta console ? As tu des erreurs ? matt at undisconnected.com

Répondre

Rachid

A propos11 ans ago

salut; j'en ai aucune erreur. merci.

Répondre

Rachid

A propos11 ans ago

Bonjour; J'ai suivi ton conseil et ça marche pour moi. ça été un problème d'appel pour highchats.js et main.js. j'ai enlevé ../ et ça a marché super bien. merci mon ami.

Répondre

Rachid

A propos11 ans ago

Bonjour mes amis; je tiens a remercier Imatt d'avoir mis ce forum a notre disposition. franchement Highchats est une bonne librairie, magnifique même. je suis sur un projet du monitoring, j'aurais a utiliser beaucoup cette librairie, pour afficher plein de graphes, lol. pour vous, j'essayerai de partager mon expérience avec vous, ça me fera vraiment plaisir. donc je vous donne rendez vous au prochain bug ou a la prochaine fois que je fait quelque chose qui marche bien, lol ;) bon courage mes amis.

Répondre

Rachid

A propos11 ans ago

Bonjour mes amis. je voudrai reprendre cet exemple de Imatt, et je ferai des représentations graphiques différentes comme des Diagrammes en bâtons, Diagrammes en nuages, Histogrammes, Courbes, secteurs, anneau … Svp qui pourra m'orienter vers de la doc simple, qui pourra m'aider à réaliser ça? Merci d'avance.

Répondre

Samy

A propos11 ans ago

Bonjour Merci pour ce tutoriel J’ai repris l’exemple présenté et ça marche très bien. Mais quand j’alimente le tableau data à partir d’un fichier xml le graphique n’affiche pas les valeurs (affiche les villes seulement) Je me suis assuré de l’utilisation des mêmes données que ceux de l’exemple sur mon fichier xml ,de même que Le rendu du tableau data avant le passage dans la fonction displayPieChart (données identique à ceux de l’exemple) alert(data) retourne ILE DE FRANCE,2232943587,CHAMPAGNE ARDENNE,208049172,PICARDIE,291647915,HAUTE NORMANDIE,329969182,CENTRE,426281434,NORD PAS DE CALAIS,784487750,LORRAINE,462959889,ALSACE,313990716,FRANCHE COMTE,184551882,BASSE NORMANDIE,251148990,PAYS DE LA LOIRE,528196589,BRETAGNE,475894603,LIMOUSIN,142804187,AUVERGNE,221209988,POITOU CHARENTES,255393306,AQUITAINE,637123470,MIDI PYRENEES,617798467,BOURGOGNE,277143087,RHONE ALPES,1056935822,LANGUEDOC ROUSSILLON,629009598,PROVENCE ALPES COTE D'AZUR,1198241479,CORSE,77128456 Es que quelqu’un à une explication ?

Répondre

Badr

A propos11 ans ago

ton tuto va me rendre fou :D il marche tres bien mais quand je modifie les donnees dans le tableau data il affiche encore les anciennes donnees :S j'ai essaye meme de changer le titre du highcharts mais il m'affiche l'ancien titre je sais pas pq :S

Répondre

Badr

A propos11 ans ago

toutes mes excuses faites comme si j'ai rien dit et merci c'est un tutoriel vraiment sympa ;)

Répondre

Badr

A propos11 ans ago

finalement j'avais raison je change les donnees dans data mais les memes nos de regions s'affichent encore et encore grrrrrrr

Répondre

didi

A propos11 ans ago

Bonjour merci pour votre tuto il est génial. j'ai crée un pieChart qui affiche des données sytem(memoire) je voudrais le rendre dynamique.j'ai recupéré les infos de mon PC avec un programme java qui me lance une commande DOS puis puis je met mon resultat dans un fichier texte. mon problemes, je voudrais modifier automatiquement mon series.data chaque fois que mon fichier texte change voici mon code: enovia $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'MEMORY' }, tooltip: { pointFormat: '{series.name}: {point.percentage}%', percentageDecimals: 1 }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return ''+ this.point.name +': '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: 'IS', data: [ ['FREE MEMORY', 60.0], { name: 'MEMORY IN USE', y: 30.0, selected: true, }, ['OTHER' , 10.0] ] }] }); }); }); alert("Memory ok?") Enovia Monitor Memory

Répondre

didi

A propos11 ans ago

Bonjour je voudrais vous demander de l'aide encore en fait j'ai creer separement 4 pages html et je voudrais les affichers en dans une seule fenetre. je vous demande de l'aide si vous avez besoins de mon code je vous l'envoi merci d'avance

Répondre

Karen

A propos11 ans ago

Boujour! Tout d'abord merci pour ce tuto!! une belle découverte!! je rencontre actuellement un problème d'affichage de mon graphique j'ai retourné le problème et rien y fait... je suis sûre que ça doit être très bête!! j'ai ma page html avec ma div et un formulaire de selection de tranche de dates on script appelé au submit dit : function GraphHighCharts() { $('form#visu_rdv').submit(function (e) { e.preventDefault(); var dateDeb = $('input#dpd1').val(); var dateFin = $('input#dpd2').val(); $.ajax({ url:'../system/requetes.php', type:'POST', data:{ typeReq:'Bilan-RDV', dateDeb:dateDeb, dateFin:dateFin }, success: function (data) { console.log(data); var chart = new Highcharts.Chart({ chart: { type: 'pie', renderTo: 'container' }, title: { text: 'Stats RDV' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '{point.name}: {point.percentage:.1f} %' } } }, series: [{ data: [''], }] }); }, error: function(xhr, textStatus, errorThrown) { alert(textStatus + ' | ' + errorThrown); } }) }); } Cette fonction ajax appelle ma requête placé dans un fichier requête et où je construis mon tableau $data : while($row = $resultat->fetch(PDO::FETCH_ASSOC)) { $tableauBilan = $row['Bilan']; $tableauNbeRDV = $row['Nbe_RDV']; $data = "['$tableauBilan', $tableauNbeRDV]"; echo $data; } quand je fais un console.log(data) je vois bien mon tableau et les bonnes données mais le graphique ne s'affiche pas je n'obtiens que le titre et une mention : Slice:0.0% Je ne vois pas mon erreur, quelqu'un pourrait-il m'aider :-( Merci beaucoup!!!

Répondre

Karen

A propos11 ans ago

mon data a sauté : series: [{ data: [''], }]

Répondre

Pierre Langlois

A propos10 ans ago

Bonsoir, Ce soir j'ai juste à vous dire MERCI ! ! ! Cela fait 3 jours que je galère. Faut vous dire que je suis un Primo Débutant. Je voulais un graphe pour agrémenter une page de notre futur site, page qui contient un petit calcul nécessitant la saisie de 2 chiffres par l'internaute. Il me faut encore : - faire en sorte que le graphe s'affiche avec les valeurs exemples - et qu'il soit ré-affiché après le calcul avec les valeurs saisies par l'internaute. Avant d'abuser de votre temps je vais d'abord décortiquer la chose… De toute façon, même si je parviens à me débrouiller, vous aurez droit, avec votre accord préalable, à une place de choix dans l'onglet [Remerciements] à côté de la communauté Wordpress. PL

Répondre

Imatt

A propos10 ans ago

Voici le genre de commentaire que j'adore :) Merci d'avoir pris le temps de l'écrire !! Si vous avez des questions n'hésitez pas à les poser ici, bon courage !

Répondre

Pierre Langlois

A propos10 ans ago

Bonsoir, Vous m'y avez invité alors j'abuse… mais promis pour le lien dans l'onglet [Remerciements] j'ai juré. Compte rendu de l'après midi : - 30mn au plus pour intégrer Highcharts à ma page html de test, - pour ce qui de l'installation avec votre tuto Highcharts c'est simple et clair - 1h pour le prendre en main : changement des données initiales, des couleurs, du format, etc.. Puis : - 2h ou arriver à ceci : - avec refresh() une procédure en pied de body qui me dit juste "Bonjour" et à la place de laquelle je pensais mettre : - le passage des données saisies par l'internaute - une relance d'Highcharts Résultat 5h de recherche et de test pour un trou noir. J'ai tenté d'adapter tous les exemples donnés sur stackoverflow.com au demeurant sans tous comprendre. C'est sur j'ai atteins mon seuil de compétence de Primo Débutant. Ai bien besoin d'un coup de pouce que l'on peut résumer en une question : - comment peut-on redessiner Highcharts après saisie de l'internaute de 2 valeurs numériques ? Me doutant que la réponse sera plus complexe, merci d'avance de votre aide. PL

Répondre

Pierre Langlois

A propos10 ans ago

La ligne qui m'a couté 2h n'est pas sortie : 2ème tentative

Répondre

Pierre Langlois

A propos10 ans ago

Comment font les autres pour mettre un exemple de code ? Suis tout triste

Répondre

Imatt

A propos10 ans ago

Bonjour Pierre, Je vais essayer de t'aider un peu : Pour recharger le graph avec Highchart il faut utiliser la methode redraw(); Donc normalement, une fois tes variables récupérées (valeurs saisies à la main dans des champs input text). Tu peux adresser ces données au graphique.En admettant que tu ais construit ton graph dans la variable chart et que les données à changer soit dans la series 0 : chart.series[0].data = [2,4,4]; // 2,4,4 serait les données récupérées (par exemple). chart.redraw(); Sinon explique moi un peu plus quelles sont tes données que tu veux changer ? Courage :) http://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart

Répondre

Pierre langlois

A propos10 ans ago

Bonsoir, Pour qu'un graphique exemple soit affiché à l'ouverture de la page : - j'ai initialisé dans le head : mavar_1 = 1500.00 mavar_2 = 10.00 mavar_3 = 15000.00 mavar_4 = 1500.00 - dans le data.js j'ai remplacé les valeurs numériques par le nom des variables globales mavar_1 = 1500.00 mavar_3 = 15000.00 mavar_4 = 1500.00 mavar_2 n'ayant pas être affichée dans le graph. - je mémorise la saisie de l'internaute dans : mavar_1 = xxxx.xx mavar_2 = xx.xx - puis lorsqu'il clique sur le bouton calculer, je recalcule via une fonction recalCul(); mavar_3 = yyyyy.yy mavar_4 = yyyyy.yy - et ré-affiche les résultats dans le formulaire Jusque là tout fonctionne sans problème. En sortie recalCul() appelle retraceGraph(); C'est à partir de là que je suis planté car je ne trouve le code à mettre dans retraceGraph(); pour redessiner le graphique avec les nouvelles valeurs des 3 variables mavar_1 mavar_3 mavar_4 J'ai testé tous les codes donnés sur stackoverflow.com mais rien ne fonctionne (ou je ne l'ai pas compris) . Autre piste explorée : qu'est-ce qui lance le tracé initial mais je n'ai pas trouvé.

Répondre

thomas f

A propos10 ans ago

Bonjour, une chose que je ne comprends pas c'est que les datasets sur open data sont le plus souvent au format xls ou csv, or dans l’exemple elle est au bon format json. Y-a-t-il une étape intermédiaire de transformation et reformattage?

Répondre

Imatt

A propos10 ans ago

Salut Thomas, Effectivement, pour les besoins du tutoriels, j'avais fait la conversion manuellement! Mais un script serait facilement faisable pour faire une conversion. Tu peux aussi regarder du côté de la documentation de Highcharts pour utiliser directement du csv. J'essayerais d'écrire ça un de ces 4, c'est dans ma todo ;) Merci

Répondre

thomas f

A propos10 ans ago

ok merci! Script Python ou php je suppose, sinon j'ai vu des moulinettes en ligne

Répondre

kawtahr

A propos10 ans ago

S'il vous plait, j'ai une base de données en excel et j'aimerai bien savoir s'il y a la possibilité d'exporter les données de cette bases vers Highcharts même si elle devienne très grande? J'aimerai aussi savoir s'il y a un moyen de tirer différents données de différents page excel pour calculer un Taux par exemple?? Mercii

Répondre

Imatt

A propos10 ans ago

Salut Kawtahr, Tu peux exporter les données d'excel en un fichier CSV (séparré par des virgules). Ensuite avec Highcharts, tu pourras aller lire les données. Qu'entends tu par "très grande" ? Highcharts est sensé pouvoir gérer un bon nombre de données, mais ensuite, c'est à toi de développer l'application pour que cela reste "lisible". Pour ce qui est de Excel, je ne peux pas t'aider, je ne connais pas assez. Au plaisir !

Répondre

Henri Verdier

A propos9 ans ago

Bravo et merci J'espère que vos exemples viendront aussi enrichir www.data.gouv.fr, on ne veut pas seulement y diffuser les données, on voudrait aussi les y faire vivre ;)

Répondre

dhaouadi

A propos9 ans ago

salut Imat je voudrais faire un graphe dynamique avec highchart avec des données JSON merci d'avance

Répondre

Tsila

A propos9 ans ago

Slt le peuple! je suis un peu nouveau ici et j'aimerai savoir s'il y a quelque qui pourrait m'aider pour construire un Chart au format waterfall avec highchart? Merci d'avance!

Répondre

laraa

A propos9 ans ago

Bonjouuuur, J'ai une page web en php qui contient beaucoup de graphiques en Highcharts.. et donc j'ai beaucoup de fichiers.. j'aimerai bien savoir s'il y a une façon de gérer ces fichiers là, par exemple, pour les graphes des 'column ' en a un seul fichier pour eux qui fait appel à la base de données et ainsi de suite pour tous les autres types de ghraphics. MERCII

Répondre

Imatt

A propos9 ans ago

Bonjour Laraa, désolé pour le retard de ma réponse ! JE ne suis pas sûr de comprendre ce que tu veux faire, peux-tu expliquer un peu plus, si tu as toujours besoin d'aide ? Merci

Répondre

twig

A propos9 ans ago

bonjour IMATT, je suis nouveau avec highchart et cela fait 5jours que je galére. En effet j'utilise highStock intra day mais je sais pas comment je peux dire à highstock de puiser ses données dans ma base de données mysql. Voici mon code avec highstock: " $(function () { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) { // create the chart $('#container').highcharts('StockChart', { title: { text: 'Graphe des Débits par minute' }, subtitle: { text: 'Using ordinal X axis' }, xAxis: { gapGridLineWidth: 0 }, rangeSelector : { buttons : [{ type : 'hour', count : 1, text : '1h' }, { type : 'day', count : 1, text : '1D' }, { type : 'all', count : 1, text : 'All' }], selected : 1, inputEnabled : false }, series : [{ name: 'Debit Entrant', ".$data_entrant.", name: 'Debit Sortant', ".$data_sortant.", type: 'area', data : data, gapSize: 5, tooltip: { valueDecimals: 2 }, fillColor : { linearGradient : { x1: 0, y1: 0, x2: 0, y2: 1 }, stops : [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, threshold: null }] }); }); }); "; } Merç d'avance.

Répondre

Imatt

A propos9 ans ago

Salut, en fait pour utiliser la méthode "getJSON" tu dois préparer un script côté serveur (PHP, Ruby, autre ...) pour préparer tes données en JSON. En faisant une requête sur ta BD, tu peux ensuite convertir ces données que tu souhaites afficher en JSON. Ainsi la fonction getJSON ira chercher ces données via AJAX. J'espère que ça t'aidera, sinon n'hésite pas :)

Répondre

lio

A propos8 ans ago

Bonjour, Je souhaitais tester votre tutoriel, mais il manque le fichier index.html. Cordialement Lio

Répondre

Imatt

A propos8 ans ago

C'est réparé :)

Répondre

Laisser un commentaire

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked