Nuage de point de différentes couleurs avec Google charts (scatter) [Résolu]

Question

Posez votre question Signaler

Nuage de point de différentes couleurs avec Google charts (scatter) [Résolu]

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

- 11 juin 2010 à 12:32 - Dernière réponse : PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

- 12 juin 2010 à 15:31

Javascript / DHTML Posez votre question Signaler

Voilà j'évolue avec un graphique établi grâce au scatter charts de google.

Voici le code de base que j'utilise :

<!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 

include 'include/bdd.php';
$recup2 = mysql_query("SELECT posx,posy FROM elfik_user WHERE race='demon'") or die(mysql_error());
$num_row = mysql_num_rows($recup2);
$recup3 = mysql_query("SELECT posx,posy FROM elfik_user WHERE race='ange'") or die(mysql_error());
$num_row2 = mysql_num_rows($recup3);
$num = $num_row + $num_row2;
$I=0;$I<=$num - 1;?>
data.addRows(<?php echo $num;?>);

<?php	 
while($fetch2 = mysql_fetch_assoc($recup2))
{
?>
data.setValue(<?php echo $I;?>, 0, <?php echo $fetch2['posx'];?>);//première série de coordonnées
data.setValue(<?php echo $I;?>, 1, <?php echo $fetch2['posy'];?>);
<?php
$I++;
};
?>
data.addRows(<?php echo $num;?>);

<?php	 
while($fetch3 = mysql_fetch_assoc($recup3))
{
?>
data.setValue(<?php echo $I;?>, 0, <?php echo $fetch3['posx'];?>);//deuxième série de coordonnées
data.setValue(<?php echo $I;?>, 1, <?php echo $fetch3['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',
  colors: ['blue','#000000'] // couleur des points


                         });
      }

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


  
</html>

Et j'aimerai beaucoup que la seconde série de coordonnées (cf commentaires dans le code) fasse apparaître des points bleus sur le graphique alors que la première partie de coordonnées fasse apparaitre des points noir.

J'ai tenté de différentes manière d'obtenir ce résultat mais ce fut un échec dans les deux cas.

Si quelqu'un connait un peu le fonctionnement de google scatter charts je suis preneur :p

Afficher la suite

A voir également:

Google charts css
Google charts - Meilleures réponses
Google charts scatter - Meilleures réponses
Charte d'utilisation de Codes Sources - Articles
Charte d'utilisation de Codes-Sources -- Gestion de communauté - Articles
Charte d'utilisation de CodeS-sourceS-- Respect d'autrui - Articles
Charte de CommentCaMarche.net - Conseils d'écriture - Articles
Première approche de google-sketchup - Conseils pratiques - Graphisme

Votre réponse

Répondre au sujet

10 réponses

Signaler Commenter la réponse de PetoleTeam

PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

10 11 juin 2010 à 19:11

0

Merci

Bonjour,
je ne te serai pas d'un grand secours, mais j'ai retrouvé ce lien que je me suis toujours juré d'aller inspecter...

;O)

Signaler Commenter la réponse de monoski

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

11 juin 2010 à 19:35

0

Merci

Merci de ton aide,
Je connais déjà cet élément des tutoriaux google, le problème c'est qu'il n'y a pas d'établissement de dataSet.value, ça passe par une formule mathématique dans le dataaddrow :

for (var i = 0; i < 500; ++i) {
data.addRow([Math.sin(i / 5) * 0.25, Math.cos(i / 25), null])
}
for (var i = 0; i < 500; i++) {
data.addRow([Math.sin(i / 25), null, Math.cos(i / 10) * 0.5]);
}

Moi je désire passer par le dataset value, ou alors si tu peux m'aider à intégrer mes données dans le data.addRow je suis tout ouïe !

Signaler Commenter la réponse de monoski

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

12 juin 2010 à 02:01

0

Merci

Snif :'(

Signaler Commenter la réponse de monoski

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

12 juin 2010 à 02:33

0

Merci

Tant pis pas grave je suis passé à autre chose ^^

Bonne journée !

Signaler Commenter la réponse de PetoleTeam

PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

10 12 juin 2010 à 10:27

0

Merci

Bonjour,
j'ai regardé rapidement et il semble que je ne comprenne pas bien le principe d'initialisation, il semblerait que ce soit ta façon d'initialiser qui coince...
si tu avais la version javascript de tes setValeur je pourrais peut être voir car je suis arrivé à saisir la méthode addRow, enfin il me semble !!!!!

;O)

PS : je suis abonner à semble, il semblerait!

Signaler Commenter la réponse de PetoleTeam

PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

10 12 juin 2010 à 14:54

0

Merci

