Bonjour à tous,

Avant toute chose, je tiens à préciser que cela fait très longtemps que je n'ai plus touché à de la programmation web et que des erreurs de débutants sont plus que probables dans mon propos !

J'ai récemment téléchargé la librairie Jqplot pour faire de jolis graphiques. Comme beaucoup de monde, mon but est de placer une liste déroulante sur mon site avec une liste de pays, et lorsqu'un pays est selectionné de tracer un graphique correspondant.

Les chiffres sont tous dans une base SQL et j'arrive sans soucis à l'afficher.

Voici où j'en suis

http://www.longtermproductivity.com/test.php#graph

Vous voyez que j'arrive à récuéper les coordonnées mais rien ne s'affiche!

J'arrive également sans soucis à tracer un graphique avec jqplot sans ajax, c'est à dire en récupérant la liste des corrdonnées sous forme d'un tableau php.

Ce que je n'arrive pas c'est à combiner les 2!

Voici mon code, le tableau à afficher se trouve dans les variables $year[] et $result[]

Celles-ci proviennent d'une requete sur ma bdd que je fais sur la page d'affichage.

Je pense que ce problème est très simple à résoudre mais un coup de main est vraiment le bienvenu. La meilleure solution pour moi serait de trouver un tutoriel pour réaliser ceci bien entendu.

Je vous remercie de votre aide

T.

	var line1 = [<?php $o=1; while($o!=$i+1) { echo '['.$year[$o].', '.$result[$o].', null]'; if ($o!=$i) { echo ', ';} $o=$o+1; } ?>];	
		$.jqplot('chartdiv',  [line1],  
		{
			title: '<?php echo 'GDP per Capita in '.$country; ?>',  
			highlighter: {
				show: true,
					useAxesFormatters: false,
					tooltipFormatString: '%s'
				}, 
			animate: true,
			animateReplot: true,
			cursor: {
				show: true,
				zoom: true,
				looseZoom: true,
				showTooltip: false
			},
			axes: {
				xaxis: {
              			  min:1800,
                		  max:2020,
				  tickInterval: 10
				},
				yaxis: {
				  min:0
				}
			},
			series:[{lineWidth:1, markerOptions: { size: 1, style:"x" }}]});

Le code php

<?php
$id_country = empty($_GET['q'])? 1: (int) $_GET['q'];
$qMarks = str_repeat('?,', count($id_country) - 1) . '?';
$query=$db->prepare('SELECT Gdp, year, Pop, ppp, iso, name
FROM Series
INNER JOIN Constant ON Constant.id = Series.id
INNER JOIN Countries ON Countries.id = Series.id
WHERE Series.id = :id
ORDER BY year  ASC');
$query->bindValue(':id',$id_country,PDO::PARAM_INT);
$query->execute();

$result = array();
$i= 0;
while($data = $query->fetch())
{
    if( $data['Pop'] != 0 & $data['Gdp']!=0)
    {     
	$i=$i+1;
	$country = $data['name'];
	$year[$i]=$data['year'];	
     	$result[$i]=floor(1000*$data['Gdp']/($data['ppp']*$data['Pop']));  
    }
}

Salut,

Tu peux nous dire a quoi sert cette ligne:

var line1 = [<?php $o=1; while($o!=$i+1) { echo '['.$year[$o].', '.$result[$o].', null]'; if ($o!=$i) { echo ', ';} $o=$o+1; } ?>];  

Salut,

Merci de ta réponse.

Cette ligne sert à stocker le tableau de données que je génère en php sous la forme [[x, y], [x, y] ...]

Mais tu penses que c'est inutile?

Tu ne nous donne pas assez de code. on ne sait pas comment est appele ton php comment il retourne les donnees dans le JS, un peu plus de code nous aiderait a comprendre

Ok je vais essayer d'être plus complet.

Voici la page visuel.php qui contient le design de la page et ce script JS:

function showUser(str) {
    	if (str == "") {
        	document.getElementById("txtHint").innerHTML = "";
        return;
    	} else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","get_country.php?q="+str,true);
        xmlhttp.send();
    }
}

Et voici le formulaire

<p><form method="post" action="test.php#graph" enctype="multipart/form-data">

Which country do you want to show?
<?php
$query=$db->prepare('SELECT * 
FROM Countries
ORDER BY name ASC');
$query->execute();
echo '<select name="country" onchange="showUser(this.value)">';
echo '<option value="">Select a country:</option>';
while($data = $query->fetch())
{
  echo '<option value="'.$data['id'].'">'.$data['name'].' ('.$data['iso'].') </option>';
}
echo '</select>'
?>
</form></p>
<br>
<div id="txtHint"></div>

L'autre page est donc la page get_country.php dont je veux inscrire le contenu entre les div txtHint.

Voici ensuite la page get_country.php

<body>
<?php
$id_country = empty($_GET['q'])? 1: (int) $_GET['q'];
$qMarks = str_repeat('?,', count($id_country) - 1) . '?';
$query=$db->prepare('SELECT Gdp, year, Pop, ppp, iso, name
FROM Series
INNER JOIN Constant ON Constant.id = Series.id
INNER JOIN Countries ON Countries.id = Series.id
WHERE Series.id = :id
ORDER BY year  ASC');
$query->bindValue(':id',$id_country,PDO::PARAM_INT);
$query->execute();

$result = array();
$i= 0;
while($data = $query->fetch())
{
    if( $data['Pop'] != 0 & $data['Gdp']!=0)
    {     
	$i=$i+1;
	$country = $data['name'];
	$year[$i]=$data['year'];	
     	$result[$i]=floor(1000*$data['Gdp']/($data['ppp']*$data['Pop']));  
    }
}
?> 
		</div>
	</div>
<div class="row" id="graph" name="graph">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
	<div id="chartdiv" ">
	<script language="javascript" type="text/javascript">
	var line1 = [<?php $o=1; while($o!=$i+1) { echo '['.$year[$o].', '.$result[$o].', null]'; if ($o!=$i) { echo ', ';} $o=$o+1; } ?>];	
		$.jqplot('chartdiv',  [line1],  
		{
			title: '<?php echo 'GDP per Capita in '.$country; ?>',  
			highlighter: {
				show: true,
					useAxesFormatters: false,
					tooltipFormatString: '%s'
				}, 
			animate: true,
			animateReplot: true,
			cursor: {
				show: true,
				zoom: true,
				looseZoom: true,
				showTooltip: false
			},
			axes: {
				xaxis: {
              			  min:1800,
                		  max:2020,
				  tickInterval: 10
				},
				yaxis: {
				  min:0
				}
			},
			series:[{lineWidth:1, markerOptions: { size: 1, style:"x" }}]});
</script>
</div>	
</div> 
</div>

Dis moi s'il te faut plus d'information. Un grand merci pour ton aide

T.

-
Edité par Tadzoa 24 octobre 2016 à 23:10:40