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();
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
Related
I am using Highcharts gauges. Work perfectly in Chrome/Firefox/Safari -however the gauge needle does not appear in IE. This is echoed out in PHP. The "//Add some life" section of the code is all set to 0 so that the needle doesn't move.
echo "<div id='gauges'><h2>Points Achievements
</h2><div id='junior' class='gauge'>
<script type='text/javascript'>
$(function () {
$('#junior').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
credits: {
enabled: false
},
title: {
text: 'Junior Club Award'
},
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: "; if($junior_sum >= 25){ echo "'#B1FCBC'";}else{ echo "'#DDD'"; } echo",
borderWidth: 0,
outerRadius: '101%',
innerRadius: "; if($junior_sum >= 25){ echo "'1%'";}else{ echo "'100%'"; } echo "
}]
},
// the value axis
yAxis: {
min: 0,
max: 25,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'You have...'
},
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
},{
from: " . $junior_sum . " ,
to: 25,
color: '#92CFF0' // light blue
},
]
},
series: [{
name: 'Points Earned',
data: [" . $junior_sum . "],
tooltip: {
valueSuffix: ''
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = 0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});";
echo "</script></div>";
On your plotBands section of code you have a dangling comma:
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
}, {
from: " . $junior_sum . ",
to: 25,
color: '#92CFF0' // light blue
}, //here is your dangling comma
]
IE does not take kindly to those. Since do not list your actual js with data the if statements do not parse but I would check there also for invalid syntax. If possible put up a jsFiddle of what the js looks like for the chart once it has been parsed by PHP.
I am using highcharts speed o meter with PHP and MYSQL. It is working fine but the problem is that when I merge the JavaScript in my website, the speed o meter is not displaying. It does not appear any error, just blank screen where the speed o meter code is used. Here is my code:
$(function () {
$('#containers').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
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: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'Speed km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [<?php echo join($result, ',') ?>],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
}
});
});
I don't know what is problem if any one knows please tell me.
The only thing i see is that you forgot a semi-colon:
<?php echo join($result, ',') ?>
Change to
<?php echo join($result, ','); ?>
Otherwise try the console-debugger for the javascript-part.
I currently just started on JS and needed highcharts for a project, so far so good, but I do have a very newbie question:
I have some task doing a cron job and outputing a value range: 10-90 to a file. How can I load the value into the gauge?
Here is the code I adapted (ranges, look and feel dont matter), i only could make a static value 53.8 :
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
);
$('#container').highcharts().series[0].points[0].update(50.8)
});
Here is the jsfiddle link: http://jsfiddle.net/H8uGk/ , can you guys give me a tip how to read the content of a file? (a number in this case)
Is there any way to do it in javascript? It doesn't need to be dynamic , and i was avoiding using php.
Thank you,
The simplest is to just copy/paste it into your js file, which I'm assuming isn't good enough because you want it to be dynamic.
If you need it to be dynamic, you can't do this in javascript, because the javascript runs on the client (ie the web browser), but it needs to read from the server (ie the original machine). So, you have to create an "endpoint" to read the file, check out something simple in php like this:
<?php
// > PHP 5
$file = file_get_contents('./gauge_data.txt', FILE_USE_INCLUDE_PATH);
?>
I am trying to create a CPU gauge chart with highcharts. I have php script that I would like to call every 5 seconds to get the output and display the data on the gaug:
the ajax function is as follows:
function request_cpu_Data() {
$.ajax({
url: 'get_cpu.php',
success: function(point) {
var myObj = JSON.parse(point);
//This is the data part
var myDate=myObj[0]
//This is the CPU value
var myData=myObj[1];
cpu_chart.addSeries({ data: myData });
setTimeout(request_cpu_Data, 300000);
},
cache: false
});
}
output of get_cpu.php script looks like this:
[1371048443000,46]
This is the function to create the guage highchart:
$(document).ready(function() {
cpu_chart = new Highcharts.Chart({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
renderTo: 'container',
plotShadow: false,
events: {
load: request_cpu_Data
}
},
title: {
text: 'Profile DB'
},
credits: {
enabled: false
},
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: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'CPU'
},
plotBands: [{
from: 0,
to: 65,
color: '#55BF3B' // green
}, {
from: 65,
to: 75,
color: '#DDDF0D' // yellow
}, {
from: 75,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'CPU',
data: [],
tooltip: {
valueSuffix: '%'
}
}]
});
});
When I do this gauge chart is not showing any data. Can somebody tell me what I might be missing here? I like to show the myDate in the the gauage as well.
I figured out the problem. There is my revised function:
function request_cpu_Data() {
$.ajax({
url: 'get_cpu.php',
success: function(data) {
var myObj = JSON.parse(data);
var point = cpu_chart.series[0].points[0];
var newVal=myObj[1];
//alert(newVal);
point.update(newVal);
setTimeout(request_cpu_Data, 10000000);
},
cache: false
});
}
I also head to initialize my data to 0:
series: [{
name: 'CPU',
data: [0],
},
Something like this should work:
Chart.addSeries({ data: fromGetCpu[1] });
There is also a name parameter if you like:
Chart.addSeries({ name: 'yourName', data: fromGetCpu[1] });
I am trying to make a Gauge chart.
The chart is displaying 80 but live data is not working.
I use the following code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function() {
$(function() {
$.getJSON("livedata.php", function(data) {
$.each(data, function(key, val) {
if (key == 'Gas')
{
newVal = val;
var point = chart.series[0].points[0];
point.update(newVal);
}
});
});
}, "json");
}, 3000);
})
});
my simple test livedata.php is as follow:
// Set the JSON header
header("Content-type: text/json");
// The y value is a random number
$x = "Gas";
$y = rand(10, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret, JSON_NUMERIC_CHECK);
Can anybody tell me what is going wrong?
How can I test that the function is called?
How can I test that the livedata has passed?