Re...
ma balade matinale a visiblement été profitable et il en ressort que la méthode setValue n'est visiblement pas adaptée si les séries ont une valeur en X significative, tracé de courbe par exemple, dans ce cas il est préférable de passer par la méthode addRow.
Je te mets ci dessous le bout de code qui m'a permis toutes ces déductions, et qui du coup te permet d'affecter une couleur aux données sachant que la première, colonne, correspond à l'index des data...

google.load('visualization', '1', {packages: ['corechart']});
//------------------
function drawChart(){
  var data = new google.visualization.DataTable();
  //-- Creation des colonnes avec une pour l'axe X
  data.addColumn('number', 'Index en X');
  data.addColumn('number', 'Serie #1');
  data.addColumn('number', 'Serie #2');

  //-- des donnees pour test
  var T_Serie1 = [[8,12],[4,6],[11,14],[4,5],[3,5],[6,18]];
  var T_Serie2 = [[10,11],[11,12],[12,13],[13,14],[14,15],[15,16],[16,17]];

  //---------------------------------------
  // setValue(rowIndex, colIndex, value)
  // rowIndex = index de la valeur
  // colIndex = valeur en X depend de la serie
  // value    = valeur en Y
  //---------------------------------------
  //-- Serie #1
  var NbRows = T_Serie1.length;
  var Col = 1;
  //-- Creation de la ligne de data
  data.addRows( NbRows);
  //-- Creation des data
  for( var iRow = 0; iRow < NbRows; iRow++){
    data.setValue( iRow,   0, T_Serie1[iRow][0]);
    data.setValue( iRow, Col, T_Serie1[iRow][1]);
  }
  //-- Serie #2
  NbRows = T_Serie2.length;
  var Col = 2;
  //-- Creation de la ligne de data
  data.addRows( NbRows);
  //-- Creation des data
  for( var iRow = 0; iRow < NbRows; iRow++){
    //-- ecrase valeurs precedantes !!!!!!!!!!!!!
    data.setValue( iRow,   0, T_Serie2[iRow][0]);
    data.setValue( iRow, Col, T_Serie2[iRow][1]);
  }

  var chart = new google.visualization.ScatterChart(
  document.getElementById('chart_div'));
  chart.draw(data, {
    colors : ['#008000','#000080'],
    hAxis: {title: 'Abscisses', minValue: -0, maxValue:20},
    vAxis: {title: 'Ordonnees', minValue: -0, maxValue:20}
  });
}
google.setOnLoadCallback(drawChart);

Le seul BEMOL, c'est que je suis sur de rien, pas encore été voir leur doc en anglais...
;O)

Signaler Commenter la réponse de PetoleTeam

PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

10 12 juin 2010 à 15:04

0

Merci

Me..e, j'ai pas mis la méthode addRow

//-----------------//
// methode addRows //
//-----------------//
  var NbRows = T_Serie1.length;
  for( var iRow = 0; iRow < NbRows; ++iRow) {
   data.addRow([T_Serie1[iRow][0], T_Serie1[iRow][1], null])
  }
  
  NbRows = T_Serie2.length;
  for( var iRow = 0; iRow < NbRows; ++iRow) {
   data.addRow([T_Serie2[iRow][0], null, T_Serie2[iRow][1]])
  }

essaies les deux est tu verras que le graphique n'a rien à voir, mais le soucis COULEUR n'est plus...
;O)

Signaler Commenter la réponse de monoski

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

12 juin 2010 à 15:13

0

Merci

En tout cas merci pour ton aide, très sympas de t'être plongé sur mon problème :)

Signaler Commenter la réponse de PetoleTeam

PetoleTeam

Messages postés: 3435
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

10 12 juin 2010 à 15:31

0

Merci

OK, donc c'est bien la méthode addRows la mieux adaptée à ton problème...

PS : penses a mettre ta réponse en réponse acceptée elle pourrait aider d'autres personnes.
;O)

Votre réponse

Répondre au sujet

Posez votre question

monoski · Accepted Answer · 2010-06-12T15:13:11+0200

Meilleure réponse

Signaler Commenter la réponse de monoski

monoski

Messages postés: 132
Date d'inscription: mercredi 15 avril 2009
Statut: Membre
Dernière intervention: 13 mai 2013

12 juin 2010 à 15:13

3

Merci

Hier soir la main de Dieu a recollé les jointure de mon cervaux (oui j'ai pas de neurones) :

<?php
while($fetch2 = mysql_fetch_assoc($recup2))
{
?>
data.addRow([<?php echo $fetch2['posx'];?>, <?php echo $fetch2['posy'];?>, null]);

<?php

};

?>
<?php
while($fetch3 = mysql_fetch_assoc($recup3))
{
?>
data.addRow([<?php echo $fetch3['posx'];?>, null, <?php echo $fetch3['posy'];?>]);

<?php

};

?>

Basta :p

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 144 internautes nous ont dit merci ce mois-ci

Nuage de point de différentes couleurs avec Google charts (scatter) [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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