Page 1 sur 1

utilisation de Google Chart API

Posté : 08 mai 2012, 17:28
par arthur77
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! :)

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 18:36
par xTG
Le PHP génère du texte.
Le HTML, le CSS et le JS ne sont que du texte. ;)
Exemple concret :
<?php
$texte = 'hello world !';
?>
<script type="text/javascript">
  alert("<?php echo $texte; ?>");
</script>

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 18:51
par arthur77
Euh oui ça je le sais mais.. En quoi ça change mon problème ?

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 19:23
par xTG
Bah si tu sais cela...
Quel est ton problème ? :|
Ce n'est certainement pas de générer des lignes de JS à partir de PHP.

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 19:37
par arthur77
Je voudrais remplacer tous les élements d'options et de données de la fonction par des variables provenant de php.

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 20:48
par xTG
Eeeeetttt ????? :mrgreen:
Non sérieusement... Je comprend pas ce que tu ne comprends pas...
Je fais quoi avec mon exemple ? C'est pas exactement ce que tu veux ?

Si tu ne comprends pas, dis le nous et on tente un autre exemple.

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 20:59
par arthur77
Mouais apparement y'a un problème de communication entre nous deux :P

Je récupère des informations de ma BDD MySQL avec PHP, puis je les classe sous forme de différents tableaux pour chaque thème.
Ensuite, il faut que je représente chaque thème d'informations par un graphique, grâce à l'api google.
Sauf que dans les exemples de code que google fourni, leurs données sont inscrites en clair dans le script JS. Or moi mes données sont enregistrées dans des variables PHP, que je dois "donner" à l'API pour qu'elle me dessine des graphiques.
C'est mieux ? :S

Re: utilisation de Google Chart API

Posté : 08 mai 2012, 22:21
par xTG
Donc ton problème c'est bien d'afficher une variable PHP dans du code JS !
Un autre exemple sur le même thème que le précédent, j'espère qu'il te ferra mieux tilter :
<?php
$fn0 = 0;
$fn1 = 1;
?>
<script type="text/javascript">
function fibonnacci(n){
  if( n == 0 )
    return <?php echo $fn0; ?>;
  if( n == 1 )
    return <?php echo $fn1; ?>;
  return fibonnacci(n-1) + fibonnacci(n-2);
}
</script>
Faut bien comprendre que le code PHP s'exécute avant que le client ne réceptionne la page web.
Donc le client ne réceptionne que du texte qu'il va ensuite interpréter (HTML, CSS, JS).
Tout code PHP sera remplacé par sa valeur.
Le code que j'ai donc rédigé est une version variable (bien qu'on va pas modifier les suites de ce cher monsieur...) du code suivant :

Code : Tout sélectionner

<script type="text/javascript"> function fibonnacci(n){ if( n == 0 ) return 0; if( n == 1 ) return 1; return fibonnacci(n-1) + fibonnacci(n-2); } </script>
C'est d'ailleurs ce dernier code que reçoit le navigateur.

Re: utilisation de Google Chart API

Posté : 09 mai 2012, 13:34
par arthur77
Aaaaah on peut mettre du PHP direct dans le JS a l'intérieur de <?php .. ?> ?! Je ne savais pas, et donc effectivement ça simplifie tout! Je vais essayer avec ça, merci déjà :)

Re: utilisation de Google Chart API

Posté : 09 mai 2012, 14:38
par xTG
Bah oui, comme je te l'ai dit, le JS ce n'est que du texte sans aucune valeur côté serveur.
Ce n'est que côté client qu'il est exécuté.
Donc on peut afficher en PHP des morceaux de JS, ou bien des scripts entier.

Re: utilisation de Google Chart API

Posté : 09 mai 2012, 15:46
par arthur77
Ok merci.
J'ai un autre problème : le script JS est placé dans les balises <head>, sauf que je recupere les infos en BDD donc dans le <body>.. Est-ce que je peux déplacer l'intégralité de la fonction JS "telle quelle" dans le <body>, après la requette BDD ?

Re: utilisation de Google Chart API

Posté : 09 mai 2012, 15:51
par xTG
Et qu'est ce qui t'empêche de bouger ton code PHP ?
Pour lui ta balise body ne veut strictement rien dire. :mrgreen:

Re: utilisation de Google Chart API

Posté : 15 mai 2012, 21:58
par smoky184
J'ai compris le problème de arthur.
il souhaiterait afficher une liste ou tableau de données tirées de sa base sql en javascript afin de ne pas avoir à changer le code a chaque entrée dans la bdd.
genre un array mais le format demandé par l'api si je ne m'abuse est :

[ 'label1', donnée1 ],
[ 'label2', donnée2 ],
[ 'label3', donnée3 ]...

la réponse que tu cherches se trouvera surement dans le langage "Json" malheureusement je ne pourrais pas t'aider plus que ça car c'est un langage (apparemment facile) que je ne maitrise pas

cordialement,

Nicolas

Re: utilisation de Google Chart API

Posté : 28 mai 2012, 11:09
par arthur77
Rebonjour après ce long moment,

merci Nicolas, mais le PHP suffit pour l'instant ^^

Merci xTG, je ne voyais pas ça comme ça ^^
J'ai bien avancé, cependant j'ai un problème pour filtrer les données lors de la requette sql : je fait 5 requette chacune suivie de leur script API pour dessiner, mais mes requettes ne me renvoient pas ce que je souhaite, j'ai beau lire la doc je ne comprends pas..
J'utilise le critère "SUBDATE (.. INTERVAL ..)" de SQL, voici les 5 requettes, qui me renvoient à chaque fois sois toutes les lignes, soit aucune (alors que certaines devraient être renvoyées).
<?php
$sql = 'SELECT * FROM notes WHERE id_artiste='.$_SESSION['id'];
$sql = 'SELECT * FROM notes WHERE id_artiste='.$_SESSION['id'].' AND date  < SUBDATE(NOW(), INTERVAL 1 DAY)';
$sql = 'SELECT * FROM notes WHERE id_artiste='.$_SESSION['id'].' AND date  < SUBDATE(NOW(), INTERVAL 7 DAY)';
$sql = 'SELECT * FROM notes WHERE id_artiste='.$_SESSION['id'].' AND date  < SUBDATE(NOW(), INTERVAL 1 MONTH)';
$sql = 'SELECT * FROM notes WHERE id_artiste='.$_SESSION['id'].' AND date  < SUBDATE(NOW(), INTERVAL 1 YEAR)';
Vous l'aurez compris, j'ai besoin de récupérer toutes les entrées, puis celles datant de maximum 1 jour, celles datant de max 1 semaine, celles datant de max 1 mois et celles datant de max 1 an.

Merci