afficher plusieur googlecharts dans une meme page HTML

Petit nouveau ! | 6 Messages

11 avr. 2014, 15:19

Bonjour a tous;
je suis nouvelle dans le javascript j'ai eu pour tache d'afficher des histogramme dans une page en html en utilisant le google charts ça a marcher pour un seul des graphe mais pas deux( parexemple j'affiche juste le graphe du lundi et ceux des autres jours pas). je crois que le souci se pose lors de l'appel du div en javascript car on ne peut pas afficher plusieur div avc un seul ID mais la solution je ne l'ai pas.
voici le code :
la page jour.php :

[javascript]<script type="text/javascript">

//Charger
google.load("visualization", "1", {packages:["corechart"]});
//Set rappel lorsque les actifs ont chargé
google.setOnLoadCallback(drawChart);
function drawChart() { // dessin du graph de la journée
<?php include( "compteur.php");

$finint=new DateTime($jour);
$finint->modify('+30 minute');
$debutint=new DateTime($jour);
$debutint->modify('+30 minute');
$debutint->modify('+7 hours');
$finint->modify('+9 hours');


$s='["7h30-9h30",' . opinionOuiDate($debutint->format("Y-m-d H:i:s"),$finint->format("Y-m-d H:i:s")) .','.opinionNonDate($debutint->format("Y-m-d H:i:s"),$finint->format("Y-m-d H:i:s")).']';
$int=array("9h30-11h30","11h30-13h30","13h30-15h30","15h30-17h30","17h30-19h30","19h30-21h30","21h30-23h30");


for($i=0;$i<7;$i++){
$debutint->modify('+2 hours');
$finint->modify('+2 hours');
$s=$s.',["'.$int[$i].'",'.opinionOuiDate($debutint->format("Y-m-d H:i:s"),$finint->format("Y-m-d H:i:s")).','.opinionNonDate($debutint->format("Y-m-d H:i:s"),$finint->format("Y-m-d H:i:s")).']';
}

?>
var data = new google.visualization.DataTable();
data.addColumn('string','Date');
data.addColumn('number','Oui');
data.addColumn('number','Non');


data.addRows([ <?php echo $s; ?>]);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },

{ type : 'string',
role: 'style',
calc: function () {return 'stroke-color: #1abb1a; stroke-width: 2; fill-color: #1abb1a; fill-opacity:0.4';} },


2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },

{ type : 'string',
role: 'style',
calc: function () {return 'stroke-color: #ff0000; stroke-width: 2; fill-color: #ff0000; fill-opacity:0.6';} }



]);

var options = {
title: "<?php echo $question . ' (' . $debutint->format("d/m/Y") . ')'; ?>",
titleTextStyle: {color: '#375882', fontName:'Trebuchet MS', fontSize:16},
isStacked: false,
vAxis: {minValue: 0},

annotations: {
textStyle: {
fontName: 'calibri',
fontSize: 16,
bold: true,
italic: false,
series: {0: {color: '#1abb1a'}, 1: {color:'#ff0000'} } } },



bar:{groupWidth:'30%'},
hAxis: {slantedText:true,viewWindowMode:'pretty', titleTextStyle:{color: '#375882', fontName:'Trebuchet MS',fontSize:12}, textStyle: {color: '#375882', fontName:'Trebuchet MS',fontSize:12}},
legend:{position: 'top', textStyle: {color: '#375882', fontSize: 12,fontName:'Trebuchet MS'}},
series: {0:{color: '#1abb1a'}, 1:{color: '#ff0000'}},
vAxis:{textStyle: {color: '#375882', fontName:'Trebuchet MS',fontSize:12}},
tooltip:{textStyle: {color: '#848484',fontName:'Trebuchet MS'}, showColorCode: true,fontSize: 12}
};

var columnBar = new google.visualization.ColumnChart(document.getElementById(<?php echo '"'."jour".$jour.'"';?>));
columnBar.draw(view, options); //dessin de columnbar
}
</script>

<div id="jourcolumnBar_div" style="width: 610px; height: 400px;">
<div id=<?php echo '"'."jour".$jour.'"';?> style="width: 610px; height: 400px;">

</div>
</div>[/javascript]

le code PHP:
if (!empty($_POST['jourchoisi'])) // cas où on a rentré une date pour le ZOOM sur une journée dans la rubrique 2
{
   

	$jour = new DateTime();
        $jour = $jour->createFromFormat("d/m/Y H:i:s",$_POST['jourchoisi'] . "00:00:00");
        $jour = $jour->format('Y-m-d H:i:s');
        $question = $_POST["titre"];
        include ("jour.php");
       include( "jourtotal.php" );

////////// CETTE PARTIE NE MARCHE PAS 
$jour = new DateTime();
        $jour = $jour->createFromFormat("d/m/Y H:i:s",$_POST['jou'] . "00:00:00");
        $jour = $jour->format('Y-m-d H:i:s');
       $jour->modify('+ 1day');
        $question = $_POST["titre"];
        include ("jour.php");
       include( "jourtotal.php" );
	

}