Afficher un graphique dans un panel

Version imprimable

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:

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

05/05/2018, 18h53
NoSmoking

Bonjour,
<mode-out>

Citation:

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 :aie:
</mode-out>

• Commence par supprimer/mettre en commentaire la ligne suivante

Code:

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:

<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 ;)
05/05/2018, 20h21
denisduval75

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.
07/05/2018, 11h24
NoSmoking

Citation:

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

:koi:

:salut:

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:

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

Code:

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
});