Question

我正在尝试使用AJAX与服务器通信，以便在用户在我的下拉框中选择一个选项时更改我的图表数据。他们将选择年份，我希望图表数据根据他们选择的年份而变化。进入数据库，使用sql获取我的图表所需的数据，然后我会使用Google可视化分散图表绘制出来。我已经看到了使用带有ajax的and标签在表中回显结果的示例，但我似乎无法以类似的方式重绘我的图表。

Index.php文件：

<html>
  <head>
    <script type="text/javascript">


google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawMouseoverVisualization);
    var barsVisualization;

    function drawMouseoverVisualization() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Quarter');
      data.addColumn('number', 'Frequency');

      data.addRows([[1,result1],[2,result2],[3,result3],[4,result4]]);

      var options={
          hAxis: {title: 'Quarter'},
          vAxis: {title: 'Frequency'},
          trendlines: {0: {type: 'exponential',
                           color: 'red'
            }}
      };

      barsVisualization = new google.visualization.ScatterChart(document.getElementById('chart'));
      barsVisualization.draw(data, options);

      // Add our over/out handlers.
    }
    </script>
    <script>
 function getchart(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
    return;
        }
        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) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getData.php?q="+str,true);
        xmlhttp.send();
        }
    </script>
 </head>
 <body>
    <form>
        <select name="year" id="year" onchange="getchart(this.value)">
            <?php
            echo "<option>Select year</option>";
            for ($i=2016;$i<date("Y")+10;$i++){
            echo "<option value='$i'>$i</option>";
            }
            ?>
        </select>
    </form>

    <div id="chart"></div>
    <div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>

getData.php文件：

$q=$_GET['q'];
$i=$q;
$i0=$i.'-01-01';

$i1=$i.'-03-31';
$i2=$i.'-06-31';
$i3=$i.'-09-31';
$i4=$i.'-12-31';


$con = mysqli_connect('localhost','root','','hi')or die ("Error :". mysqli_connect_error());

$qry1 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%'AND Date<='$i1'";

$result1 = mysqli_query($con,$qry1);

$qry2 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i2' AND Date>'$i1'";

$result2 = mysqli_query($con,$qry2);

$qry3 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i3' AND Date>'$i2'";

$result3 = mysqli_query($con,$qry3);

$qry4 = "SELECT COUNT(*) FROM courses WHERE Category LIKE '%IT%' AND Date<='$i4' AND Date>'$i3'";

$result4 = mysqli_query($con,$qry4);

    while($row=mysqli_fetch_assoc($result1)){
        $count1 = $row['COUNT(*)'];
    }
    while($row=mysqli_fetch_assoc($result2)){
        $count2 = $row['COUNT(*)'];
    }
    while($row=mysqli_fetch_assoc($result3)){
        $count3 = $row['COUNT(*)'];
    }
    while($row=mysqli_fetch_assoc($result4)){
        $count4 = $row['COUNT(*)'];
    }
 ?>
 <script type="text/javascript">
 var result1 = <?php echo $count1 ?>;
 var result2 = <?php echo $count2 ?>;
 var result3 = <?php echo $count3 ?>;
 var result4 = <?php echo $count4 ?>;
 </script>

关于下拉列表更改的Ajax。图表数据发生变化

0 个答案: