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.

Voir le résultat du tutoriel

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

  

  Données 1 :  - 

  Données 2 :  - 

  Données 3 :  - 

  Données 4 :  - 

  Recharger le graphique
  
  
  

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

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) {
         
          document.chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Il faut manger des fruits",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Nombre: " + parseInt(this.y) ;
         }
      },
      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',
         name: 'fruits',
         data: data
      }]
   });
         
         
     }

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

function getDataFromUser(){

  var value   = [];
  var titre   = [];
  var data    = [];
 
  $("#data .value").each(function(i,e){
    value.push(parseInt($(e).attr("value")));
  });

  $("#data .titre").each(function(i,e){
    titre.push($(e).attr("value"));
  });
 
  $.each(titre, function(i,e){
    var inside  = [];
    inside.push(e);
    inside.push(value[i]);
    data.push(inside);
  })
 
  return data;
}

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

$(function() {
  var data = getDataFromUser();

  $.displayPieChart(colors, data);
 
  $("#button").click(function(){
    var data = getDataFromUser();
   
    document.chart.series[0].setData(data);
    document.chart.redraw();
   
  })
});

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.

Voir le résultat du tutoriel