Highcharts stacked bar chart - parse JSON to form series

Question

I am learning to create a stacked bar/column chart using highcharts. The json data i have from a pojo class has three properties- date, status and count. On a given day i could have no records for a particular status or more than one record too. This is how JSON looks:

[{"dateV":"2015-11-16","status":"A","count":10},{"dateV":"2015-11-16","status":"B","count":15},{"dateV":"2015-11-15","status":"A","count":5},{"dateV":"2015-11-14","status":"A","count":10},{"dateV":"2015-11-14","status":"B","count":10},{"dateV":"2015-11-14","status":"C","count":10}]

This data is in an arraylist right now. Date is the key here.X axis on the graph would have the date. Y axis should show all the status values stacked. I am able to create the graph but it is completely wrong and i think i know why. I am not grouping the data properly. I have created multiple series - 1 for category, and 1 each for different status values. Considering this is how i am populating the chart, how should i create the category and data series?

var categData = [];
var statusACountData = [];
var statusBCountData = [];
$.getJSON(url, function(response) {                 
    $.each(response, function(i, item) {
      var dateVal=response[i].dateV;
      var statusVal=response[i].status;
      var countVal=response[i].count;                   
      console.log(dateVal+"-"+statusVal+"-"+countVal);

         ******LOGIC TO CREATE SERIES*****

    });
    $('#chartDiv').highcharts({
                chart : {
                    type : 'column'
                },
                title : {
                    useHTML: true,
                    text : '<h3>StackedChart</h3>'
                },

                xAxis : {
                    categories : categData ,
                    crosshair : true
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Count'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true                               
                        }
                    }
                },
                series : [ {
                    name : 'A',
                    data : statusACountData 
                },{
                    name: 'B',
                    data : statusBCountData    //This may increase.Lets consider i have only two status values.
                } ]
            });
});

Answer 1

CODEPEN: http://codepen.io/anon/pen/MKreQE

Your problem is filtering and mapping, here something that you can improve on to get you started:

var filterMap = function (arr, status) {
  return arr.filter(function(a) { return a.status === status; }).map(function(a) { return [status, a.count]; })
};

$.getJSON(url, function(response) {
    $('#chartDiv').highcharts({
        chart : {
            type : 'column'
        },
        title : {
            useHTML: true,
            text : '<h3>StackedChart</h3>'
        },

        xAxis : {
            categories : categData ,
            crosshair : true
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Count'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold'
                }
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true                               
                }
            }
        },
        series : [ {
            name : 'A',
            data : filterMap(response, 'A')
        },{
            name: 'B',
            data : filterMap(response, 'B')
        } ]
    });
});

This should be the required result.

Answer 2

Try the example below, where xAxis has dateValue and yAxis has countVal and statusVal. Don't forget to link to your jsonfile (in my case I use jsonfile.json):

var dateVal=[];
var statusVal=[];
var countVal=[];

$.getJSON("jsonfile.json", function(response) {                 
    $.each(response, function(i, item) {
       dateVal[i]=response[i].dateV;
       statusVal[i]=response[i].status;
       countVal[i]=response[i].count;                   
      console.log(dateVal+"-"+statusVal+"-"+countVal);
    });

$('#chartDiv').highcharts({
            chart : {
                type : 'column'
            },
            title : {
                useHTML: true,
                text : '<h3>StackedChart</h3>'
            },

            xAxis : {
                categories : dateVal ,
                crosshair : true
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Count'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true                               
                    }
                }
            },
            series : [ {
                name : 'A',
                //data : statusACountData 
                data:statusVal,
            },{
                name: 'B',
                //data : statusBCountData    //This may increase.Lets consider i have only two status values.
                data: countVal,
            } ]
        });

});