CODEWITHSUNDEEP
javascriptjqueryhighcharts
TechGuru
TechGuru

Reputation: 439

Highcharts stacked column charts ( Parse json string for series)

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 + "]")
            }]
        });

Upvotes: 0

Views: 437

Answers (1)

ewolden
ewolden

Reputation: 5803

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/

Upvotes: 2

Related Questions