Création de graphique à la volé avec Google chart - Update live

**pressorus** · 04/02/2013, 19h52

Bonjour à tous !

Voilà, j’aimerais mettre à jour un graphique fait avec Google Chart sans recharger la page.

Voici le code fonctionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
 
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };
 
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
  	<input id="textbox" type="text" value = "300" />
	<input id="submit" type="button" value = "submit" onclick="drawChart()" />
 
    <div id="chart_div" style="width: 450px; height: 250px;"></div>
  </body>
</html>

Et si on remplace un des nombres du graphique par « document.getElementById('textbox').value » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      document.getElementById('textbox').value],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

Est-ce possible de faire ce genre de chose ?

Mon but est de lier le graphique à un formulaire pour mettre à jour le graphique en fonction des nouvelles entrées dans le formulaire.

Merci

**NoSmoking** · 04/02/2013, 21h44

Bonsoir,

Est-ce possible de faire ce genre de chose ?

souvent le mieux est d'essayer

Tu ne devrais avoir qu'une erreur, document.getElementById('textbox').value renvoie une chaine de caractère et non un nombre, dans ce cas il te faut passer par la méthode parseInt et écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

['2005',  1170,  parseInt(document.getElementById('textbox').value)],

Il va de soit qu'il te reste à tester si tu récupères bien un numérique.
Il existe pour cela isNaN qui renvoie true si ce n'est pas un numérique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var valeur = parseInt( document.getElementById('textbox').value );
if( isNaN( valeur)){
  valeur = 100; // valeur par défaut dans ce cas
}
// et plus loin
['2005',  1170, valeur],

par exemple.

**pressorus** · 05/02/2013, 15h17

Wow merci beaucoup !! C'est exactement ça !

Ça faisait un petit bout que j'étais sur ce problème..

Bonne journée à tous !

Création de graphique à la volé avec Google chart - Update live

APIs Google

Discussions similaires

Partager

Partager