Générer un google chart via json

**marooh** · 15/04/2013, 14h30

Bonjour,
Je voudrais réaliser un line graph à partir des données de ma table mysql mais ça ne marche pas pour une raison inconnu,j'ai suivi tout les tutos que j'ai trouvé sur le net :
Pour mon script get_json.php voici le resultat (qui est correcte) :

Code javascript :

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

{"cols":[{"label":"Date","type":"string"},{"label":"Subscribers","type":"number"}],"rows":[{"c":[{"v":"2013-04-14"},{"v":1}]},{"c":[{"v":"2013-04-15"},{"v":1}]}]}

Et là l'affichage :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var jsonData = null;
 
        var json = $.ajax({
          url: "get_json.php", // make this url point to the data file
          dataType: 'json',
          async: false,
          success: (
        function(data) {
            jsonData = data;
        })
        }).responseText;
        
     
        
        // Create and populate the data table.
        var data = google.visualization.DataTable(jsonData);
          
      
        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('visualization')).
            draw(data, {curveType: "function",
                        width: 500, height: 400,
                        vAxis: {maxValue: 10}}
                );
      }
      
 
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 500px; height: 400px;"></div>
  </body>
</html>

Où est mon erreur ?

**amezghal** · 17/04/2013, 19h50

Salut
tu fais ca;

Code javascript :

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

var data = google.visualization.DataTable(jsonData);

alors que tu as:

Code javascript :

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

jsonData = data;

et vu que ton

Code javascript :

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

jsonData = data;

et dans le l'appel ajax.

c'est pas synchonisé

essayes ca:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
                var drawGraph = function(jsonData){
                        // Create and populate the data table.
                        var data = google.visualization.DataTable(jsonData);
         
         
                        // Create and draw the visualization.
                        new google.visualization.LineChart(document.getElementById('visualization')).
                                draw(data, {curveType: "function",
                                                        width: 500, height: 400,
                                                        vAxis: {maxValue: 10}}
                                        );
                }
        var json = $.ajax({
          url: "get_json.php", // make this url point to the data file
          dataType: 'json',
          async: false,
          success: (
        function(data) {
                        drawGraph(jsonData);
        })
        }).responseText;
 
 
                
        
      }
 
 
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 500px; height: 400px;"></div>
  </body>
</html>

**marooh** · 18/04/2013, 23h49

Salut,
en fait mon erreur est que j'ai oublié ceci :

Code :

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Maintenant ça marche

Générer un google chart via json

APIs Google

Vue hybride

Discussions similaires

Partager

Partager