使用Ajax和PHP的下拉动态更新谷歌图 [英] update google chart dynamically on dropdown using ajax and php
本文介绍了使用Ajax和PHP的下拉动态更新谷歌图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要根据下拉值，其中包含店铺ID显示谷歌图 我检索从MySQL中的数据，没有问题的价值观，我根据店铺ID从阿贾克斯检索数据，只是确认它在输入框中，还不错。
但我不知道如何更新图表使用这些值，而不用重新加载页面。 这里是我的谷歌图code硬codeD值。
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= ISO-8859-1/＆GT;
＆LT;冠军＆GT; newChart＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
google.load（可视化，1，{包：corechart]}）;
google.setOnLoadCallback（drawChart）;
功能drawChart（）
{VAR数据= google.visualization.arrayToDataTable（['公司+功放，型号'，'意见']，['三星英雄音乐E1232B'，5]，['三星GalaxyŸS5360'，7]，['三星Galaxy王牌S5830'，7]，['Karbonnķ1212'，2]，]）;
VAR的选择= {
标题：最受欢迎产品，
hAxis：{标题：品牌，titleTextStyle：{颜色：红色}}};
VAR图=新google.visualization.ColumnChart（的document.getElementById（'MPI_chart_div'））;
chart.draw（数据选项）;
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; H3＆GT;柱形图最流行的项目＆lt; / H3＆GT;
选择店铺＆LT;选择一个id =MPI_selected_shop的onchange =MPI_set_shop（THIS.VALUE）;＆GT;
＆LT;期权价值=all_Shops＆GT;所有商店和LT; /选项＆GT;
＆LT;期权价值=1＆GT; 1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT;期权价值=3＆GT;第3版; /选项＆GT;
＆LT;期权价值=4＆GT; 4℃/选项＆GT;
＆LT; /选择＆GT;
＆LT;输入类型=文本ID =SD/＆GT;
＆LT; DIV ID =MPI_chart_div的风格=宽度：800px;高度：400像素;＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这是我的ajax code的范围内script标签
在同一页 VAR XMLHTTP
功能MPI_set_shop（STR）
{
警报（STR）;
XMLHTTP = GetXmlHttpObject（）;
如果（XMLHTTP == NULL）
{
警报（您的浏览器不支持AJAX！）;
返回;
}
VAR URL =chart.php;
URL = URL +Q =？+ STR;
警报（URL）;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open（GET，URL，真正的）;
xmlHttp.send（空）;
}
功能stateChanged（）
{
如果（xmlHttp.readyState == 4）
{
。的document.getElementById（SD）值= xmlHttp.responseText;
$ ST = xmlHttp.responseText;
警报（$ ST）;
}
}
下面是我从那里来的mysql用ajax获取格式化的数据我chart.php
＆LT; PHP
$ testid = 0;
$ testid = $ _ REQUEST [Q];
//回声$ testid;
$ CON =的mysql_connect（localhost的根，）;
如果（！$ CON）
{
死亡（无法连接：mysql_error（））;
}
//选择数据库
mysql_select_db（MySQL的，$ CON）或死亡（无法连接：。mysql_error（））;;
$ qMostPopularItem =SELECT t.pr_id，p.pdt_company_name，p.pdt_model_name，SUM（t.count）AS数从tmp目录为T INNER JOIN product_mapping为P ON t.pr_id = p.pr_id和t.shop_id = $ testid集团BY pr_id ORDER BY t.count DESC;;
$ MPI =请求mysql_query（$ qMostPopularItem，$ CON）或死亡（无法提取MPI：mysql_error（））;
而（$ infoMPISW = mysql_fetch_assoc（$ MPI））
{
回声['$ infoMPISW [。'pdt_company_name']。
回声$ infoMPISW ['pdt_model_name']'，。
回声$ infoMPISW ['算']];
}
？＆GT;
解决方案
在Ajax响应呼叫drawChart（）函数再次新值。下面是code，我都试过了。
索引文件
＆LT;脚本类型=文/ JavaScript的SRC =https://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
google.load（可视化，1，{包：corechart]}）;
google.setOnLoadCallback（drawChart）;
功能drawChart（）
{
警报（'称为'）;
VAR数据= google.visualization.arrayToDataTable（['公司+功放，型号'，'意见']，['三星英雄音乐E1232B'，5]，['三星GalaxyŸS5360'，7]，['三星Galaxy王牌S5830'，7]，['Karbonnķ1212'，2]，]）;
VAR的选择= {
标题：最受欢迎产品，
hAxis：{标题：品牌，titleTextStyle：{颜色：红色}}};
VAR图=新google.visualization.ColumnChart（的document.getElementById（'MPI_chart_div'））;
chart.draw（数据选项）;
}
功能drawChart2（）
{
警报（'called2'）;
VAR数据= google.visualization.arrayToDataTable（['公司+功放，型号'，'意见']，['三星音乐E1232B'，5]，['三星S5360'，7]，['三星S5830'，7] ，['Karbonnķ1212'，2]，]）;
VAR的选择= {
标题：最受欢迎产品，
hAxis：{标题：品牌，titleTextStyle：{颜色：红色}}};
VAR图=新google.visualization.ColumnChart（的document.getElementById（'MPI_chart_div'））;
chart.draw（数据选项）;
}
＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
VAR XMLHTTP
功能MPI_set_shop（STR）
{
警报（STR）;
如果（window.XMLHtt prequest）
{// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
XMLHTTP =新XMLHtt prequest（）;
}
其他
{// code对IE6，IE5
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）
{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）
{
警报（xmlhttp.responseText）;
//google.load("visualization，海峡，{包：corechart]}）;
//google.setOnLoadCallback(drawChart）;
drawChart2（）; //记下这里..
}
}
xmlhttp.open（GET，？chart.php Q =+ STR，真正的）;
xmlhttp.send（）;
}
＆LT; / SCRIPT＆GT;
＆LT; H3＆GT;柱形图最流行的项目＆lt; / H3＆GT;
选择店铺＆LT;选择一个id =MPI_selected_shop的onchange =MPI_set_shop（THIS.VALUE）;＆GT;
＆LT;期权价值=all_Shops＆GT;所有商店和LT; /选项＆GT;
＆LT;期权价值=1＆GT; 1＆LT; /选项＆GT;
＆LT;期权价值=2＆GT; 2'; /选项＆GT;
＆LT;期权价值=3＆GT;第3版; /选项＆GT;
＆LT;期权价值=4＆GT; 4℃/选项＆GT;
＆LT; /选择＆GT;
＆LT;输入类型=文本ID =SD/＆GT;
＆LT; DIV ID =MPI_chart_div的风格=宽度：800px;高度：400像素;＆GT;＆LT; / DIV＆GT;
请注意，我已经创建了另一个名为drawChart2（）函数，但如果你调用drawChart（），那么也就会给你警示带叫。你只需要传递它的新值。希望以上回答将帮助你。最重要的是我并没有做什么，除非回调函数。 [虽然我改变了JavaScript的阿贾克斯code，但认为不会有任何问题。]
I have to display google chart according to dropdown value, which contains shop ids i am retrieving the data from mysql, no problem with values, i am retrieving the data according to shop id from ajax, and just confirming it in the input box it is also fine.
but i dont know how to update that chart with those values, without reloading the page. here is my google chart code with hardcoded values.
<!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',7],['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>
here is my ajax code in the same page within script tag
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);
}
}
here is my chart.php from where i am getting the formatted data from mysql using ajax
<?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'],"],";
}
?>
解决方案
On Ajax Response Call drawChart() function again with new values. Below is the code which I have tried.
Index file
<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()
{
alert('called');
var data = google.visualization.arrayToDataTable([['Company & Model', 'Views'],['Samsung Hero Music E1232B',5],['Samsung Galaxy Y S5360',7],['Samsung Galaxy Ace S5830',7],['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);
}
function drawChart2()
{
alert('called2');
var data = google.visualization.arrayToDataTable([['Company & Model', 'Views'],['Samsung Music E1232B',5],['Samsung S5360',7],['Samsung S5830',7],['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>
<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>
Note that I have created another function named drawChart2() but if you call drawChart() then also it will give you alert with "called". You just need to pass the new values in it. Hope above answer will help you. Most importantly I have done nothing except callback function. [Though I changed javascript ajax code but that wont be any issue.]
这篇关于使用Ajax和PHP的下拉动态更新谷歌图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
