Question

我正在使用的

php ajax和mssql amchart图形设计。我只想在打开页面时打开图形时退出图形，但是要在图表所在的位置加载数据我正在从range.php中提取数据 amchart不会一个人来到我的车库，我正在使用ajax方法

请帮我作为下面的代码

index.php页面

<?php
$conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
$query = "SELECT TOP (1000) [id]
      ,[firin_adi]
      ,[Akim]
      ,[voltaj]
      ,[Guc]
      ,[zaman]
  FROM [Mapa].[dbo].[test]";
$sql = odbc_exec($conn, $query);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL | softAOX Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
</head>
<body>
<br/>
<div class="container">
<h2 align="center">Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL</h2>
<br/>
<br/>
<div class="col-md-2">
<input type="text" name="From" id="From" class="form-control" placeholder="From Date"/>
</div>
<div class="col-md-2">
<input type="text" name="to" id="to" class="form-control" placeholder="To Date"/>
</div>
<div class="col-md-8">
<input type="button" name="range" id="range" value="Range" class="btn btn-success"/>
</div>
<div class="clearfix"></div>
<br/>
<div id="purchase_order">
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="35%">firin_adi</th>
<th width="40%">Akim</th>
<th width="10%">Voltaj</th>
<th width="5%">zaman</th>
</tr>
<?php
while($row= odbc_fetch_array($sql))
{
    ?>
    <tr>
    <td><?php echo $row["id"]; ?></td>
    <td><?php echo $row["firin_adi"]; ?></td>
    <td><?php echo $row["Akim"]; ?></td>
    <td><?php echo $row["voltaj"]; ?></td>
    <td>$ <?php echo $row["zaman"]; ?></td>
    </tr>
    <?php
}
    ?>
    <tr>
        <!-- Styles -->
<style>
#chartdiv {
    width   : 100%;
    height  : 500px;
}                           
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "titles":[{"text":"Step Line Chart"}],
    "theme": "none",
    "autoMarginOffset":0,
     "dataLoader": {
    "url": "http://localhost/filter/range.php"
  },
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "right"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
        "type": "step",
        "lineThickness": 2,
        "bullet":"square",
        "bulletAlpha":0,
        "bulletSize":4,
        "bulletBorderAlpha":0,
        "valueField": "Akim"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#882525",
        "scrollbarHeight":100,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":1,
        "graphLineColor":"#c2c253",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1
    },
    "chartCursor": {
        "fullWidth":true,
        "categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
        "cursorAlpha": 0.01,
        "graphBulletAlpha": 10

    },

    "categoryField": "zaman",
    "categoryAxis": {
        "minPeriod": "mm",
        "parseDates": true
    },
    "export": {
        "enabled": true,
 "dateFormat": "YYYY-MM-DD HH:NN:SS"
     }
});

chart.addListener("dataUpdated", zoomChart);

function zoomChart(){
    chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>

<!-- HTML -->
<div id="chartdiv"></div>                   

    </tr>

    <?php
?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<!-- Script -->
<script>
$(document).ready(function(){
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });
    $(function(){
        $("#From").datepicker();
        $("#to").datepicker();
    });
    $('#range').click(function(){
        var From = $('#From').val();
        var to = $('#to').val();
        if(From != '' && to != '')
        {
            $.ajax({
                url:"range.php",
                method:"POST",
                data:{From:From, to:to},
                success:function(data)
                {
                    $('#purchase_order').html(data);
                }
            });
        }
        else
        {
            alert("Please Select the Date");
        }
    });
});
</script>

</body>
</html>

//////////////

range.php页面

<!doctype html>

<html>
    <head><script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script></head>
<?php
// Range.php
if(isset($_POST["From"], $_POST["to"]))
{
    $conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
    $result = '';
    $query = "SELECT TOP (1000) [id]
      ,[firin_adi]
      ,[Akim]
      ,[voltaj]
      ,[Guc]
      ,[zaman]
  FROM [Mapa].[dbo].[test] WHERE [zaman] BETWEEN '".$_POST["From"]."' AND '".$_POST["to"]."'";
    $sql = odbc_exec($conn, $query);
    $result .='
    <table class="table table-bordered">
    <tr>
    <th width="10%">id</th>
    <th width="35%">Cfirin_adi</th>
    <th width="40%">Akim/th>
    <th width="10%">guc</th>
    <th width="5%">zaman</th>
    </tr>
    ';
    if(odbc_num_rows($sql) > 0)
    {
        while($row = odbc_fetch_array($sql))
        {
            $result .='
            <tr>
            <td>'.$row["id"].'</td>
            <td>'.$row["firin_adi"].'</td>
            <td>'.$row["Akim"].'</td>
            <td>'.$row["voltaj"].'</td>
            <td>'.$row["zaman"].'</td>
            </tr>';

        }
        $result .='<tr>
        <!-- Styles -->
<style>
#chartdiv {
    width   : 100%;
    height  : 500px;
}                           
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "titles":[{"text":"Step Line Chart"}],
    "theme": "none",
    "autoMarginOffset":0,
     "dataLoader": {
    "url": "http://localhost/filter/range.php"
  },
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "right"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
        "type": "step",
        "lineThickness": 2,
        "bullet":"square",
        "bulletAlpha":0,
        "bulletSize":4,
        "bulletBorderAlpha":0,
        "valueField": "Akim"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#882525",
        "scrollbarHeight":100,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":1,
        "graphLineColor":"#c2c253",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1
    },
    "chartCursor": {
        "fullWidth":true,
        "categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
        "cursorAlpha": 0.01,
        "graphBulletAlpha": 10

    },

    "categoryField": "zaman",
    "categoryAxis": {
        "minPeriod": "mm",
        "parseDates": true
    },
    "export": {
        "enabled": true,
 "dateFormat": "YYYY-MM-DD HH:NN:SS"
     }
});

chart.addListener("dataUpdated", zoomChart);

function zoomChart(){
    chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>

<!-- HTML -->
<div id="chartdiv"></div>                   

    </tr>';
    }
    else
    {
        $result .='
        <tr>
        <td colspan="5">No Purchased Item Found</td>
        </tr>';
    }
    $result .='</table>';
    echo $result;
}
?>
 <body>
    </body>   
</html>

无法将php ajax传输到mysql amchart图表

0 个答案: