Graphique à partir de coordonnées stockées dans une bdd MYSQL

Résolu
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
- 30 mai 2010 à 23:24
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
- 7 juin 2010 à 08:58
Alors j'ai un petit soucis de conception avec un graphique.

En gros j'ai des tas de coordonnées (X, Y) et j'aimerai les placer sur un repère orthonormé de façon automatique (je veux pas passer manuellement par excel).
En gros pour chaque point défini par les coordonnées X ey Y de la bdd j'aimerai qu'un petit carré (une image) s'affiche sur un repère orthonormé.

Est-ce qu'il y a une fonction php pour cela ?

Pouvez vous m'aiguiller, j'ai du mal à imaginer rien que la conception de la map :p



Bonne journée à tous et merci pour le temps que vous avez passé à me lire =)

30 réponses

monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
5 juin 2010 à 23:35
Bon ben ça marche merci à Shivan énormément :)

Voici la source avec les google charts :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Abscisses');
        data.addColumn('number', 'Ordonnées');
<?php 
$I=0;$I<=$num_row - 1;
include 'include/bdd.php';
$recup2 = mysql_query("SELECT posx,posy FROM elfik_user WHERE user_rank='1'") or die(mysql_error());
$num_row = mysql_num_rows($recup2);?>
data.addRows(<?php echo mysql_num_rows($recup2);?>);
<?php
 
while($fetch2 = mysql_fetch_assoc($recup2))
{
?>
data.setValue(<?php echo $I;?>, 0, <?php echo $fetch2['posx'];?>);
data.setValue(<?php echo $I;?>, 1, <?php echo $fetch2['posy'];?>);
<?php
$I++;
};
?>
       
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1300, height: 1000,
                          title: 'carte du monde',
                          hAxis: {title: 'Abscisses', minValue: -200, maxValue: 200},
                          vAxis: {title: 'Ordonnées', minValue: -200, maxValue: 200},
                          legend: 'none',
  pointSize : '3'
                         });
      }
    </script>
  </head>
  
   <SCRIPT LANGUAGE="JavaScript" SRC="script/menu.js"></SCRIPT>
    


  
</html>

Voici l'équivalent avec artichow (avec un axe des Y qui n'est pas centré par rapport à l'axe des X) :
<?php
include 'include/bdd.php';
require_once "libs/artichow/ScatterPlot.class.php";

$graph = new Graph(800, 600);
$graph->title->set('Carte du Monde');
$y = array();
$x = array();
$retour mysql_query("SELECT posx FROM elfik_user WHERE user_rank '1'")or die ('Erreur :'.mysql_error()); 
while($donnees = mysql_fetch_assoc($retour)) 
{ 
$x[] =$donnees['posx']; 
} 
$retour2 mysql_query("SELECT posy FROM elfik_user WHERE user_rank '1'")or die ('Erreur :'.mysql_error()); 
while($donnees2 = mysql_fetch_assoc($retour2)) 
{ 
$y[] =$donnees2['posy']; 
} 
 
$plot = new ScatterPlot($y, $x);
$plot->setYMax(200); 
$plot->setYMin(-200); 
$plot->xAxis->label->setInterval(50);
$plot->yAxis->label->setInterval(50);

$plot->setBackgroundColor(new Color(20, 20, 20, 20));
$plot->setPadding(NULL, NULL, 40, 20);
$graph->add($plot);
$graph->draw();

?>
1
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
30 mai 2010 à 23:44
Je ne veux pas de courbes, je veux justes que les points soient inscris sur le graphique, l'utilisation d'artichow est elle une bonne solution ?


Bonne journée à tous =)
0
TychoBrahe
Messages postés
1309
Date d'inscription
samedi 31 janvier 2009
Statut
Membre
Dernière intervention
5 juin 2013
12
31 mai 2010 à 10:10
Salut,

l'utilisation d'artichow est elle une bonne solution ?

Oui, je te le recommande particulièrement. Il est à la fois simple, puissant et très bien documenté. De nombreux exemples t'aideront à le prendre en main et à obtenir ce que tu veux.
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
31 mai 2010 à 11:19
Personnellement, j'utilise google charts, qui est pas mal du tout...

