Getting data from a JSON result in to a chart (Highcharts)

Question

I have a working script that produces a chart with data from a JSON result. I have the requirement to add a liitle more data to the chart, i.e, have the number of records returned for each column displayed at the top of each column.

The JSON result looks like

[{"name":"Name","data":["A","B","C","D","E","F","G","H","I","J","K","L","M"]},{"name":"Satisfaction %","data":[92.5,80,83.6,80,100,82.3,82,67.9,77.1,83.3,71.1,76.7,64]},{"data":[8,24,11,2,1,26,10,96,14,30,9,18,10]}]

Using the above JSON result and the script below how can I include the last part of the JSON result

[8,24,11,2,1,26,10,96,14,30,9,18,10]

in my chart script below.

$(function () {

var categories=[];
var data2 =[];


var chart;
$(document).ready(function() {

        $.getJSON("charts_get_data.php", function(json) { 
        $.each(json,function(i,el) { 
        if (el.name=="Name") 
        categories = el.data; 
        else data2.push(el); 
        }); 



        $('#container1').highcharts({
            chart: {
                renderTo: 'container',
                type: 'column',
                marginTop: 60,
                marginRight: 30,
                marginBottom: 100
            },
            title: {
                text: 'Overall Satisfaction.<br><?php print  $row_Questions['Q'];?>',
                x: -20, //center
                style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '11px'
                }
            },
            subtitle: {
                text: 'Between <?php print $_POST['FromDate'] . " and " . $_POST['ToDate'];?>',
                x: -20
            },
            xAxis: {
                categories: categories,
                labels: {
                style: {
                    color: '#F00',
                    font: '9px Tahoma, Verdana, sans-serif'
                }
                }
            },
            yAxis: {
                max:100,
                showFirstLabel: false,
                lineColor:'#999',
                lineWidth:1,
                tickColor:'#666',
                tickWidth:1,
                tickLength:2,
                tickInterval: 10,
                gridLineColor:'#ddd',
                title: {
                    text: 'Percentage',
                    style: {
                    fontFamily: 'Tahoma',
                    color: '#000000',
                    fontWeight: 'bold',
                    fontSize: '9px'
                    }
                },
                plotLines: [{

                    color: '#808080'
                }]
            },

            plotOptions: {

                series: {
                    pointWidth: 15,
                    dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#000000',
                    align: 'center',
                    format: '{point.y:.1f}', // one decimal
                    y: 30, // 10 pixels down from the top
                    style: {
                        fontSize: '9px',
                        textShadow: false,
                        fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }

            },

            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            series: data2

        });
    });

});

});

Many thanks in advance for any help you may wish to give.

To look something like:

Cheers.

Answer 1

I added your additional data as a series as below

[{"name":"Name","data":["A","B","C","D","E","F","G","H","I","J","K","L","M"]},{"name":"Satisfaction","data":[92.5,80,83.6,80,100,82.3,82,67.9,77.1,83.3,71.1,76.7,64]},{"name":"appendonTop","visible": false,"data":[8,24,11,2,1,26,10,96,14,30,9,18,10]} ];

Addtionaly I given it a dummy name and one more field "visible": false and then this data was called in series but due to visible:false it won't show as column chart.If you unable to put visible:false in series ,hide the series on chart load event

   events :{
                    load: function(){
                   this.series[1].hide(); 
                    } 
                }

In plotOptions I put stacking normal and then called Stacklaebls in yAxis as below :

 stackLabels: { 
                enabled: true,
                formatter: function() {
                  //  alert("Nishith");
                    console.log((this.axis.series[1].yData[this.x] ));
                    return (this.axis.series[1].yData[this.x] ) ;

                }
            }

and the result is this working fiddle