1
私はJquery datePickerのonSelect関数からJSONを取得し、ハイチェアゲージに送信しようとしています。これは私が達成しようとしていることを示す私のwebsiteです。datepicker - Highcharts Gauge Json
なぜハイチャートゲージに正しいデータが表示されないのかわかりません。
$(document).ready(function() {
$('#datepicker').datepicker({minDate: new Date(2016, 07 - 1, 1), maxDate: 0, dateFormat: 'yy-mm-dd', onSelect: function(dateText, data) {
var myDate = $(this).datepicker('getDate');
$('#apDiv1').html($.datepicker.formatDate('DD, d', myDate));
$('#apDiv5').html($.datepicker.formatDate('MM', myDate));
$('#apDiv7').html($.datepicker.formatDate('yy', myDate));
$.ajax({
type: "POST",
url: "clickdates.php",
data: {choice: dateText},
dataType: "json",
success: function(json_data) {
console.log(json_data)
$('#apDiv2a').html(json_data.ampPowerP[0]).show();
$('#apDiv2b').html(json_data.dayPowerP[0]).show();
$('#apDiv6a').html(json_data.monthAmpP[0]).show();
$('#apDiv6b').html(json_data.monthPowerP[0]).show();
$('#apDiv8a').html(json_data.yearAmpP[0]).show();
$('#apDiv8b').html(json_data.yearPowerP[0]).show();
$('#neon1').html(json_data.stateC[0]).show();
$('#alarm').html(json_data.alarm[0]).show();
$('#fault').html(json_data.fault[0]).show();
}
})
$(function() {
var options = {
chart: {
type: 'gauge',
renderTo: 'minVolt',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: null,
borderWidth: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
},
title: {
text: null
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 20,
max: 40,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 20,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
y: 20,
text: 'Volts'
},
plotBands: [{
from: 20,
to: 22,
color: '#DF5353' // red
}, {
from: 22,
to: 23,
color: '#FFFF00' // yellow
}, {
from: 23,
to: 30,
color: '#55BF3B' // green
}, {
from: 30,
to: 40,
color: '#DF5353' // red
}]
}, credits: {
enabled:false,
},
series: [{
name: 'gauge1',
data: [],
tooltip: {
enabled: false
},
}]
};
$.ajax({
url: "clickdates.php",
data: {choice: data},
type:'get',
dataType: "json",
cache: false,
success: function(data){
options.series[0].data = data.gauge1;
var chart = new Highcharts.Chart(options);
}
});
});
}});
});
これは出力{ "gauge1"：[24.2]}ゲージ用のPHPである
$choice = isset($_POST['choice']) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d");
$conn = new mysqli("localhost","root","root","ENERGY");
if ($conn->connect_error) {
die("Database connection failed: " . $conn->connect_error);
}
$sql = "SELECT IFNULL(SUM(Vb_min_daily),'24.6') AS choice FROM Solar WHERE date = '".$choice."'";
$result=mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
$battMin = array($row['choice']);
$outarr['gauge1'] = $battMin;
print json_encode($outarr, JSON_NUMERIC_CHECK);
$conn->close();