PHP Chart Js加载Mysql和接口

Question

This is My source ViewGraph.php

        <?php   
            $datesGraph = array();
            $Moneyss = array();
            $SQL = "select right(DateTransaksi,2) as Dates, SUM(AllMoney ) as Money from view_resume_transaksi 
                    where DateTransaksi between '20160401' and '20160420' group by DateTransaksi order by DateTransaksi asc" ; 

             $hasil=sqlsrv_query($conn, $SQL) or die($SQL . "<br>" .print_r( sqlsrv_errors(), true)) ;
                while($row = sqlsrv_fetch_array($hasil)){
                                        $Moneyss[$row[0]] = (int)$row[1];
                                         $datesGraph[]=$row['tgl'];
                                         $Moneyss[]=$row['Money'];

                                    }

?>

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
         labels : <?=json_encode($datesGraph);?>,
        datasets : [
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
            data : <?=json_encode($Moneyss);?>
            }
        ]
    }
    window.onload = function(){
    showGrafik();
}

function showGrafik(){
    var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
}

and i have this in the bottom

<td>    <label align="left">Choose Date</label>    <input type='text' id='date1_g' name='date1_g' size='12' value="<?php echo date('d-m-Y');?> ">until <input type='text' id='date2_g' name='date2_g' size='12' value="<?php echo date('d-m-Y');?> ">   </td>

<div style="width:80%"><canvas id="canvas" height="450" width="600"></canvas>
</div>

this is succesfully load data from mysql... but I don't know, if user change date and get date from mysql and view graph. I mean if proses like this > choose date -> send data using ajax -> viewing graph. now proses just like this > load .php -> viewing graph (because sql using not get parameters from interface).

please help me, I want to display graph using ajax... Thank's your attention.

Answer 1

Make a function in javascript that would accept dateFromand dateTo as parameters to call in you sql query in php via ajax. Something like this..

var path_to_php_file = 'getdate.php';
   function loadchartbydate(dateFrom,dateTo){
    $.ajax(){
      url: path_to_php_file,
      type: 'POST',
      dataType: 'json',
      data: {'dateFrom': dateFrom, 'dateTo': dateTo},
      success: function(data){
        //display data in chart
        //add under success callback function
        var randomScalingFactor = function(){ return                               Math.round(Math.random()*100)};
        var lineChartData = {
         labels : <?=json_encode($datesGraph);?>,
           datasets : [
              {
                 label: "My Second dataset",
                 fillColor : "rgba(151,187,205,0.2)",
                 strokeColor : "rgba(151,187,205,1)",
                 pointColor : "rgba(151,187,205,1)",
                 pointStrokeColor : "#fff",
                 pointHighlightFill : "#fff",
                 pointHighlightStroke : "rgba(151,187,205,1)",
                  data : <?=json_encode($Moneyss);?>
              }
            ]
          }
       window.onload = function(){
              var ctx = document.getElementById("canvas").getContext("2d");
              window.myLine = new Chart(ctx).Line(lineChartData, {
                             responsive: true
              });
       }

      },
      error: function(err){
        console.log(err.responseText); 
       }
    } 
}