更新谷歌图表动态下拉使用AJAX和PHP

我必须显示谷歌图表根据下拉值，其中包含店铺ID 我从MySQL检索数据，没有问题的价值观，我检索数据根据商店ID从ajax，并在输入框中确认它也很好。更新谷歌图表动态下拉使用AJAX和PHP

但我不知道如何用这些值更新该图表，无需重新加载页面。这里是我的谷歌图表代码与硬编码值。

<!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>

这里是脚本标签内的同一页我的Ajax代码

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); 

        } 
       }

这里是我在哪里从MySQL使用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'],"],"; 

             } 

         ?>

来源

2012-10-27 Pramod

关于Ajax响应再次使用新值调用drawChart（）函数。以下是我尝试过的代码。

，我已经创建了一个名为drawChart2（）其他功能，但如果你调用drawChart（），那么也就会给你“称为”警报索引文件

<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>

注意。你只需要传递新的值。希望以上的答案会帮助你。除了回调函数，最重要的是我什么也没做。 [尽管我更改了javascript ajax代码，但不会有任何问题。]

来源

2012-10-27 20:27:35 Kamal

谢谢你回复卡迈勒。它为我工作。 – Pramod

上述代码中的数据是硬编码的，它工作正常，但我从数据库中获取数据并将其存储在变量中，并且该变量本身的格式（如我所愿）意味着添加方括号和所有这些。但不是“显示变量的值，而是显示变量名称，我应该如何解决它。 – Pramod

首先，我的anwser帮助过你，但到目前为止，你正在传递一个字符串给ajax响应。数组本身，您可以使用json来获取数据并作为数组传递。 – Kamal

获得格式化的数据我chart.php

你有没有看过谷歌图表的仪表板，你可以用一个控件（字符串过滤器 - 文本框，类别选择器 - 下拉，数字范围选择器 - 滑块）绑定图表（例如条形图）？这是因为我看不到ChartWrapper和Data Table View选项的实例。

不使用仪表板，一个简单的方法就是只需要ajax请求新数据并调用chart_ name.draw（new_chart_data，options）;这将重绘整个图表。此外，根据数据集的大小，您可能会面临解决方案/显示问题。

来源

2012-10-27 14:18:19 MrTan

Google图表的控件和过滤器很棒，但仅限于列值和选项。 Ajex是我猜测的唯一选择。 –

更新谷歌图表动态下拉使用AJAX和PHP

回答

相关问题