Sinon tu peux mettre une image qui représenterait ton repère et positionner dessus dynamiquement tes carrés via les fonctions image.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 01:26
Bonne idée, mais je préfère utiliser artichow ou google charts.

Quelqu'un a un petit bout de code ou un lien pour m'expliquer un petit peu le fonctionnement.

J'ai toujours codé en brut sans faire appel à des librairies, je suis autodidacte donc voilà quoi ^^. Donc j'ai vraiment aucune idée de comment utiliser ces "outils".

Merci énormément pour vos réponses !
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 02:15
Je suis parti sur du google charts et plus particulièrement sur Scattercharts.

Voici le script de base présenté par google agrémenté pour mon problème :

<?php
include 'include/bdd.php';
$recup2 = mysql_query("SELECT posx,posy FROM elfik_user WHERE user_rank='1'") or die(mysql_error()); // Ici c'est mes coordonnées X et Y
$fetch2 = mysql_fetch_assoc($recup2); // 
$num_rows = mysql_num_rows($recup2);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Abscisses');
        data.addColumn('number', 'Ordonnées');
        data.addRows(10);
        data.setValue(0, 0, 8);  // Bon ça s'est les coordonnées sous la forme nécessaire à l'affichage, moi j'ai juste des X et des Y, et j'aimerai faire le lien avec les valeurs récupérées depuis ma base de donnée. 
        data.setValue(0, 1, 12);
        data.setValue(1, 0, 4);
        data.setValue(1, 1, 5.5);
        data.setValue(2, 0, 11);
        data.setValue(2, 1, 14);
        data.setValue(3, 0, 4);
        data.setValue(3, 1, 4.5);
        data.setValue(4, 0, 3);
        data.setValue(4, 1, 3.5);
        data.setValue(5, 0, 6.5);
        data.setValue(5, 1, 7);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1300, height: 1000,
                          title: 'Age vs. Weight comparison',
                          hAxis: {title: 'Abscisses', minValue: -300, maxValue: 300},
                          vAxis: {title: 'Ordonnées', minValue: -300, maxValue: 300},
                          legend: 'none'
                         });
      }
    </script>
  </head>

  
   <SCRIPT LANGUAGE="JavaScript" SRC="script/menu.js"></SCRIPT>
    


  
</html>


Voilà donc regardez le commentaire que j'ai apposé à propos des coordonnées, ma question est comment faire pour transposer mes coordonnées mysql présente sous le format X (abscisse : correspondent à posx dans ma bdd) et Y (ordonnées : correspondent à posy) en coordonnées obligatoires pour faire fonctionner la librairie.

J'avoue que j'ai un peu de mal là :'(
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 02:45
Edit :

data.addRows(10);
en fait c'était : data.addRows(6);

Je le précise sinon ça marche pas ^^

Bonne journée à tous =)
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
1 juin 2010 à 08:04
tu veux remplacer la liste des setvalue par tes coordonnées posx et posy ?

Peut-être en faisant un
<?php
for($I=0;$I<=MaValeur;$I++)
{
?>
data.setValue(<?php echo $I;?>, <?php echo $PosX;?>, <?php echo $PosY;?>);
<?php
};
?>

ou quelque chose d'approchant.
Ne connaissant pas cette fonction, l'ordre des données est peut-être erroné. A toi d'adapter...
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
1 juin 2010 à 09:04
Après avoir lu un peu la doc, il vaudrait mieux en fait faire :

<?php
for($I=0;$I<=MaValeur;$I++)
{
?>
data.setValue(<?php echo $I;?>, 0, <?php echo $PosX;?>);
data.setValue(<?php echo $I;?>, 1, <?php echo $PosY;?>);
<?php
};
?>
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 23:19
Je test ça et je te donne mon résultat en tout cas merci de te pencher avec autant d'attention sur mon problème, c'est une qualité dont tu fais preuve qui témoigne d'une grande bonté ^^ (avoues que ça change des remerciements classiques !).

Bonne journée à tous =)
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 23:32
Voici mon code maintenant :

