1
我使用PHP/MySQL中提取的數據在谷歌可視化上創建餅圖。使用PHP/MySQL日期查詢的表單提交到Google可視化頁面
圖表看起來不錯，但我想添加一個日曆（日期選擇器），使餅圖動態。
我的日期範圍選擇器似乎正在工作。它從我的數據庫中提取正確的數據。
SELECT DATE：
AFTER SUBMITTING QUERY：
它返回這個串：（overall_ban_pos_pie_date.php）
{"cols":[{"id":"0","label":"Column 1","type":"string"},{"id":"1","label":"Count","type":"number"}],"rows":[{"c":[{"v":"String Value 1"},{"v":6}]},{"c":[{"v":"String Value 2"},{"v":4}]}]}
該字符串是可讀谷歌可視化。如果我使用這個PHP頁面作爲我的餅圖的數據表源，它將顯示它的值。
我的問題/問題是：
我點擊「提交查詢」按鈕後，它引導我到PHP字符串頁面。我想要發生的是，當用戶選擇開始和結束日期並單擊提交查詢時，我需要根據從數據庫查詢的日期更改餅圖，而不是直接指向overall_ban_pos_pie_date.php（我用它我的餅圖使用JSON字符串作爲數據表）。我想這是我重定向到我
餅圖頁：（calendar_test.html）
有人能告訴我該怎麼做？提前致謝。
PHP代碼：（overall_ban_pos_pie_date.php）
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
die('Could not connect: ' . mysql_error());
mysql_select_db("db_campanaltest", $con);
$j=0;
$k=1;
$l=0;
$label = array("String Value 1","String Value 2");
$cols = '{"cols":[{"id":"'.$j.'","label":"Column 1","type":"string"},{"id":"'.$k.'","label":"Count","type":"number"}],';
$field1 = $_POST['startdate'];
$field2 = $_POST['enddate'];
$query = mysql_query("SELECT fk_IntCampID, COUNT(*) AS count
FROM tbl_trans2
WHERE date
BETWEEN '".$field1."'
AND '".$field2."'
AND fk_IntCampID = '1'
AND eventScored = 'Y'
AND scoreQuoteSent = 'Y'
OR date
BETWEEN '".$field1."'
AND '".$field2."'
AND fk_IntCampID = '5'
AND eventScored = 'Y'
AND scoreQuoteSent = 'Y'
GROUP BY fk_IntCampID");
while($r = mysql_fetch_assoc($query)){
$rows[] = '{"c":[{"v":'.'"'. $label[$l].'"},{"v":'. $r['count'].'}]}';
$l++;
}
$google_JSON_row =implode(",",$rows);
echo $cols . '"rows":[',$google_JSON_row ."]}";
?>
HTML頁面：顯示日曆和餅圖（希望）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart']}]}">
</script>
<script type="text/javascript">
google.setOnLoadCallback(pieChart);
function pieChart() {
var startdate = "";
var enddate = "";
if ($("#datepicker").hasClass('hasDatepicker')) {
startdate = $("#datepicker").datepicker('getDate');
}
if ($("#datepicker2").hasClass('hasDatepicker')) {
enddate = $("#datepicker2").datepicker('getDate');
}
var pieJsonData = $.ajax({
url: "overall_ban_pos_pie_date.php?startdate=" + startdate + "&enddate=" + enddate,
dataType:"json",
async: false
}).responseText;
var pieData = new google.visualization.DataTable(pieJsonData);
var pieChartWrapper = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'pie_div',
'dataTable':pieData,
'options': {
chartArea:{left:10,top:40,height:200,width:360},
width:300,
height:260,
title: "Neutral Percentage",
titleTextStyle:{fontSize:12},
tooltip:{showColorCode:true},
legend:{textStyle:{fontSize: 10},position:'left'},
pieSliceTextStyle:{fontSize: 10}
}
});
pieChartWrapper.draw();
}
</script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: "yy-mm-dd"});
});
$(document).ready(function() {
$("#datepicker2").datepicker({dateFormat: "yy-mm-dd"});
});
$("#pieChart").click(function(e) {
e.preventDefault();
pieChart();
});
</script>
</head>
<body style="font-size:62.5%;">
<form action="overall_ban_pos_pie_date.php" method="post">
Start Date: <input type="text" name="startdate" id="datepicker"/>
End Date: <input type="text" name="enddate" id="datepicker2"/>
<input type="submit" id="pieChart"/>
</form>
<div id="pie_div"></div>
</body>
</html>
哎特里斯坦，向我們展示了您與 – tusar 2012-03-20 04:54:40
喜tusar試圖代碼。我編輯了我的帖子。 – 2012-03-20 05:26:56