PostgreSQL --> google Charts

**crixcrox** · 08/07/2014, 10h50

Bonjour chers membres,
J'ai créé un graphe en utilisant l'API de Google "Google Charts" et pour l'instant mes données sont statiques. Je voudrais pouvoir alimenter les données de mon graphe avec les données contenues dans ma BDD PostgreSQL.
Quelqu'un aurait-il déjà effectué cette manipulation ?
Voilà le code de mon graphe dans ma page HTML :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
<!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="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
 var chart, data;
 
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
 
function drawChart()
{
    // Create the data table.
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'achat');
    data.addColumn('number', 'vente');
    data.addColumn('number', 'marge');
 
    data.addRows([
      ['Tomates', 1000, 1300,300],
      ['Onions', 1560, 2000, 440],
      ['Olives', 1200, 1300, 100]
    ]);
 
    // Set chart options
    options = {
        chartType:"ComboChart",
        containerId:"visualization",
        stackSeries: true,
        //isStacked : true,
        seriesDefaults: {
 
            rendererOptions: {
                barPadding: 0,
                barMargin: 10
            },
            pointLabels: {
                show: true,
                stackedValue: true
            }
        },
        grid: {
            background: '#272424',
            drawGridlines: false
        },
        seriesType: "bars",     
        series: {
                     0: {
                          targetAxisIndex: 0
                      },
                      1: {
					      // la vente 2eme column
                          targetAxisIndex: 0,
 
                      },
                      2: {
					      //la marge 3eme column
                          targetAxisIndex: 1,
                          type: "line"
                      }
 
                },   
                hAxis:{
 
                },         
                vAxes: {
                    0: {           
                        title: "achat / vente (TTC)",                 
                        label:'achat / vente(TTC)',    
                        type:'bars'                        
                    },
                    1: {
                        title: "Marge (TTC)", 
                        label:'Marge (TTC)',
                        type:'bars'
                    },
                    2: {
                        title: "marge,",
                        label:'marge',
                        type:'bars'
                    }
 
                }
        };
 
    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    //google.visualization.events.addListener(chart, 'select', selectionHandler);
}
 
/*function selectionHandler() {
    var selectedData = chart.getSelection(), row, item;
    if(selectedData != '')
    {
        row = selectedData[0].row;
        item = data.getValue(row,3);
        alert("You selected :" + item);         
    }
}*/
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Je vous remercie d'avance