Highcharts Gauge getJson problem...
I have one php file that echo's several different json_encode. Here is the output. I need to grab just the gauge data for each of the 3 Highcharts gauges. Everything else works... This is the output of the clickdates.php.
{"ampPowerP":[161],"dayPowerP":[4.24],"monthAmpP":[755], "monthPowerP":[19.78],"yearAmpP":[14015],"yearPowerP":[369.5], "stateC":[0],"gauge1":[24],"gauge2":[29.2],"gauge3":[69.2]}
My focus now is on the 3 gauge outputs that from my reading is correct format output with what Highcharts documentation says it is looking for.
Perhaps I am confusing myself, so I made 3 separate JS files to keep things simple... gauge1.js, gauge2.js, and gauge3.js file for each div that will show each Highcharts gauge. I have tried a million ways as listed on the Highcharts forums and what has been answered here, but nothing works. I get a gauge without the display needle. I have gone back to the basics, and this is my foundation for each gauge.js that I am trying to make work.
This is gauge1.js
$(document).ready(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: 'Volt',
data: [],
tooltip: {
enabled: false
},
}] };
$.getJSON('clickdates.php', function(gauge1) {
options.series[0].data = gauge1;
var chart = new Highcharts.Chart(options);
});
});
Something in the getJSON must be what I am not seeing, and not understanding... Highcharts is looking for the format...
{"gauge1":[24]}
... and that is what i am sending...
This $.getJSON should work as I have the chart show, but there is no data from the database...
$.getJSON('clickdates.php', function(gauge1) { options.series[0].data = gauge1; var chart = new Highcharts.Chart(options);
It must be something simple, but I can't see it... and none of my efforts seem to get that JSON data into the gauge...
Your Wisdom is greatly appreciated.
Alan