Php,Mysql,Json & highcharts

15 sept. 2010, 13:53

Bonjour,
je viens de découvrir http://www.highcharts.com/ et j'aimerai l'utiliser pour réaliser des graphes a partir de données Mysql.
d'après le support il faut passer par Json, comme vous pouvez voir sur mon post http://highslide.com/forum/viewtopic.php?f=9&t=7611 j'ai réussi a extraire les données puis les afficher
requête Mysql :

Code : Tout sélectionner

<?php
               $query =mysql_query("select
               date_format(connect_time,'%Y-%m-%d %H %i') AS date,
               Customers.name as customer,
               Sum(duration) as secondes
               from CDR_Vendors
               inner join Customers on (CDR_Vendors.i_customer = Customers.i_customer)
               where
               connect_time between '2010-09-01 00:00:00' and '2010-09-01 00:10:00'
               group by date
               ORDER BY date") or die(mysql_error());

j'aimerai obtenir le résultat suivant avec json

Code : Tout sélectionner

series: [{
                        name: 'Customer_1',
                        data: [107, 31, 635, 203, 2]
                    }, {
                        name: 'Customer_3',
                        data: [133, 156, 947, 408, 6]
                    }, {
                        name: 'Customer_3',
                        data: [973, 914, 4054, 732, 34]
                    }]

Merci d'avance.

15 sept. 2010, 17:07

Bonjour,
où en es-tu actuellement?
Un print_r/var_dump du résultat de la requête ne serait pas du luxe...

15 sept. 2010, 17:23

Bonjour,
Merci pour ta réponse,
résultat de var_dump($row)

Code : Tout sélectionner

array(3) 
{ 
["date"]=>  
string(16) "2010-09-13 00 00" 
["customer"]=>  string(10) "customer_1" 
["secondes"]=>  string(4) "3985" 
} 

array(3) 
{ 
["date"]=>  
string(16) "2010-09-13 00 01" 
["customer"]=>  string(10) "customer_2" 
["secondes"]=>  string(4) "8062" 

} 

array(3) 
{ 
["date"]=>  string(16) "2010-09-13 00 02" 
["customer"]=>  string(10) "customer_3" 
["secondes"]=>  string(4) "3346" 
} 

array(3) 
{ ["date"]=>  string(16) "2010-09-13 00 03" 
["customer"]=>  string(10) "customer_4" 
["secondes"]=>  string(4) "3763" 
} 

array(3) 
{ ["date"]=>  string(16) "2010-09-13 00 04" 
["customer"]=>  string(10) "customer_5" 
["secondes"]=>  string(4) "9127" 
}

15 sept. 2010, 17:41

Et comment va-t-on faire apparaitre par magie ces données: [107, 31, 635, 203, 2] ?
Si elles ne sont pas retournées par la requête on va pas les inventer...

15 sept. 2010, 18:51

Les données changent.
voici le résultat de la requête sql :

Code : Tout sélectionner

"date","customer","secondes"
"2010-09-01 00 00","customer_1",7350 
"2010-09-01 00 01","customer_1",4622 
"2010-09-01 00 02","customer_1",3533
"2010-09-01 00 03","customer_2",3391
"2010-09-01 00 04","customer_2",2554
"2010-09-01 00 05","customer_1",6809
"2010-09-01 00 06","customer_1",945
"2010-09-01 00 07","customer_2",3489
"2010-09-01 00 08","customer_1",1687
"2010-09-01 00 09","customer_1",4498

comme résultat final je dois avoir ca:

Code : Tout sélectionner

serie :[ {
name : 'customer_1',
data :[7350, 4622,3533, 6809,945,1687,4498]
},
{
name : 'customer_2',
data :[0,0,0, 3391,2554, 0,0,3489,0]
},
........ (selon le nombre de customers)
]

pour information : les données vont servir a réaliser un graphe avec la librairie Highcharts
Y = Secondes
X = Date

j'ai pu réaliser un graphe avec le code suivant :

Code : Tout sélectionner

    <?php
    $query =mysql_query("select
                   date_format(connect_time,'%Y-%m-%d %H %i') AS date,
                   Customers.name as customer,
                   Sum(duration) as secondes
                   from CDR_Vendors
                   inner join Customers on (CDR_Vendors.i_customer = Customers.i_customer)
                   where
                   i_vendor='32'
                   and
                   connect_time between '2010-09-01 00:00:00' and '2010-09-01 00:10:00'
                   group by date
                   ORDER BY date", $link) or die(mysql_error());
    $row = mysql_fetch_assoc($query);
    $customer[] = $row['customer'];
    $json_secondes = array();
    $json_date = array();
    do{
    $secondes[] = $row['secondes'];
    array_push($json_secondes, $row['secondes']);
    array_push($json_date, $row['date']);
    }
    while($row = mysql_fetch_assoc($query));
    //echo json_encode($json_secondes,$row);
    //echo json_encode($json_date,$row);
    //echo join($secondes, ', ');
    ?>
    <html>
       <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>Highcharts Example</title>
          
          
          <!-- 1. Add these JavaScript inclusions in the head of your page -->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
          <script type="text/javascript" src="../js/highcharts.js"></script>
          
          <!-- 1a) Optional: the exporting module -->
          <script type="text/javascript" src="../js/modules/exporting.js"></script>
          
          
          <!-- 2. Add the JavaScript to initialize the chart on document ready -->
          <script type="text/javascript">
          
             var chart;
             $(document).ready(function() {
                chart = new Highcharts.Chart({
                   chart: {
                      renderTo: 'container',
                      defaultSeriesType: 'column'
                   },
                   title: {
                      text: 'Monthly Average Rainfall'
                   },
                   subtitle: {
                      text: 'Source: WorldClimate.com'
                   },
                   xAxis: {
                      categories: <?php echo json_encode($json_date,$row);?>
                   },
                   yAxis: {
                      min: 0,
                      title: {
                         text: 'Rainfall (mm)'
                      }
                   },
                   legend: {
                      layout: 'vertical',
                      backgroundColor: '#FFFFFF',
                      align: 'center',
                      verticalAlign: 'top',
                      x: 100,
                      y: 70
                   },
                   tooltip: {
                      formatter: function() {
                         return ''+
                            this.x +': '+ this.y +' Min';
                      }
                   },
                   plotOptions: {
                      column: {
                         pointPadding: 0.2,
                         borderWidth: 0
                      }
                   },
                        series: [{
                      name: '<?php echo join($customer, ', ');?>',
                      data: [<?php echo join($secondes, ', ');?>]
                
                   }]
                });
                
                
             });
                
          </script>
          
       </head>
       <body>
          
          <!-- 3. Add the container -->
          <div id="container" style="width: 1300px; height: 500px; margin: 0 auto"></div>
          
                
       </body>
    </html>

Le problème qui se pose dans ce cas : le code récupère les données d'un seul customer

15 sept. 2010, 19:11

re,

alors voilà un exemple de comment faire, en sachant que ton souhait est illogique...
Comment à partir des données que tu as fournis, penses tu avoir ça:

{
name : 'customer_1',
data :[7350, 4622,3533, 6809,945,1687,4498]
},
{
name : 'customer_2',
data :[0,0,0, 3391,2554, 0,0,3489,0]
}

Pourquoi le résultat ne serais pas?

{
name : 'customer_1',
data :[7350, 4622,3533, 0, 0, 6809,945, 0, 1687,4498]
},
{
name : 'customer_2',
data :[0,0,0, 3391,2554, 0,0,3489,0,0]
}

En gros comment peux-tu sur le papier donner des valeurs par défaut, à tes secondes, sachant qu'en plus les dates ne sont pas du tout les mêmes?

Bon pour la base ça donne ça:

<?php

$donnees = array(
array("date"=>"2010-09-01 00 00","customer"=>"customer_1","secondes"=>7350),
array("date"=>"2010-09-01 00 01","customer"=>"customer_1","secondes"=>4622),
array("date"=>"2010-09-01 00 02","customer"=>"customer_1","secondes"=>3533),
array("date"=>"2010-09-01 00 03","customer"=>"customer_2","secondes"=>3391),
array("date"=>"2010-09-01 00 04","customer"=>"customer_2","secondes"=>2554),
array("date"=>"2010-09-01 00 05","customer"=>"customer_1","secondes"=>6809),
array("date"=>"2010-09-01 00 06","customer"=>"customer_1","secondes"=>945),
array("date"=>"2010-09-01 00 07","customer"=>"customer_2","secondes"=>3489),
array("date"=>"2010-09-01 00 08","customer"=>"customer_1","secondes"=>1687),
array("date"=>"2010-09-01 00 09","customer"=>"customer_1","secondes"=>4498)
);


foreach($donnees as $donnee){
    
    if(!isset($donnees_json[$donnee['customer']])){
        
        $donnees_json[$donnee['customer']] = array(
            'name'=>$donnee['customer'],
            'data'=>array($donnee['secondes'])
        );
    }
    else {
        $donnees_json[$donnee['customer']]['data'][]=$donnee['secondes'];
    }
}

$donnees_json_final = array();

foreach($donnees_json as $donnee_json){
    $donnees_json_final[]=$donnee_json;
}
$donnees_json_final = array('serie'=>$donnees_json_final);

print_r(json_encode($donnees_json_final));

15 sept. 2010, 20:16

Merci, je teste

20 sept. 2010, 18:51

Bonjour,
après plusieurs tentatives pas de résultat avec Json mais ca marche si on utilise 2 pages , une pour la requête et une deuxième pour la source Highcharts qui fait appel a la première (Include).

1ere page (requête) :

Code : Tout sélectionner

<?php
$n=5;
$i=0;
for ($t=$n;$t>0;$t--)
{
$i=$i+1;
$categories[$i]=date("Y-m-d", strtotime("-".$t." day"));

}
$query="select 
	date(connect_time) as date,
	sum(duration)/60 as minutes,
	Customers.name as customer
	from CDR_Vendors
	inner join Customers on (Customers.i_customer=CDR_Vendors.i_customer)
	where 
	Customers.name like 'En-%'
	and (connect_time like ''";
	for($t=1;$t<=$n;$t++){$query.=" or connect_time like '".$categories[$t]."%'";} $query.=") 
	group by 
	customer,date";

$donnee=mysql_query($query,$link) or exit(mysql_error());

$i=0;
$products[0]=a;
while ($row = mysql_fetch_assoc($donnee)) {
    $product=$row['customer'];
	$x=$row['date'];
    $data[$product][$x]=$row['minutes'];
	if($product!=$products[$i])
	
	{
	
	$i=$i+1;$products[$i]=$product;
	} 
	
	}

for ($i=1;$i<count($products);$i++)
{

for ($j=1;$j<=count($categories);$j++)
{
if(isset($data[$products[$i]][$categories[$j]]))
$valeur[$products[$i]][$categories[$j]]=$data[$products[$i]][$categories[$j]];
else $valeur[$products[$i]][$categories[$j]]=0;

}
}
?>

2eme page (Récupération des données + Code Highcharts ) :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../js/highcharts.js"></script>
		<!-- 1a) Optional: the exporting module -->
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
		<!-- ***récupération des données*** -->
		<?php include("query_queryinc.php");?>
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'bar'
					},
					title: {
						text: 'Monthly Average Rainfall'
					},
					subtitle: {
						text: 'Source: portaone'
					},
					xAxis: {
						categories: [<?php for ($j=1;$j<=count($categories);$j++){echo "'".$categories[$j]."',";}?>]
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Minutes (mm)'
						}
					},
					legend: {
						layout: 'horizontal',
						backgroundColor: '#FFFFFF',
						align: 'center',
						verticalAlign: 'bottom',
					},
					tooltip: {
						formatter: function() {
							return ''+
								this.x +': '+ this.y +' mm';
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
					<?php  echo " series: [";
					   for ($i=1; $i<count($products);$i++)
					   {
					   echo"{
						name: ' ".$products[$i]."  ',
						data: [";
						for ($j=1;$j<=count($categories);$j++) {echo $valeur[$products[$i]][$categories[$j]].",";}
						echo "]},";
						}
						echo "
						]";?>
				});
			});
	</script>
	</head>
	<body>
		<!-- 3. Add the container -->
		<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
	</body>
</html>

voila avec tout ca j'arrive a a voir un résultat, est ce possible d'optimiser le code ?
Merci

Php,Mysql,Json & highcharts

Qui est en ligne