<?php
include 'include/bdd.php';
$recup2 = mysql_query("SELECT posx,posy FROM elfik_user WHERE user_rank='1'") or die(mysql_error());
$fetch2 = mysql_fetch_assoc($recup2); 
$num_rows = mysql_num_rows($recup2);
$posx = $fetch2['posx'];
$posy = $fetch2['posy'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Abscisses');
        data.addColumn('number', 'Ordonnées');
        data.addRows(<?php echo $num_rows ?>);
<?php 
for($I=0;$I<=100;$I++) 
{ 
?> 
data.setValue(<?php echo $I;?>, 0, <?php echo $posx;?>); 
data.setValue(<?php echo $I;?>, 1, <?php echo $posy;?>); 
<?php 
} 
?>
       
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 1300, height: 1000,
                          title: 'Age vs. Weight comparison',
                          hAxis: {title: 'Abscisses', minValue: -50, maxValue: 50},
                          vAxis: {title: 'Ordonnées', minValue: -50, maxValue: 50},
                          legend: 'none',
  pointSize : '3'
                         });
      }
    </script>



Alors dans mon esprit ça parait complètement logique sauf qu'à priori ça marche pas :'( je n'ai aucune erreur seulement il n'y a pas de résultat qui s'affiche, il y a ma page selon le style de la css mais pas de graphiques.

Quelqu'un a une petite idée ? Je m'y plonge je test et je vous dit si je trouve. Je suis pas loin là en tout cas merci énormément.
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 23:40
Petit edit du code :

for($I=0;$I<=100;$I++)

devient

for($I=0;$I<=$num_rows;$I++)

Bonne journée à tous =)
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 23:40
Cela ne fonctionne toujours pas (je précise :p)!

Bonne journée à tous =)
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
1 juin 2010 à 23:59
Hum cela vient du fait que je dois pas mettre $posx ou $posy mais mettre un $posx et un $posy qui change à chaque fois selon l'entrée dans la base il faudrait donc une deuxième boucle non ?

Bonne journée à tous =)
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
2 juin 2010 à 01:31
Hum Bon ben je sèche :'(

en fait $posx et $posy renvoi une seule valeur mais il y a plusieurs entrées qui correspondent à ma requête normalement, j'aimerai isoler ces résultats différents de façon à créer un point sur le graphique pour chaque résultat de $posx et $posy. Quelqu'un a une idée ?
0
monoski
Messages postés
132
Date d'inscription
mercredi 15 avril 2009
Statut
Membre
Dernière intervention
13 mai 2013
1
3 juin 2010 à 03:18
Toujours personne ?
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
3 juin 2010 à 08:22
Hier je n'arrivais pas à envoyer de message !
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
3 juin 2010 à 08:25
Et je n'arrive toujours pas à envoyer de code...
Bizarre...
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
3 juin 2010 à 08:27
data.addColumn('number', 'Abscisses');
data.addColumn('number', 'Ordonnées');
<?php $recup2 = mysql_query("SELECT posx,posy FROM elfik_user WHERE user_rank='1'") or die(mysql_error());?>
data.addRows(<?php echo mysql_num_rows($recup2);?>);
<?php
while($fetch2 = mysql_fetch_assoc($recup2))
{
?>
data.setValue(<?php echo $I;?>, 0, <?php echo $fetch2['posx'];?>);
data.setValue(<?php echo $I;?>, 1, <?php echo $fetch2['posy'];?>);
<?php
};
?>
&#8230;



"la vitesse de la lumière est supérieure à celle du son, c'est pourquoi un imbécile parait intelligent jusqu'a ce qu'il parle !!"
0
Shivan0910
Messages postés
149
Date d'inscription
mardi 7 janvier 2003
Statut
Membre
Dernière intervention
24 novembre 2010
2
3 juin 2010 à 09:04
Enfin...
J'ai du édulcorer le code, je ne sais pas pourquoi il ne voulait pas le poster !

J'espère que tu retrouveras facilement comment corriger ton script.

En gros, tu devrais retirer toute la partie base de données d'en haut de la page et remplacer ton "for ($I...)" par le "while".
Attention au "addrows" également.

Je crois que c'est tout ce que j'ai modifié !


"la vitesse de la lumière est supérieure à celle du son, c'est pourquoi un imbécile parait intelligent jusqu'a ce qu'il parle !!"
0