Highcharts une librairie javascript pour les graphs – 1/3 – Présentation

Highcharts une librairie javascript pour les graphs – 1/3 – Présentation

Je vais vous parler d’Highcharts, une librairie Javascript vraiment bonne pour faire des graphiques. Cette librairie a été construite et est maintenu par la compagnie Norvégienne Highslide Software. Elle est gratuite pour des projets personnels et coûte quelques deniers pour un usage commercial.

J’utilise Highcharts presque quotidiennement pour ma job et je dois avouer que je suis assez content de l’avoir choisi pour plusieurs raisons :

  1. Facilité d’emplois
  2. Paramétrable à souhait avec un objet JSON
  3. Le rendu est vraiment beau
  4. Les types de graphiques (pie chart, bar graph, bubble graph, timeline, …)
  5. Le module d’export intégré (JPEG, PDF, SVG, PNG)
  6. Cross navigateur (fonctionne en VML et en SVG)

1 – La facilité d’emplois

En effet Highcharts est très simple d’utilisation. On est en plein dans le plug&play ! Il suffit d’ajouter le script Javascript et la feuille de style pour commencer à apercevoir la puissance de l’outil. Vous verrez dans la suite de ce tutoriel complet sur Highcharts (partie 2/3) comment faire un premier graphique. Vous allez vite comprendre que ce n’est pas sorcier !

2 – Paramétrable à souhait avec un objet JSON

Le paramétrage de Highcharts s’effectue à l’aide d’un objet JSON. Les paramètres sont assez larges et permettent de configurer tout ce qui peut être utile dans un graphique. Le type de graph, la légende, les échelles, les labels, les axes … On peut aussi ajouter des évènements comme onClick, onMouseOver …

3 – Le rendu est vraiment beau

C’est toujours une question de goût mais je dois dire que j’ai testé quelques librairies Javascript dans ce type et que celle-ci m’a tapé dans l’oeil. Les transitions au chargement du graphique sont vraiment belles et fluides. On peut également paramétrer les couleurs et tous les éléments des graphiques ce qui permet de l’adapter facilement dans sa charte graphique. Parlez-en à votre graphiste, il comprendra 😉

4 – Les types de graphique

Vous retrouvez dans Highcharts de quoi faire n’importe quel type de graphique : Bar, pie, donut, scatter, bubble, line, stacked, spline, area, timeline. Il est aussi possible de combiner plusieurs type de graph sur un même canvas avec des axes différents, ce qui se révèle être l’arme ultime de la librairie. Un mode permet aussi d’updater un graphique en temps réel (Voir les exemples).

5 – Le module d’export intégré (JPEG, PDF, SVG, PNG)

Highcharts propose un module d’export (fait en java) qu’il est possible d’utiliser depuis une API (à partir de leur serveur) ou que l’on peut installer en local. Encore une fois, c’est vraiment simple, si l’on active le mode d’export, le graphique se verra ajouté un petit combo-box permettant de choisir le type d’export souhaité : JPEG, PDF, SVG, PNG. Cette fonctionnalité peut paraître futile, mais je peux vous assurer que si un jour on vous demande un export, c’est un sacré gain de temps de ne pas avoir à le coder.

6 – Cross navigateur (fonctionne en VML et en SVG)

Encore une fois Highcharts marque des points puisque la librairie fonctionne sur tous les navigateurs modernes à savoir Firefox, Chrome, Safari, Opera mais aussi Internet Explorer 6, 7, 8 et 9. Les navigateurs mobiles basés sur Webkit permettent aussi d’afficher ces graphs, ce qui inclue Ipod, Iphone et Ipad.

Conclusion :

Voilà les gros points forts de cette librairie. Je concède que pour les projets commerciaux (comprenez qui rapporte de l’argent sous n’importe quelle forme), il vous faudra acheter une licence. Tout ce que je peux dire c’est que je n’est pas hésiter à dépenser les quelques 200€ pour la licence développeur. On peut ensuite l’utiliser pour n’importe quel projet. Vu le travaille qu’il y’a derrière, c’est justifié et vu le temps que l’on gagne, ça en vaut le coup.

La bonne idée est aussi d’avoir permis l’utilisation pour les projets personnels ce qui permet de vous faire une idée avant de l’acheter.

Un petit point négatif tout de même, c’est la documentation. Elle n’est pas toujours très claire et des fois on doit chercher pas mal pour trouver ce que l’on souhaite. Donc si vous avez des questions, n’hésitez pas, je pourrais peut être vous renseigner.

