[英]How to get data in Highstock from PHP MySQL data on AJAX call
我試圖使用MySQL數據中的Highstock繪制圖形,這是我從ajax調用中獲得的。 如果我在console.log()中打印所有數據和日期,則所有顯示正確。 但是在圖形中,我正確地獲取了數據值,但是所有日期值都是錯誤的。
這是我的index.php:
<form action="#" method="post" id="form-chart-2" class="form-inline">
<select class="form-control" id="typeOfIndicator" name="indicator_type">
<option value="0">Type of Indicator</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
<select class="form-control" id='indicatorName' name='indicator_name'>
<option value="0">Indicator Name: </option>
<option value="1">Indicator 1</option>
<option value="2">Indicator 2</option>
<option value="3">Indicator 3</option>
<option value="4">Indicator 4</option>
</select>
<input type="text" class="form-control" id="advanceTickerName" name="advanceTickerName" value="">
<input type="date" class="form-control startDate" id="startdate" aria-required="true" name="startdate">
<input type="date" class="form-control endDate" id="enddate" name="enddate">
<select class="form-control" id="chartType" name="chartType" required>
<option value="area">Area</option>
<option value="column">Bar</option>
<option value="line">Line</option>
</select>
<button type="submit" class="btn btn-chart-create form-control">Create</button>
</form>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="js/chart_js.js"></script>
chart_js.js:
$("#form-chart-2").on('submit',function(e) {
e.preventDefault();
var form = $(this);
var url = 'ajax/advanced_chart.php';
var chartType = $("#chartType").val();
var tickerName = $("#advanceTickerName").val();
$.ajax({
type: "GET",
url: url,
data: form.serialize(),
dataType: "json",
success: function(data)
{
XTickIntervalOne = data.XTickInterval;
xAxisDataOne = data.dates;
yAxisDataOne = data.dataValue;
Highcharts.stockChart('container-chart',{
chart: {
type: ''+chartType,
zoomType: 'xy',
},
title: {
text: ""+ tickerName,
margin: 50
},
xAxis: {
categories: xAxisDataOne,
tickInterval: XTickIntervalOne,
},
yAxis: {
title: {
text: ''
},
opposite: true,
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false
},
fillOpacity: 0.1,
dataLabels: {
enabled: true,
allowOverlap: true,
formatter: function(){
var isLast = false;
if(this.point.x === this.series.data[this.series.data.length -1].x &&
this.point.y === this.series.data[this.series.data.length -1].y){
isLast = true;
}
return isLast ? this.y : '';
}
},
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
threshold: null
}
},
series: [{
name: ''+indexName,
data: yAxisDataOne,
color: '#146FB8',
}],
exporting: {
width: 1500
},
});
}
});
});
advanced_chart.php:
include ("connect.php");
$indicatorTypeId = 0; $indicatorNameId = 0;
$startDate = ""; $endDate = "";
if(isset($_GET['indicator_type'])){
$indicatorTypeId = $_GET['indicator_type'];
$indicatorNameId = $_GET['indicator_name'];
$startDate = $_GET['startdate'];
$endDate = $_GET['enddate'];
}
$query = "SELECT dateValue, data_value FROM data_archive WHERE indicator_id='".$indicatorNameId."' AND dateValue BETWEEN '".$startDate."' AND '".$endDate."' ORDER BY dateValue";
$sql = mysqli_query($conn, $query);
//select dateValue, data_value FROM data_archive where indicator_id=6 and dateValue BETWEEN "2002-02-28" AND "2012-02-28" ;
$XTickInterval = 1;
$totalRows = mysqli_num_rows($sql);
if($totalRows > 10) {
$XTickInterval = ceil($totalRows / 10);
}
$dates = array();
$dataValue = array();
while($row = mysqli_fetch_assoc($sql)){
$date = strtotime($row["dateValue"]);
$dates[] = date("d-m-Y", $date);
$dataValue[] = (double)$row["data_value "];
}
$json = json_encode(array("dates"=>$dates,"dataValue"=>$dataValue,"XTickInterval"=>$XTickInterval));
print $json;
以下是我的輸出圖,其中所有日期均顯示錯誤:
圖片 。
誰能告訴我如何正確顯示Highstock中的日期和數據?
xAxis: {
categories: xAxisDataOne,
tickInterval: XTickIntervalOne,
}
在這里,您使用了默認的xAxis類型(類別)。 對於您的數據,更好的方法是使用datetime
軸類型。 然后,您需要提供帶有日期和值的點,如下所示:
xAxis: {
type: 'datetime',
tickInterval: XTickIntervalOne,
},
series: [{
data: [
[1543484700000, 23.3],
[1543494300000, 18.1],
...
]
}]
請注意,日期數字是自1970年以來的時間戳,以毫秒為單位。
API參考:
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/series.area.data
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.