Graphique à partir de coordonnées stockées dans une bdd MYSQL [Résolu]

monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 30 mai 2010 à 23:24 - Dernière réponse : Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention
- 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 =)
Afficher la suite 

30 réponses

Répondre au sujet
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 5 juin 2010 à 23:35
+3
Utile
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();

?>
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 30 mai 2010 à 23:44
0
Utile
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 =)
Commenter la réponse de monoski
TychoBrahe 1310 Messages postés samedi 31 janvier 2009Date d'inscription 5 juin 2013 Dernière intervention - 31 mai 2010 à 10:10
0
Utile
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.
Commenter la réponse de TychoBrahe
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 31 mai 2010 à 11:19
0
Utile
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.
Commenter la réponse de Shivan0910
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 01:26
0
Utile
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 !
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 02:15
0
Utile
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à :'(
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 02:45
0
Utile
Edit :

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

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

Bonne journée à tous =)
Commenter la réponse de monoski
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 1 juin 2010 à 08:04
0
Utile
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...
Commenter la réponse de Shivan0910
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 1 juin 2010 à 09:04
0
Utile
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
};
?>
Commenter la réponse de Shivan0910
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 23:19
0
Utile
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 =)
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 23:32
0
Utile
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.
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 23:40
0
Utile
Petit edit du code :

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

devient

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

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

Bonne journée à tous =)
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 1 juin 2010 à 23:59
0
Utile
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 =)
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 2 juin 2010 à 01:31
0
Utile
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 ?
Commenter la réponse de monoski
monoski 132 Messages postés mercredi 15 avril 2009Date d'inscription 13 mai 2013 Dernière intervention - 3 juin 2010 à 03:18
0
Utile
Toujours personne ?
Commenter la réponse de monoski
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 3 juin 2010 à 08:22
0
Utile
Hier je n'arrivais pas à envoyer de message !
Commenter la réponse de Shivan0910
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 3 juin 2010 à 08:25
0
Utile
Et je n'arrive toujours pas à envoyer de code...
Bizarre...
Commenter la réponse de Shivan0910
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 3 juin 2010 à 08:27
0
Utile
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 !!"
Commenter la réponse de Shivan0910
Shivan0910 149 Messages postés mardi 7 janvier 2003Date d'inscription 24 novembre 2010 Dernière intervention - 3 juin 2010 à 09:04
0
Utile
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 !!"
Commenter la réponse de Shivan0910

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

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