Afficher un graphique dans un panel

**denisduval75** · 05/05/2018, 17h18

Bonjour,

Je suis super débutant en JS, et je ne parviens pas à résoudre mon problème pourtant simple !
Je souhaite utiliser l'API de Google Charts pour réaliser un graphique.
Comme tout bon novice, j'ai commencé par coller le code de Google Charts dans une nouvelle page de mon projet, ce qui fonctionne évidemment très bien :

Code html :

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.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.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',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
 
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Mon problème est que je n'arrive pas (en fait que je ne sais pas!) comment afficher ce graphique dans une page existante et dans un h:panelgroup par exemple, par un clic sur un bouton ce qui serait l'idéal.

Pouvez-vous m'aider SVP ?
MERCI

**NoSmoking** · 05/05/2018, 18h53

Bonjour,
<mode-out>

Je suis super débutant en JS, et je ne parviens pas à résoudre mon problème pourtant simple !

et tu comptes le rester combien de temps

</mode-out>

• Commence par supprimer/mettre en commentaire la ligne suivante

Code :

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

google.charts.setOnLoadCallback(drawChart);

qui crée ton graphe au chargement de la page.

• Crée un bouton qui lance la fonction drawChart() au clic

Code html :

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

<button onclick="drawChart()">...</button>

• Il te faut également lire la documentation et ne pas se contenter de copier les exemples, c'est comme pour PrimeFaces

**denisduval75** · 05/05/2018, 20h21

J'ai lu la doc Google Charts et parcouru plusieurs tuto JS avant de me lancer dans cette aventure.

J'ai déjà essayé de mettre en commentaire la ligne 'setOnLoadCallback' et ajouter un bouton avec 'onclick=drawChart()'
mais au clic sur le bouton, la page flashe et rien ne s'affiche!

Non je ne compte pas rester novice trop longtemps, mais pour cela j'aurai bien besoin d'un bon tuto JS...

Merci pour ta réponse.

**NoSmoking** · 07/05/2018, 11h24

... la page flashe et rien ne s'affiche!

**danielhagnoul** · 07/05/2018, 12h06

Vous rechargez la page ? Il y a un formulaire dans la page ?

Il nous faudrait vos codes (CSS, HTML, JS) au complet pour y comprendre quelque chose.

Exemple :

Code HTML :

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

1
2
3
<div id="curve_chart" style="width: 900px; height: 500px"></div>
 
<button id="btnAfficher">Afficher</button>

Code JavaScript :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    google.charts.load('current', {
        'packages': ['corechart']
    });
 
    // google.charts.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',
            curveType: 'function',
            legend: {
                position: 'bottom'
            }
        };
 
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
        chart.draw(data, options);
    }
 
    document.querySelector('#btnAfficher').addEventListener('click', ev => {
        drawChart();
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

Afficher un graphique dans un panel

JavaScript

Discussions similaires

Partager

Partager