php ajax and mssql amchart graphic design I'm using. I only want to get out of the graphics when I do the graphics when the page is opened only when I open it, but loading data is coming where the chart is located I'm pulling my data from range.php amchart does not come to my garage alone, I am using ajax method
please help me as my code below
index.php page
<?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 page
<!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>
