Voilà j'évolue avec un graphique établi grâce au scatter charts de google.
Voici le code de base que j'utilise :
Code PHP :
<!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: ['#000000'] // couleur des points
});
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript" SRC="script/menu.js"></SCRIPT>
<div id="chart_div"></div>
</body>
</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