使用ajax将图表页面调用到另一个页面

时间:2016-02-12 16:58:48

标签: javascript php jquery ajax morris.js

我正在使用ajax。我必须使用ajax在名为index.php的另一个页面内调用名为chart.php的页面。当我运行index.php时,不会调用chart.php文件而不能正常工作。但如果我只运行chart.php,它的工作原理。所以我认为编码是完美的..但我仍然无法找到错误

的index.php

    <head>

<script>
function selectMonth(str) { 
  if (str=="") {
    document.getElementById("month").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("month").innerHTML =xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","chart.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>


<body>
       <div class="col-lg-3">
                <select class="form-control" name="month"  onChange="selectMonth(this.value)">
                    <option value="01">January </option>
                    <option value="02">February</option>
                    <option value="03">March </option>
                    <option value="04">April </option>
                    <option value="05">May </option>
                    <option value="06">June </option>
                    <option value="07">July </option>
                    <option value="08">August </option>
                    <option value="09">September </option>
                    <option value="10">October </option>
                    <option value="11">November  </option>
                    <option value="12">December  </option>

                </select>
            </div>

           <div id="month"></div>   
      </body>

chart.php

   //.css,.js are connected well.
     <?php
    $month=(int)$_GET['q'];
    include 'inc/connection.php';
    $sql_month="SELECT SUM(payment_value) AS pay,pay_date From payment WHERE MONTH(pay_date)=$month";
    $sql_month_run=mysqli_query($con,$sql_month);
    $c=0;



?>
<head>
    <script type="text/javascript">
$(function() {
    Morris.Donut({
        element: 'morris-donut-month',
        data: [],
        resize: true
    });

    Morris.Line({
        element: 'morris-line-month',
        data: [
        <?php

    while($row_month=mysqli_fetch_array($sql_month_run))    {

        $results_month[]="{d: "."'".$row_month['pay_date']."'".","."payment: ".$row_month['pay']."}, ";
        echo $results_month[$c++];
    }

    ?>
        ],
        // The name of the data record attribute that contains x-visitss.
        xkey: 'd',
        // A list of names of data record attributes that contain y-visitss.
        ykeys: ['payment'],
        // Labels for the ykeys -- will be displayed when you hover over the
        // chart.
        labels: ['Paid'],
        // Disables line smoothing
        smooth: false,
        resize: true
    });


});

</script> 
</head>

<body>
         <div class="container">
        <div class="row">           
            <div class="clearfix"></div>
            <div class="col-lg-12">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Monthly Payment Graph</h3>
                    </div>
                    <div class="panel-body">

                        <div id="morris-line-month"></div>
                        <div id="morris-donut-month"></div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>                   
        </div>
    </div>

    </body>

0 个答案:

没有答案