Références :

40 Commentaires

Sam

A propos12 ans ago

Salut, Ton article est très intéressant. Vivement la suite ! :p

Répondre

theadmin

A propos12 ans ago

@sam : Merci pour ton commentaire, j'essaye de m'en charger la semaine prochaine. Je manque de temps ... mais ça s'en vient ! Bonne journée

Répondre

bidouille

A propos12 ans ago

Bonjour, j'ai mis en place un double graphique (dans le même contenair, avec 5 courbes par pane) avec highstock, mais j'aurais besoin de récupérer la valeur de x onmouseover dans une variable pour m'en servir dans une autre librairie js sur la même page. Auriez vous la gentillesse de m'aider ?

Répondre

theadmin

A propos12 ans ago

Salut Oui tu peux récupérer cette valeur de la façon suivante : plotOptions: { series: { point: { events: { mouseOver: function() { alert(this.x) }, }, }, } J'ai trouvé ça ici : http://www.highcharts.com/stock/ref/#plotOptions-series-point-events--mouseOver Tu peux essayer ça à la racine de ton object. ça devrait faire un alert de ta valeur x lors du mouseover. J'espère que ça va t'aider, dis moi si ça fonctionne !

Répondre

bidouille

A propos12 ans ago

Effectivement cela fonctionne :) Je teste dès demain l'intégration dans ma deuxième librairie et je te tiens au courant. Merci du coup de main !

Répondre

bidouille

A propos12 ans ago

