我必须根据下拉值显示谷歌图表,其中包含商店ID
我正在从 mysql中检索数据,没有值的问题,我正在根据ajax的商店ID检索数据,只是在输入框中确认它也没关系.
我正在从 mysql中检索数据,没有值的问题,我正在根据ajax的商店ID检索数据,只是在输入框中确认它也没关系.
但我不知道如何使用这些值更新该图表,而无需重新加载页面.
这是我的谷歌图表代码与硬编码值.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>newChart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization","1",{packages:["corechart"]});
google.setonLoadCallback(drawChart);
function drawChart()
{var data = google.visualization.arrayToDataTable([['Company & Model','Views'],['Samsung Hero Music E1232B',5],['Samsung galaxy Y S5360',7],['Samsung galaxy Ace S5830',['Karbonn K 1212',2],]);
var options = {
title: 'Most Popular Item ',hAxis: {title: 'Brand',titleTextStyle: {color: 'red'}}};
var chart = new google.visualization.ColumnChart(document.getElementById('MPI_chart_div'));
chart.draw(data,options);
}
</script>
</head>
<body>
<h3>COLUMN CHART FOR MOST POPULAR ITEM </h3>
Select Shop <select id="MPI_selected_shop" onchange="MPI_set_shop(this.value);">
<option value="all_Shops">All Shops</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" id="sd" />
<div id="MPI_chart_div" style="width: 800px; height: 400px;"></div>
</body>
</html>
var xmlHttp
function MPI_set_shop(str)
{
alert(str);
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="chart.PHP";
url=url+"?q="+str;
alert(url);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("sd").value=xmlHttp.responseText;
$st=xmlHttp.responseText;
alert($st);
}
}
这是我的chart.PHP,我从中使用ajax从MysqL获取格式化数据
<?PHP $testid=0; $testid=$_REQUEST["q"]; //echo $testid; $con = MysqL_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . MysqL_error()); } // Select Database MysqL_select_db("MysqL",$con) or die('Could not connect: ' . MysqL_error());; $qMostPopularItem = "SELECT t.pr_id,p.pdt_company_name,p.pdt_model_name,SUM(t.count) AS count FROM tmp AS t INNER JOIN product_mapping AS p ON t.pr_id = p.pr_id AND t.shop_id =$testid GROUP BY pr_id ORDER BY t.count DESC;"; $mpi = MysqL_query($qMostPopularItem,$con) or die('Could not fetch MPI: ' . MysqL_error()); while($infoMPISW = MysqL_fetch_assoc($mpi)) { echo "['".$infoMPISW['pdt_company_name']." "; echo $infoMPISW['pdt_model_name'] ."',"; echo $infoMPISW['count'],"],"; } ?>
解决方法
在Ajax响应上再次使用新值调用drawChart()函数.以下是我尝试过的代码.
索引文件
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization",{packages:["corechart"]});
google.setonLoadCallback(drawChart);
function drawChart()
{
alert('called');
var data = google.visualization.arrayToDataTable([['Company & Model',options);
}
function drawChart2()
{
alert('called2');
var data = google.visualization.arrayToDataTable([['Company & Model',['Samsung Music E1232B',['Samsung S5360',['Samsung S5830',options);
}
</script>
<script>
var xmlHttp
function MPI_set_shop(str)
{
alert(str);
if (window.XMLHttpRequest)
{// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
//google.load("visualization",str,{packages:["corechart"]});
//google.setonLoadCallback(drawChart);
drawChart2(); // Note down here..
}
}
xmlhttp.open("GET","chart.PHP?q="+str,true);
xmlhttp.send();
}
</script>
<h3>COLUMN CHART FOR MOST POPULAR ITEM </h3>
Select Shop <select id="MPI_selected_shop" onchange="MPI_set_shop(this.value);">
<option value="all_Shops">All Shops</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" id="sd" />
<div id="MPI_chart_div" style="width: 800px; height: 400px;"></div>
请注意,我创建了另一个名为drawChart2()的函数,但是如果你调用drawChart(),那么它也会给你带有“被调用”的警报.您只需要传递新值即可.希望以上答案对您有所帮助.最重要的是,除了回调函数之外我什么都没做. [虽然我更改了javascript ajax代码但不会出现任何问题.]
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
