Highcharts stacked column charts ( Parse json string for series)

Question

I am getting following json string on Ajax call from javascript:-

var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];

I want to fill series of my highchart with the above given data. My requirement is to make "date" as X-Axis, "MsgType" as name and "Count" as data. I have for two objects when i needed to put count for MsgTypes. But here first i need to group data based on date and then need to place each MsgType with count in stack. Please help me with this as i am not able to figure out anything. Any help will be appreciated. I have implemented following for other scenario : -

Highcharts.chart('MP_Chart', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Market Processes',
                style: { "fontSize": "16px", "font-weight": "bold" }
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: Date,
                labels: {
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Queued messages',
                    style: {
                        fontWeight: 'bold'
                    }
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false,
                itemStyle: {
                    fontSize: '12px',
                    font: '12pt',
                }
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                name: 'Queued',
                data: JSON.parse("[" + QueuedMPCount + "]")
            }, {
                name: 'Polled',
                data: JSON.parse("[" + PolledMPCount + "]")
            }]
        });

Answer 1

Assuming I understood your question correctly, you need to pre-process the data a bit before passing it to Highcharts, for example, like this:

var json = [{"date":"2018-05-16","MsgType":"xyz","count":4},
{"date":"2018-05-16","MsgType":"tyu","count":15},
{"date":"2018-05-15","MsgType":"sdf","count":5},
{"date":"2018-05-14","MsgType":"mnb","count":9},
{"date":"2018-05-14","MsgType":"xyz","count":8},
{"date":"2018-05-14","MsgType":"tyu","count":14}];
json = json.reverse() //reverse incomming json because highcharts expectes sorted dates
var series = [];
var names = [];
for (let i = 0; i < json.length; i++) { //loop through all incoming records
  if (names.indexOf(json[i].MsgType) !== -1) { //check if we have a record with this messageType yet, if yes, add to that messagetypes array
    series[names.indexOf(json[i].MsgType)].data.push({
      x: new Date(json[i].date),
      y: json[i].count
    })
  } else { //add new messageTypes
    names.push(json[i].MsgType)
    series.push({
      name: json[i].MsgType,
      data: [{
        x: new Date(json[i].date),
        y: json[i].count
      }]
    })
  }
}

Coupled with this, I changed the xAxis type to datetime and series definition to take the variable we created earlier:

xAxis: {
  type: 'datetime',
  ...
},
series: series

We then get this:

 var json = [{"date":"2018-05-16","MsgType":"xyz","count":4}, {"date":"2018-05-16","MsgType":"tyu","count":15}, {"date":"2018-05-15","MsgType":"sdf","count":5}, {"date":"2018-05-14","MsgType":"mnb","count":9}, {"date":"2018-05-14","MsgType":"xyz","count":8}, {"date":"2018-05-14","MsgType":"tyu","count":14}]; json = json.reverse() var series = []; var names = []; for (let i = 0; i < json.length; i++) { if (names.indexOf(json[i].MsgType) !== -1) { series[names.indexOf(json[i].MsgType)].data.push({ x: new Date(json[i].date), y: json[i].count }) } else { names.push(json[i].MsgType) series.push({ name: json[i].MsgType, data: [{ x: new Date(json[i].date), y: json[i].count }] }) } } Highcharts.chart('MP_Chart', { chart: { type: 'column' }, title: { text: 'Market Processes', style: { "fontSize": "16px", "font-weight": "bold" } }, credits: { enabled: false }, xAxis: { type: 'datetime', labels: { style: { fontWeight: 'bold' } } }, yAxis: { min: 0, title: { text: 'Total Queued messages', style: { fontWeight: 'bold' } }, stackLabels: { enabled: false, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false, itemStyle: { fontSize: '12px', font: '12pt', } }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: false, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: series }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="MP_Chart"></div> 

JSfiddle working example: https://jsfiddle.net/ewolden/Lbyq4k0n/19/