Highcharts仪表 - getJSON

Question

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

Answer 1

After days of reading and trying a million different things. It was something very simple that I did not see...

$.getJSON('clickdates.php', function(data) {
options.series[0].data = data.gauge1;
var chart5 = new Highcharts.Chart(options);

AJAX is what got me to the answer...

$.ajax({
    url: "clickdates.php",
    data: 'gauge1',
    type:'get',
    dataType: "json",
    cache: false, 
    success: function(json_data){
        options.series[0].data = json_data.gauge1;  
        var chart5 = new Highcharts.Chart(options);         
    }
});

It was right under my nose the entire time...

Have a nice weekend.

Alan