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 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 propos13 ans agoMerci 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épondreImatt
A propos13 ans agoMerci 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épondreIslam
A propos11 ans agoSVP Est que vous pouvez expliquer plus concernant highchart et oracle ...vraiment j'ai pas trouver aucune idée !!
Répondreskulk
A propos12 ans agoMerci !! Problème résolu ;)
RépondreBen
A propos12 ans agoBonjour, 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épondreImatt
A propos12 ans agoSalut 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épondreBen
A propos12 ans agoMerci, 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épondreImatt
A propos12 ans agoJe vais voir si j'ai le temps ce midi de tester un xml.
RépondreMarc Van Kerckhove
A propos12 ans agoBonjour, 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épondreImatt
A propos12 ans agoBonjour 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épondreLusitanio
A propos11 ans agoBonjour, 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épondreLusitanio
A propos11 ans agoPardon je voulais parler de highchart ;) (et non highgraph...)
RépondreRachid
A propos12 ans agoBonjour; 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épondreImatt
A propos12 ans agoSalut 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épondreRachid
A propos12 ans agosalut; j'en ai aucune erreur. merci.
RépondreRachid
A propos12 ans agoBonjour; 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épondreRachid
A propos12 ans agoBonjour 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épondreRachid
A propos12 ans agoBonjour 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épondreSamy
A propos12 ans agoBonjour 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épondreBadr
A propos12 ans agoton 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épondreBadr
A propos12 ans agotoutes mes excuses faites comme si j'ai rien dit et merci c'est un tutoriel vraiment sympa ;)
RépondreBadr
A propos12 ans agofinalement j'avais raison je change les donnees dans data mais les memes nos de regions s'affichent encore et encore grrrrrrr
Répondredidi
A propos12 ans agoBonjour 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épondredidi
A propos11 ans agoBonjour 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épondreKaren
A propos11 ans agoBoujour! 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épondreKaren
A propos11 ans agomon data a sauté : series: [{ data: [''], }]
RépondrePierre Langlois
A propos11 ans agoBonsoir, 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épondreImatt
A propos11 ans agoVoici 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épondrePierre Langlois
A propos11 ans agoBonsoir, 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épondrePierre Langlois
A propos11 ans agoLa ligne qui m'a couté 2h n'est pas sortie : 2ème tentative
RépondrePierre Langlois
A propos11 ans agoComment font les autres pour mettre un exemple de code ? Suis tout triste
RépondreImatt
A propos11 ans agoBonjour 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épondrePierre langlois
A propos11 ans agoBonsoir, 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épondrethomas f
A propos10 ans agoBonjour, 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épondreImatt
A propos10 ans agoSalut 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épondrethomas f
A propos10 ans agook merci! Script Python ou php je suppose, sinon j'ai vu des moulinettes en ligne
Répondrekawtahr
A propos10 ans agoS'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épondreImatt
A propos10 ans agoSalut 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épondreHenri Verdier
A propos10 ans agoBravo 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épondredhaouadi
A propos10 ans agosalut Imat je voudrais faire un graphe dynamique avec highchart avec des données JSON merci d'avance
RépondreTsila
A propos10 ans agoSlt 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épondrelaraa
A propos10 ans agoBonjouuuur, 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épondreImatt
A propos10 ans agoBonjour 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épondretwig
A propos10 ans agobonjour 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épondreImatt
A propos10 ans agoSalut, 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épondrelio
A propos9 ans agoBonjour, Je souhaitais tester votre tutoriel, mais il manque le fichier index.html. Cordialement Lio
RépondreImatt
A propos8 ans agoC'est réparé :)
Répondre