可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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'],"],";

                                        }

                      ?>

回答1:

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

回答2:

Have you looked into google chart's dashboards in which you can bind a chart (e.g. bar chart) with a control (string filter - text box, category picker - drop down, number range selector - slider)? This is because I see no instances of ChartWrapper and Data Table View option.

Without using dashboards, a simple way is to just ajax request new data and call chart_ name.draw( new_chart_data, options ); which will redraw the entire chart. Also, you may face resolution/display problems depending on the size of your dataset.