highcharts avec php

7 juin 2013 à 18:30:01

salut

Mon problème se que le résultat s'affiche pas je ne sais pas ou est le problème voila mon code

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highstock Example</title>
        </head>
        <?php

		
				$connexion=new PDO("mysql:host=localhost;dbname=climat",'root',''); 
$Temperature=$connexion->query("SELECT  dat,tmpmoy FROM temperature WHERE station =60115001
ORDER BY dat DESC limit 30 ");
		?>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
  var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Monthly Average Temperature',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
                        categories: [<?php while($resultat=$Temperature->fetch()){ echo $resultat[0]; } ?>]
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y +'°C';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Tokyo',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }, {
                        name: 'New York',
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name: 'Berlin',
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name: 'London',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                });


            });

        </script>
        	
	<body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
	</body>
</html>

franckysolo

8 juin 2013 à 12:15:02

bonjour,

Pour débugguer :

Affiche un simple graphique sans php d'abord

Après tu ajoutes un tableau de t° via php sans boucle (cf json_encode)

attention à ce que tes valeurs soit représenter correctement avec ton echo (à vérifier dans la source au chargement de la page) ce que je veux dire c'est si ton script js attends un tableau de string ou de integer en paramètre, ici tu fais un echo $montable[i] ce qui retourne un integer je présume, si le script attend un string ça peut poser problème...

Si avec tout ça ça fonctionne teste avec ta boucle dans le js mais c'est pas très jolie comme méthode, tu aurais pu créer ton tableau au préalable le stocker dans une variable et l'assigner après en paramètre à ton js

franckysolo

Développeur freelance - Indy Musics- Mon tuto

djkhalid

9 juin 2013 à 0:04:39

ok merci bcp j'ai essayé ça

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highstock Example</title>
        </head>
        <?php

		
				$connexion=new PDO("mysql:host=localhost;dbname=climat",'root',''); 
$Temperature=$connexion->query("SELECT dat , tmpmoy FROM temperature WHERE station =60115001
ORDER BY dat DESC limit 30 ");
$data=array();
$data1=array();
 while($resultat=$Temperature->fetch()){ 
 $data[]=$resultat[0];
 $data1[]=$resultat[1];
 }
		?>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">

            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Monthly Average Temperature',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
						
                        categories: [<?php echo join($data, ',') ?>]
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y +'°C';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Tokyo',
                        data: [<?php echo join($data1, ',') ?>]
                    }, {
                        name: 'New York',
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name: 'Berlin',
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name: 'London',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                });


            });

        </script>
        	
	<body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
	</body>
</html>

bon pour ça

 xAxis: {
						
                        categories: [<?php echo join($data, ',') ?>]
                    },

mon date s'afficher pas par contre ça les valeurs marche bien

series: [{
                        name: 'Tokyo',
                        data: [<?php echo join($data1, ',') ?>]
                    }, {
                        name: 'New York',
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name: 'Berlin',
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name: 'London',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]

si vous avez une solution pour régler le problème du date et Merci

Chooselife

9 juin 2013 à 2:26:44

Bonjour

Alors juste une petite question :

data: [<?php echo join($data1, ',') ?>] <<<< ça fonctionne ça ??? je suis très septique mais si c'est le cas tu viens de résoudre en 1 ligne, 1 bon mois de prise de tête..

pour ma part j'en suis arrivé au fait d'appeler mes données en ajax (qui pour moi est le moyen le plus conventionnel pour communiquer avec le serveur en js) en utilisant json_encode() dans mon fichier php pour me retourner un tableau JSON.

series: [{
 name: "Tokyo",
}, {
 name: "New York",				
}]

Puis, tu vas générer tes données :

$.getJSON('php/list_graph.php, function(data) {
 var month0 = [];
 $.each(data, function(key, val) {
  month0.push(parseFloat(val[0]));
 });
 options.series[0].data = month0; // series[0] pour "Tokyo", series[1] pour "New York", etc..
 chart = new Highcharts.Chart(options); // réinitialisation du chart avec les nouvlles séries
});

Tu remarqueras que tu ne définis pas de data dans un premiers temps pour tes séries. On va les ajouter quand le fichier php sera exécuté et les valeurs ajoutées au tableau, soit une fois que tu auras appelé la fonction getJSON (oui j'utilise jQuery, mais tu peux très bien créer un élément xhr pour appeler ton fichier)

et dans mon fichier php :

header('Content-type: application/json');
echo json_encode($results);

ou $result est mon tableau construit avec une boucle depuis ma db (par exemple : array('0','134','200','1284');)

En espérant t'avoir aiguillé un peu, ce n'est surement pas la solution la plus optimisé mais elle me permet de construire mes graphiques depuis ma db.

-
Edité par Chooselife 9 juin 2013 à 2:33:46

Choose life..

djkhalid

9 juin 2013 à 10:24:00

ok merci je vais essayé ça