我有一张带有2张幻灯片的pieChart，我希望当我点击一张幻灯片时，我可以看到一个ComboChart。
我可以使用“URL和GET”来在其他页面中创建第二个图表，但我希望在一个页面中有两个图表（pieChart，ComboChart）。我不知道我可以在JavaScript中使用哪个函数？
<html>
<head>
<?php
//Conection to DB
session_start();
pg_connect("host=localhost port=5432 dbname=base_test user=postgres password=123456");
if (isset($_POST['uname']))
{
$uname=$_POST['uname'];
$pass=$_POST['pass'];
$q=pg_query("select name from admin where uname='$uname' and pass='$pass'");
$n=pg_num_rows($q);
if ($n>0)
{
$f=pg_fetch_row($q);
$_SESSION['admin']=$f[0];
}
else
{
echo("Invalid user!");
echo("<p><a href='ADMINISTRATION.php'>Come back to page administrateur</a></p>");
echo("<img src='thinking minde.gif' alt='thinking minde' width='400' height='400' />");
exit;
}
}
// ?
if ($_SESSION['admin']!='' && $n>0 )
{
echo("Welcome in data table : ".$_SESSION['admin']);
$q='SELECT SUM("Facteur"),"building" from "Cout" where site=\''.$f[0].'\'GROUP BY("building")';
$query=pg_query($q);
$n=pg_num_rows($query);
}
?>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
<script type="text/javascript" src="jsapi"></script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#datepicker2" ).datepicker();
});
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'building');
data.addColumn('number', 'Facteur');
data.addColumn('string', 'URL');
data.addRows([
<?php
for($i=0; $i<$n; $i++)
{
$f=pg_fetch_row($query);
echo("['".$f[1]."', ".$f[0].",'http://localhost/test_new/test5.php?name=$f[1]'],");
//echo("['".$f[1]."', ".$f[0]."],'$ville'");
}
?>
]);
// create a view to hide the URLs from the PieChart
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var chart = new google.visualization.PieChart(document.querySelector('#chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
if (sel.length > 0) {
// get the URL from the DataTable
var url = data.getValue(sel[0].row, 2);
alert(data.getValue(sel[0].row, 0));
// open URL in new tab
window.open(url, '_blank');
}
})
chart.draw(view, {
height: 300,
width: 400
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>
<!--------------------------------------------------------------------------------------------------------->
<?php
//session_start();
//print_r($_GET["name"]);
//echo $_GET["name"];
pg_connect("host=localhost port=5432 dbname=base_test user=postgres password=123456") or die('Could not connect: ' . pg_last_error());
$ville = ??????????????????????????????????;
//$ville = "Maison pour tous";
//$ville = say();
$my_array = array();
$q='SELECT "timestamp" from "Cout" where building=\''.$ville.'\' GROUP BY ("timestamp")';
$query=pg_query($q);
$n=pg_num_rows($query);
for($i=0; $i<$n; $i++){
$f=pg_fetch_row($query);
$my_array["timestamp"][]= $f[0];
}
$q='SELECT "name", "Facteur" from "Cout" where building=\''.$ville.'\'';
$query=pg_query($q);
$n=pg_num_rows($query);
for($i=0; $i<$n; $i++){
$f=pg_fetch_row($query);
$my_array[$f[0]][]= $f[1];
}
$q='SELECT "timestamp", sum("DJU") from "Cout" where building=\''.$ville.'\' GROUP BY ("timestamp")';
$query=pg_query($q);
$n=pg_num_rows($query);
for($i=0; $i<$n; $i++){
$f=pg_fetch_row($query);
$my_array["DJU"][]=$f[1];
}
$col_name = array();
$col_name = array_keys($my_array);
/*
$q='SELECT "name" from "Cout" where building=\'Maison pour tous\' GROUP BY ("name")';
$query=pg_query($q);
$n=pg_num_rows($query);
*/
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
[
<?PHP
for($i=0; $i<count($col_name); $i++){
$f=pg_fetch_row($query);
echo("'".$col_name[$i]."'");
if($i< count($col_name)-1){
echo(", ");
}
}
?>
],
<?php
for($j=0; $j<$n; $j++){
?>
[
<?php
for($i=0; $i<count($col_name); $i++){
if($i==0) echo("'".$my_array[$col_name[$i]][$j]."'");
else echo($my_array[$col_name[$i]][$j]);
if($i< count($col_name)-1){
echo(", ");
}
}
?>
]
<?php
if($j<$n-1){
echo(", ");
}
}
?>
]);
var options = {
title : 'Monthly Coffee ',
vAxis: {title: "Cout"},
hAxis: {title: "Jour"},
seriesType: "bars",
series: {<?php echo(count($col_name)-2) ?>: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<!------------------------------------------------------------------------------------------------>
</head>
<table style="width: 1335px; height: 259px;" bgcolor="" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>
<div id="chart_div" style="width: 500px; height: 300px;"></div></td></tr>
<tr><td>
<div id="chart_div1" style="width: 500px; height: 300px;"></div></td></tr>
<tr><td><br>
<p align='left'>From: <input type="text" id="datepicker" name="log1" /> To: <input type="text" id="datepicker2" name="text1" /> <input type="submit" name="submit" value="Go"></input></p></td></tr>
<tr><td><br>
<p><a href='ADMINISTRATION.php?'>Deconnexion</a></p></td></tr>
</tbody>
</table>
</html>