PHP 图表 js 加载 mysql 和接口

PHP Chart Js Load Mysql and Interface

本文关键字：接口 mysql 加载 图表 js PHP      更新时间：2023-09-26

这是我的源视图.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
        });
}

我在底部有这个

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

这是从MySQL成功加载数据...但我不知道，如果用户更改日期并从MySQL获取日期并查看图形。我的意思是，如果像这样的专业人士>选择日期 ->使用 ajax -> 查看图发送数据。现在就像这样>加载.php->查看图（因为SQL使用不从接口获取参数）。

请帮助我，我想使用 ajax 显示图形...谢谢你的关注。

在javascript中创建一个函数，该函数将接受dateFrom和dateTo作为参数，以通过ajax在PHP中调用SQL Query。像这样的东西..

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); 
       }
    } 
}
相关文章：