更新谷歌圖表動態下拉使用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

回答

相關問題