utilisation de Google Chart API
Posté : 08 mai 2012, 17:28
Bonjour!
Je souhaiterais utiliser l'API de Google nommée Charts (création de grapiques statistiques interactifs) (info ici : https://google-developers.appspot.com/chart/
Seulement voila, pour créer le graphique, l'API demande les données directement dans le script JS. Or, je récupère mes données dans une BDD avec PHP. Comment envoyé les infos au script ? J'ai essayé de les passer par un argument de la fonction, seulement voila cette fonction de l'API fonctionne d'une façon que je ne connaissais pas, et n'accepte apparement pas les arguments. De plus, j'aurais besoin de dessiner un grand nombre de graphiques (une vingtaine) et la fonction semble ne pas vouloir séparer la création générale du graphique, de la personnalisation avec les données.
Je ne sais pas si je suis bien clair, voila le code "de base" de l'API :
[javascript]<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>[/javascript]
Et donc il faudrai que je puisse :
- modifier par PHP les "data.addColumn", "data.addRows", et "options"
- choisir quel graphique va où pour que chaque donnée sois bien interprétée à sa place.
Merci de votre aide!
Je souhaiterais utiliser l'API de Google nommée Charts (création de grapiques statistiques interactifs) (info ici : https://google-developers.appspot.com/chart/
Seulement voila, pour créer le graphique, l'API demande les données directement dans le script JS. Or, je récupère mes données dans une BDD avec PHP. Comment envoyé les infos au script ? J'ai essayé de les passer par un argument de la fonction, seulement voila cette fonction de l'API fonctionne d'une façon que je ne connaissais pas, et n'accepte apparement pas les arguments. De plus, j'aurais besoin de dessiner un grand nombre de graphiques (une vingtaine) et la fonction semble ne pas vouloir séparer la création générale du graphique, de la personnalisation avec les données.
Je ne sais pas si je suis bien clair, voila le code "de base" de l'API :
[javascript]<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>[/javascript]
Et donc il faudrai que je puisse :
- modifier par PHP les "data.addColumn", "data.addRows", et "options"
- choisir quel graphique va où pour que chaque donnée sois bien interprétée à sa place.
Merci de votre aide!