Décidément, je ne suis pas doué en js :x (j'avoue je maîtrise bien le php mais pas du tout le js). Puis-je abuser de ta gentillesse ? Voilà ce que je tente de faire (sur un select ou un mouseOver) : mettre à jour une jauge bindows (http://www.bindows.net/free_gauges/Instructions.html) à partir du this.x de highstock. Voici le code que j'insère dans mon chart : plotOptions: { series: { allowPointSelect:true, point: { events: { select:function (event) { var puissance=[]; var valeur=[]; puissance= ; valeur=; count=valeur.length; for (i=0; i<valeur.length; i++) { if (this.x ==valeur[i]) { function bouh(){ var gauge = bindows.loadGaugeIntoDiv("monchemin/bindows_gauges/gauge3.xml", "gaugeDiv"); gauge.needle.setValue(puissance[i]); gauge.label.setText(puissance[i]);} bouh(); //alert('valeur x highcharts= ' +this.x + ' ma valeur= ' +valeur[i]+ ' valeur du i= ' +i+ ' puissance= ' +puissance[i]+ ' '); } } } } } } }, et dans mon html : Les tests réalisés sans bindows avec l'alert (commenté ci-dessus) fonctionnent parfaitement. Avec bindows, je reçois bien la valeur quand je 'select' la première fois, mais plus si je refais un deuxième select. Il semble (si j'ai bien compris) que ce soit mon qui ne soit plus "vu" par bindows. (J'espère être clair dans mes explications) J'imagine que la solution est simple mais google n'est visiblement pas mon ami aujourd'hui :x Peux-tu m'aider stp ?

Répondre

theadmin

A propos12 ans ago

Salut Bidouille, je dirais que ça sent le problème de bind d'event. En javascript un event est bind (attaché) à un element du DOM, si tu recharges ou que tu fais apparaître un élément du DOM, tu devras réattacher ton event. Dans ton cas essaye peut-être de recharger la fonction de ton select.

Grom

A propos12 ans ago

Bonjour, Je suis en train de me renseigner sur Highcharts. A quand la partie 2 et 3/3? Merci beaucoup

Répondre

Iris

A propos12 ans ago

Bonjour, tout d'abord, superbe présentation de highcharts ! Je commence à l'utiliser car j'ai un projet informatique à réaliser : je dois récupérer les températures grâce à des sondes pt1000 et les stocker dans une base de donnée, ensuite sur le site web que je dois réaliser je devrai visualiser ces courbes en temps réelle. Malheureusement je ne sais pas comment faire pour récupérer mes températures issues de ma base de donnée. Auriez vous la gentillesse de m’aider ? Cordialement Iris.

Répondre

theadmin

A propos12 ans ago

Bonjour Iris, Effectivement, Highcarts propose un mode temps réel qui pourrait être très interessant pour ton projet. Pour tes données si elles sont dans une base de données, il te faudra aller les chercher avec PHP ou autre langage de ton choix et créer un call ajax en javascript pour récupérer les données en temps réel.

Répondre

Marc Van Kerckhove

A propos12 ans ago

Bonjour, Auriez-vous un exemple à partir d'une db mysql ? merci,

Répondre

joris

A propos12 ans ago

Je viens de découvrir cette librairie j'attend la suite de ton tuto avec impatience !

Répondre

theadmin

A propos12 ans ago

Oui ça devrait venir la semaine prochaine avec quelques exemples d'utilisation, merci de ta patience !

Répondre

Jean-Paul

A propos11 ans ago

Bonjour, Je viens de découvrir votre site très intéressant et je vois qu'on peut générer des graphiques dynamiques avec Highcharts. Etant autodidacte, j'ai appris l'informatique par moi-même en lisant des revues techniques et j'arrive à faire à peu prés ce que je désire mais là je bute un peu. Amateur de météo, j'ai réalisé un petit site (www.vardecouverte.fr) et je souhaiterais l'améliorer en créant des graphiques dynamiques pour les différentes données (température, pluie, vent etc.) Ma station météo automatique enregistre sur mon ordinateur les données toutes les 5 mn sous forme de fichier csv. Ce fichier (ainsi que ceux des années précédentes), est exploité par le programme Graphweather qui, lui, génère les graphiques sous forme d'images et les transmets également toutes les 5 mn sur mon site. Ma question est la suivante : Pensez-vous qu'avec cela, je peux obtenir des graphiques dynamiques et auriez-vous la gentillesse de m'aider pour cela. J'ai bien cherché sur le Net un tutorial mais rien en français et l'anglais n'est pas mon fort. Il est à noter que je peux transformer les fichiers csv en tableaux Excel, mais alors, je n’aurai plus une mise à jour automatique sur mon site. Je vous remercie par avance de votre réponse. Sincères salutations. Jean-Paul.

Répondre

Imatt

A propos11 ans ago

Bonjour Jean-Paul, Merci pour votre commentaire ! Désolé pour le retard de ma réponse mais comme je me suis lancé en business il y'a 3 semaines, je suis submergé de travail et administratif ;) Je suis sûr qu'avec un CSV il sera possible de générer un graphique dynamique avec Highchart. Une piste serait de transformer les données CSV en JSON le format qu'utilise Highchart. Pourriez-vous m'envoyer un courriel avec le fichier CSV, je pourrais vous écrire la partie du code qui permettrais de faire cette transformation. Aussi quel type de graphique souhaitez-vous ? Je ne promet rien sur les délais ;)

Répondre

alain_g

A propos11 ans ago

Bonsoir, je suis un peu dans le même cas que Jean-Paul mais pour l'instant j'utilise l'Annotatedtimeline de Google sur mon site. J'utilise Firefox mais je viens de me rendre compte qu'annotatedtimeline provoque des erreurs de script avec internet explorer. J'envisage donc de basculer dans highcharts ou highstocks mais je bute sur le problème de l'import du CSV (aujourd'hui les données sont sur spreadsheet). Si vous avez trouvé une solution pour Jean-Paul, pourriez vous me la communiquer afin que je la teste? Merci d'avance pour votre aide ;) Alain

Répondre

alain_g

A propos11 ans ago

bon, j'ai un peu fouillé un des liens que tu avais envoyé, j'ai trouvé cet exemple http://www.highcharts.com/studies/data-from-csv.htm j'arrive à le faire fonctionner quand le fichier data.csv est dans le même répertoire mais lorsque je veux aller le chercher ailleurs, en écrivant "$.get('http://mon.site.com/repertoire/data.csv', function(data)" cela ne fonctionne pas. J'ai largement atteint mes limites... Pouvez vous m'aider? Alain

Répondre

alain_g

A propos11 ans ago

ok, j'ai trouvé. Il suffit juste de mettre le chemin comme ça: /rep1/rep2/data.csv En posant des questions on arrive à trouver des réponses ;) Sinon, il me reste aussi à voir comment intégrer ces graphiques dans un billet dotclear, là ça va être moins drôle pour moi... Alain

Imatt

A propos11 ans ago

Bonjour Alain, Désolé je n'ai pas été très présent cette semaine, content de voir que tu as pu résoudre ton problème. Je planifie dès maintenant de faire un tutoriel pour utiliser facilement Highchart avec des données au format CSV. A suivre donc et merci d'avoir fait profité de tes solutions. @+

Laurent

A propos11 ans ago

Bonjour, Avez vous connaissance d'un moyen pour un export en png 'par exemple' mais de manière automatique, pour me permettre d'introduire l'image ainsi créer dans un fichier excel. D'avance merci

Répondre

Imatt

A propos11 ans ago

Salut Laurent, Je dirais qu'il semble plus facile de faire un export au format CSV, d'importer les données et ensuite de générer un graphique sous Excel. Sinon j'ai aussi déjà réussit à créer un export en PNG (aussi en EPS) via Inkscape en appelant une ligne de commande sur le serveur Linux. Pour automatiser, tu pourrais utiliser une tâche Cron via ce script. Si cette solution t'interesse, je pourrais peut-être détailler le tout dans un prochain article. Peux-tu expliquer un peu plus précisément ton workflow ? Pourqui passes-tu de Highchart à Excel ? Tiens moi au courant, bonne journée!

Répondre

Laurent

A propos11 ans ago

Salut, Merci pour cette reponse je vais regarder. Je passe de Highchart à Excel parce j'utilise la classe PhpExcel et je veux y introduire un graphisme

Répondre

alain_g

A propos11 ans ago

Bonjour et joyeux noël à tous, j'ai fini par obtenir un graphique highstock (cousin germain d'highcharts) qui ressemble à peu près à ce que je voulais :) Par contre je ne sais toujours pas comment l'intégrer dans un billet de dotclear... Mon niveau à ce sujet approche les 0... Peux tu m'aider stp? L'exemple du graphique est visible là: http://maison.guillet.free.fr/fichiers/test/data-from-csv%20-%20highstock.htm Quand j’insère le code html dans un billet au format xhtml ça le prend comme du texte, quand je le fais avec la syntaxe wiki et les balise ///html et /// pas mieux... Il me manque une case? Merci d'avance. Alain

Répondre

alain_g

A propos11 ans ago

décidément j'aime bien poster chez toi car après je trouve la solution... Il suffisait de modifier le fichier head du thème de dotclear pour rajouter les inclusions de jquery et de highstock. Ensuite j'ai édité un billet en html et afficher le code source puis copier le code html qui fonctionne. Y aurait il une autre manière? J'ai fait cela d'une manière très perso (à l'arrache) mais je ne sais pas si c'est la bonne méthode... Alain

Répondre

alain_g

A propos11 ans ago

bon, ça marchotte en fait. Dès que j'édite le code plus rien n'est affiché. Il faudrait peut être que je prenne des cours :) Alain

Répondre

alain_g

A propos11 ans ago

Bon, je vais arrêter de polluer ton blog après ça. J'ai donc réussi à afficher dans un billet dotclear le graphique par l'utilisation de la balise object. C'est un peu crade avec IE, cela dessine un cadre autour et affiche une barre de scrolling vertical, mais je m'en moque un peu. Par contre c'est niquel sous firefox et chrome ;) J'ai aussi modifié un petit peu le script pour passer en paramètres le nom du fichier csv que l'on veut utiliser pour les données, voici un exemple: http://maison.guillet.free.fr/fichiers/histock.htm?fich=/fichiers/test/VMC%202012%2011.csv&typ=vmc La variable typ est utilisée pour l'affichage du nom du graphique. ++ Alain

Répondre

Imatt

A propos11 ans ago

Salut Alain, wow excuse moi du méchant retard de ma réponse ;) COntnet que tu es trouvé la solution ! c'est de la bonne polution donc n'héste pas à poster ! Je vais reposter un peu plus dans les prochaines semaines ! Au plaisir

alain_g

A propos11 ans ago

t’inquiète pas pour les délais, c'est déjà très sympa de ta part de répondre ;) Le fichier html est dispo pour ceux que cela intéresse, j'aurai voulu plus de possibilité dans le traitement automatique des courbes mais le temps me manque... Alain

nesrine

A propos11 ans ago

Bonsoir, je suis entrain de développer une application qui permette d'afficher des statistiques en ligne et de générer des rapports . l'affichage des statistiques elle fonctionne bien ,j'ai utilisé la librairie hightcharts est ça marche .mais pour la génération , je suis bloqué .Je sais pas quoi faire :(.Lors de mes recherches j'ai trouvé des codes qui permettent de convertir du javascript à une image .png mais ça ne marche pas . Ce que je voudrai le faire est de générer des graphes hightchart automatiquement (enfaites plusieurs) et les insérés dans un fichier pdf dans des places bien définies tous cela doit être fait en arrière plan quand l'utilisateur clique sur une bouton.s'il vous plait avez vous des idées qu'elle peuvent m'aider ? et merci d'avance :)

Répondre

Imatt

A propos11 ans ago

Salut Nesrine, J'ai déjà fait quelque chose de similaire, je vais tenter de t'expliquer ce que j'avais fais ! Comme Highcahrt est un svg, tu récupères la balise svg via jQuery : $('svg').html();. Tu envois ça via ajax a un fichier php qui va éxécuter une commande Inkscape et ainsi pour=voir générer un pdf ou des images. Voici un lien qui t'explique ce qu'est Inkscape : http://zkwarl.blogspot.ca/2006/08/inkscape-tip-use-inkscape-on-command.html j'espère que ça t'aidera ! @+

Répondre

hajar

A propos11 ans ago

http://www.highcharts.com/studies/data-from-csv.htm ce programme ne fonctionne pas pour moi je ne sais pas pourquoi j'ai des soupçons sur la forme du fichier csv, est ce que quelqu'un peut m'aider à trouver une solution??

Répondre

Imatt

A propos11 ans ago

Salut Hajar, Le format du csv est le suivant : Apples,Pears,Oranges,Bananas,Plums John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15 http://www.highcharts.com/studies/data.csv Si ton format de csv est différent, il faut que tu adapte le code de la section. Sinon pour le format de ton csv assure toi que tu as bien des retour de ligne "\n" et des "," comme caractère de séparation. Bon courage

Répondre

hajar

A propos11 ans ago

merci pour la réponse mais c'est le format que j'ai

Répondre

salma

A propos11 ans ago

Bonsoir, je suis besoin de votre aide. je dois effectuer un bubble charts avec highcharts , j'ai déjà fait un programme dont les données sont insérées dans le code, mais c'est pas cela mon but, moi je veux avoir les mêmes résultats en important les données d'un fichier csv. aidez moi s'il vous plait, c'est urgent .

Répondre

bepa

A propos11 ans ago

Salut, J'aimerai faire un graphique de type barre (column with rotated labels) avec les barres de couleurs différentes. Je parviens à changer la couleur de toutes les barres avec color dans series mais chaque barre séparément. Si vous avez une idée, ça me rendrait service, svp.

Répondre

Dj

A propos11 ans ago

Bonjour :), Je suis sur un projet de Business intelligence pour mon fin de cycle, je travail avec JavaScript,Highchart Node JS,Backbone JS,Jquery,et tout type de Base de données, j'ai fais entrer mes données sur le WEBSQL de google chrome,et je souhaite les afficher (avec des requettes sql ) avec Highchart. j'aimerai bien un guide Svp,je vous serai trés reconnaissant :) PS: merci pour la présentation,formidable,ça m'a motivé :)

Répondre

Imatt

A propos11 ans ago

Salut Désolé, je ne vais pas avoir le temps dans un avenir proche de te fournir un tel guide. Mais c'est une bonne idée, je me garde ça de côté pour peut-être un jour faire un article sur ce sujet. Bonne chance pour ton projet!

Répondre

dj

A propos11 ans ago

tkt Bro,merci comme meme,ton tuto m'aide assez deja :)

Répondre

Nico

A propos10 ans ago

Hello, J'essaye en vain d'installer le module d'export d'highcharts sur un serveur local Tomcat (java). J'ai obtenu mon .war que j'ai pu déployer sur le serveur en question cependant lorsque j'accède à la page de démo "http://localhost:8080/highcharts-export-web/" et que je clique sur "generate image" j'obtiens : " Oops.., ${message} " J'ai regardé dans les logs de mon serveur et j'ai remarqué "Error PhantomJS could not start" avec un peu plus bas un "Pool exhausted". Une idée ? Te remerciant d'avance !

Répondre

Imatt

A propos10 ans ago

Salut Nico, Honnêtement, je ne serait pas te répondre, je n'ai jamais entrepris d'installer le module d'export en local, j'utilise toujours celui de Highcharts. Je te conseillerais de te rapproché de leur soutiens technique pour avoir plus d'information sur cette erreur. Bonne chance et n'hésite pas à partager la solution quand tu l'auras. @+

Répondre

Laisser un commentaire

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