Javascript Article

Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire

Recharger un graphique Highchart avec de nouvelles données provenant d’un formulaire

Je vous ai préparé un tutoriel sur Highchart qui explique comment recharger un graphique avec de nouvelles données saisies dans un formulaire HTML. Dans mon cas, je vais prendre l’exemple de quelqu’un qui saisit des données dans des champs texte et recharger le graphique à l’aide de ces données.

Structure de ce tutoriel Highcharts

Pour ce tutoriel, nous allons utiliser la structure de fichier suivante :

  • fichier index.html
  • fichier main.js (contient le code pour le graphique)
  • On appelle Highcharts & jQuery via un CDN

Fichier index.html qui va accueillir le graph Highcharts

Ici, rien de bien compliqué, on fait juste créer un fichier HTML5 en appelant le fichier main.js et les 2 librairies Highcharts et jQuery. Puis on construit un formulaire.

Fichier main.js

Le fichier main.js va accueillir le code qui va nous servir à créer le graph mais aussi le code qui va permettre de recharger le graph avec de nouvelles données saisies par l’utilisateur dans un formulaire.

Découpons un peu le code! Premièrement, nous allons mettre en place la fonction qui va générer le graphique au chargement de la page (la première fois). Notez que l’on assigne ce graphique à la variable document.chart, ceci dans le but de pouvoir accéder facilement plus tard à notre variable. (voir la portée des variables en Javascript).

Fonction qui affiche le graphique

Ensuite, nous allons créer la fonction qui va prendre en charge la lecture du formulaire et le rechargement du graphique en fonction des nouvelles données.

Fonction qui va recharger le graphique

Quelques explications :

Ici on va aller lire à l’aide de jQuery les valeurs entrées dans le formulaire. On sélectionne, #data .value (la série qui contient les chiffres) et #data .titre (la série qui contient les titres). On insère ces nouvelles données dans des array Javascript à l’aide de la méthode push. On utilise la fonction parseInt pour s’assurer que les valeurs seront bien des integers. Il faudrait pousser plus loin la vérification des données du formulaire dans un cas réel mais pour ce tutoriel, ça suffira amplement.

 

Finalement : Document ready de jQuery pour binder les actions

Ce bout de code permet donc dans l’ordre de :

    • Récupérer les données du formulaire via la fonction getDataFromUser
    • Initialiser le graphique au chargement de la page en appelant la fonction displayPieChart.
    • Binder (lier) le click sur le bouton(#button) le rechargement du graphique avec les nouvelles données

Conclusion

Voici donc le résultat de ce tutoriel sur Highchart, j’espère que ça vous sera utile. N’hésitez pas si vous des questions / remarques en commentaires.

Jquery – évenement redimension du navigateur

J’ai récemment eu un problème à gérer en Jquery. Je voulais pouvoir redimensionner une fenêtre et récupérer la largeur de la fenêtre (après redimension). Pour éviter le lag du calcul à chaque “mini” redimension, la solution est d’agir une fois que l’on a fini de redimensionner la fenêtre. Voici comment faire : 

Créer un nouvel évènement jQuery (à utiliser comme une fonction) : 

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger(‘resizeEnd’);
    }, 500);
});

Mettre ce code dans le document ready : 

$(window).bind(‘resizeEnd’, function() {
    var wdt = $(window).width();
    alert(wdt);
});

Voilà c’est assez simple mais ça peut servir dans certain cas un peu fucké comme je viens d’avoir ! J’espère que ça vous servira :)

Créer un backend simplement avec Bootstrap

Créer un backend simplement avec Bootstrap

Bootstrap est un framework permettant de développer des interfaces graphiques professionelles très simplement et très rapidement. Pour preuve du sérieux, le framework est développé et maintenu par Twitter! Je vais vous présenter rapidement dans cet article les différentes composantes du framework.

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

  • Utilisation de HTML5
  • Un “reset” CSS très simple basé sur Normalize.css
  • Un système de grille css (grid system)
  • Un système simple de “layout”
  • Un système pour faire un site “responsive” vraiment très bien fait

Framework CSS

  • Un système de typographique
  • Gestion des styles et “helper” pour les tableau HTML
  • Gestion des éléments de formulaire
  • Des boutons personnalisables (très chics)
  • “helper” pour les images
  • Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

  • Groupes de boutons
  • “Labels” et badges
  • Fils d’ariane (breadcrumbs)
  • “Alerts box” : Info, succès, échec, attention
  • Barres de progression
  • “Thumbnails”

Framework Javascript

  • “Modal box” très bien faites et facile à modifier
  • Gestion des transitions
  • Système de “tabs”
  • Système de “tooltips”
  • Alert javascript amélioré
  • Autocompletion pour formulaire
  • Système de “Popover” très bien fait

Boostrap est hautement “skinable”

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (“skins”) assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

Tutoriel : Introduction à la librarie javascript d3.js

Tutoriel : Introduction à la librarie javascript d3.js

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai faite sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class “node”. Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(“p”) va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de “binder” (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(“fill”,function(d){return d.color});

enter()

Cette fonction va “binder” les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

Highcharts utilisé dans le journal Le Monde

Je suis tombé récemment sur un article du journal Le Monde qui utilisait Highcharts pour visualiser l’augmentation de l’impôt sur le revenu en fonction des parts et des revenus de chaque ménage. 

Highcharts arrive à maturité

Il est interessant de voir que le journal Le Monde se sert de cette librairie pour exposer des graphiques sur son site. Serait-ce l’âge de la maturité enfin arrivé pour cette librairie ô combien géniale ! 

Je dois dire que je vois de plus en plus de réalisation graphique faites avec Highcharts. Je pense personnellement que la visualisation de données se démocratise et que des fois un graphique vaux 1000 mots.

Voici l’article en question : Impôts : ce que vous allez vraiment payer

Conclusion 

Je vous rappelle que pour vos tests Highcharts, le site data.gouv.fr est très interessant et possède un grand nombre de dataset pertinents.

Ressources