Highcharts Stacked bar chart with db value (Dynamic Data)

Question

I need stacked bar chart with db value. So values are dynamic. Here's my scenario, there are plenty of users in the system but only 2 users are active till now. peter used task1 and task3 and sam used the task1,task2 and task3. Each task has open,pending,cancel status .So for Peter i want to display 2 stacked bars with the status and for same its 3 stacked bars. I couldn't achieve this in highcharts. Picture representation given below.

 $(function () {
                 $('#container').highcharts({
                     chart: {
                         type: 'column'
                     },
                     title: {
                         x: 0,
                         text: null,
                         style: {
                             fontSize: '13px',
                             fontWeight: 'Bold',
                         }
                     },

                     credits: {
                         enabled: false
                     },

                     xAxis: {
                         categories: [
                            'Sam','Peter',
                        ],
                        crosshair: true
                    },
                    yAxis: [{
                        min: 0,allowDecimals: false,
                        title: {
                            text: 'Opportunities'
                        }
                    }],
                    tooltip: {
                        headerFormat: '<b> {point.key}</b><br>',//{series.options.stack} :
                        pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
                    },
                    plotOptions: {
                        column: {
                        stacking: 'normal',
                        depth: 40
                    }
                },
                series: [
               {name:'task1',data:[1], stack:'Sam'},
               {name:'task1',data:[1], stack:'Peter'},              {name:'task2',data:[0], stack:'Peter'},
                {name:'task3',data:[1], stack:'Sam'},{name:'task3',data:[0], stack:'Peter'}]

            });
        });

for (int i = 0; i < dtAccMgrs.Rows.Count; i++)
               {
                   string accMgr = dtAccMgrs.Rows[i]["AccMgr"].ToString();
                   AccMgrList += "'" + accMgr + "',";
                   dtData = dtOppr.Select("AccMgr='" + accMgr + "'");
                   AccMgrDataOpen += "{name:'Open',data:[";
                   AccMgrDataPending += "{name:'Pending',data:[";
                   AccMgrDataCancelled += "{name:'Cancelled',data:[";

                   for (int j = 0; j < dtData.Length; j++)
                   {
                       AccMgrDataOpen += dtData[j]["Oppr_Open"];
                       AccMgrDataPending += dtData[j]["Oppr_Pending"];
                       AccMgrDataCancelled += dtData[j]["Oppr_Cancelled"];
                       string open = dtData[j]["Oppr_Open"].ToString();
                       int OpprTotal = Int32.Parse(open) + Int32.Parse(dtData[j]["Oppr_Pending"].ToString()) + Int32.Parse(dtData[j]["Oppr_Cancelled"].ToString());

                   }
                   AccMgrDataOpen += "], stack:'" + accMgr + "'},";
                   AccMgrDataPending += "], stack:'" + accMgr + "'},";
                   AccMgrDataCancelled += "], stack:'" + accMgr + "'},";
               }
               AccMgrDataOpen += "]"; AccMgrDataPending += "]"; AccMgrDataCancelled += "]"; AccMgrList += "]";
               AccMgrDataOpen = AccMgrDataOpen.Replace(",]", "]");
               AccMgrDataPending = AccMgrDataPending.Replace(",]", "]");
               AccMgrDataCancelled = AccMgrDataCancelled.Replace(",]", "]");

Answer 1

This is a kind of tricky thing to do in Highcharts.

One way of making it work is to process your data so that it looks like this:

  series: [
    // Task 1
    {
      name: 'Task 1',
      id: 'task1',
      stack: 'Task 1 Peter',
      pointPlacement: -0.1,
      data: [{
        x: 0,
        status: 'O'
      }, {
        x: 0,
        status: 'C'
      }]
    }, {
      linkedTo: 'task1',
      stack: 'Task 1 Sam',
      pointPlacement: -0.2,
      data: [{
        x: 1,
        status: 'O'
      }, {
        x: 1,
        status: 'P'
      }, {
        x: 1,
        status: 'C'
      }]
    },
    // Task 2
    {
      name: 'Task 2',
      id: 'task2',
      stack: 'Task 2 Sam',
      data: [{
        x: 1,
        status: 'P'
      }, {
        x: 1,
        status: 'C'
      }]
    },
 (...)

Live demo: http://jsfiddle.net/kkulig/2rbpp7wq/

Every column is a separate series. Series that are the same task are linked together ( linkedTo ). pointPlacement is used to position them properly (these values should depend on the number of columns in one category and should be computed automatically).

stackLabes need to be positioned manually like this:

  render: function() {

    var series = this.series,
        yAxis = this.yAxis[0],
      stacks = yAxis.stacks;

    for (var key in stacks) {
      var stack = stacks[key];
                series.forEach(function(s) {
        var stack_;
        for(var key_ in stack) {        
            stack_ = stack[key_];
        }

        if(s.stackKey.substring(6) === stack_.stack) {
            stack_.label.attr({
            x: s.points[0].plotX
          });
        }
      });
    }
  }