HKmarine HKmarine - 1 month ago 19
Javascript Question

datepicker - Highcharts Gauge Json

I am trying to get JSON from an onSelect function of a Jquery datePicker and send it to a highchairs gauge. this is my website that shows what I am trying to accomplish.

I cannot figure out why it will not display the correct data in the Highcharts gauges.

$(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);
}
});
});

}});

});


This is the PHP for the gauge that outputs {"gauge1":[24.2]}

$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();

Answer

I am not a computer programmer by trade. Just a simple DIY type of individual trying to Do Thing Myself...

I found my error.

It was in the PHP that relates to the JSON. I was using $_POST when I should have been using $_GET

Here is what I had...

$choice = isset($_POST['choice']) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d");

When it should have be...

$choice = isset($_GET['choice']) ? date("Y-m-d",strtotime($_GET['choice'])) : date("Y-m-d");

A simple change of POST to GET, and everything works.

The weeks of frustration, and then when things finally work... What a great feeling, and a lesson well leaned from just falling on my face, and reading more with stronger determination from each failure. So wonderful.

Alan

Comments