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



Undisconnected - Tutoriel sur comment recharger un graphique Highcharts.js avec de nouvelle données 










Données 1 : -
Données 2 : -
Données 3 : -
Données 4 : -

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.

5 Commentaires

Bouillé

A propos9 ans ago

Bonjour Bravo pour le tuto qui est top. J'essaye vainement sur un graphe highcharts (type pie) d'adapter un script pour que les données remontant d'une base soient filtrées en fonction d'un menu déroulant. Je n'arrive pas avoir des étiquettes qui reprennent le bon % et le nom de la catégorie. Pouvez vous me donner un coup de main Merci Olivier

Répondre

Imatt

A propos9 ans ago

Bonjour Merci pour les bons mots. Je te conseillerais de vérifier ce que tu as comme valeur dans la fonction tooltips. Tu peux utiliser console.log(this). Tu devrais voir les attributs de l'objet "this" dans la console. Pour le nom de la catégorie (this.key) devrait fonctionner. Pour ton pourcentage, il est correct mais juste mal formaté. Tu peux utiliser : this.percentage.toFixed(2); J'ai modifié mon example pour afficher le pourcentage dans le tooltip si tu veux voir ! Bonne journée et bon courage !

Répondre

Bouillé

A propos9 ans ago

Cool grâce à toi, j'ai maintenant des pourcentages à 2 chiffres. Pour le nom de la catégorie, je cale et sèche comme une m... Si tu peux jeter un coup d'oeil, ca serait top. Merci La fonction : $(function () { //on page load getAjaxData(1); //on changing select option $('#dynamic_data').change(function(){ var val = $('#dynamic_data').val(); getAjaxData(val); }); function getAjaxData(id){ //use getJSON to get the dynamic data via AJAX call $.getJSON('data.php', {id: id}, function(chartData) { $('#container').highcharts({ chart: { type: 'pie' }, title: { text: 'Suivi des consommations par adherent' }, tooltip: { formatter: function() { return ''+ this.point.name +': '+ this.percentage.toFixed(2) +' %'; } }, plotOptions: { //this need only for pie chart pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', formatter: function() { return ''+ this.point.name +': '+ this.percentage.toFixed(2) +' %'; } } } }, series: chartData }); }); } }); La partie PHP : //select database mysql_select_db("hagroupejioli", $con); $id = $_GET['id']; $arr = array(); $arr1 = array(); $result = array(); $sql = "select categorie, `2014` from higcharts_data where adherent_id = '$id'"; $q = mysql_query($sql); $j = 0; while($row = mysql_fetch_array($q)){ $arr['data'][] = $row['categorie']; $arr1['data'][] = $row['2014']; } array_push($result,$arr1); print json_encode($result, JSON_NUMERIC_CHECK); mysql_close($con);

Répondre

Frederic

A propos8 ans ago

Bonjour ! Merci pour ce tuto. Je cherche à réaliser une fonction similaire mais avec la fonction Draggable de Highcharts. L'utilisateur mettrait à jour les données directement sur le graphique et à l'aide de la fonction exporting, on pourrait mettre à jour une base de données SQL qui elle même servirait à générer le graphique pour la prochaine utilisation. En cumulant les 2 fonctions, j'arrive à exporter les données mises à jour en CSV ou XLS mais je ne sais pas comment les récupérer dans des variables pour les réinjecter dans ma base SQL. ((je ne connais pas vraiment le JS...). Auriez vous une idée de comment faire ? Merci bcp ! Frédéric

Répondre

Imatt

A propos8 ans ago

Salut Frederic, sur la fonction draggable, tu peux récupérer les valeurs avec this.y ou this.x. Ensuite, il te faudra utiliser Ajax pour passer tes valeurs au serveur et insérer en base de données. Dis-moi si tu as besoin de quelque chose de plus concret !

Répondre

Laisser un commentaire

Leave a Reply to Imatt or Annuler la réponse

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