Stackbar chart is overlapping in flot chart

Question

Need help in properly plotting a stacked bar chart in flot chart. Not sure why my bars are not stacking, I am preparing my dataset dynamically. Below is my data format.

[{
     "data": [
         [1415491200000, 1],
         [1415577600000, 2],
         [1415750400000, 1]
     ],
     "label": "MANG",
     "bars": {
         "show": "true",
         "barWidth": 36000000,
         "fillColor": "#FFEE11",
         "order": 1,
         "align": "center"
     },
     "stack": true
 }]

Chart options

{
    xaxis: {
        mode: "time",
        timeformat: "%m/%d/%y",
        minTickSize: [1, "day"]
    },
    grid: {
        labelMargin: 10,
        hoverable: true,
        borderWidth: 0
    },
    series: {
        stack: true
    },
    colors: colorCodes,
    tooltip: true,
    legend: {
        show: true,
        noColumns: 0, // number of colums in legend table
        labelFormatter: null, // fn: string -> string
        labelBoxBorderColor: "#888", // border color for the little label boxes
        container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
        position: "nw", // position of default legend container within plot
        margin: [5, 10], // distance from grid edge to default legend container within plot
        backgroundOpacity: 0 // set to 0 to avoid background
    }
}

Please help. here is a plunker link

Note : In 11/26/14 there are 2 tasks of 2 and 3 counts respectively, so basically bar should plot till 5 in yaxis, but it is overlapped.

Answer 1

I spent alot of time on this question and can finally a post solution to all of your problems.

Firstly you forgot to include <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js"></script> in your index. This meant that stacked charts werent really getting drawn. Secondly I cleaned up your data a bit and removed unnecessary double declarations in your data. I then fixed your mouseover displaying the incorrect amount of tasks after I included the stack script.

Lastly I tried to find out why flot was overlapping and came to the following conclusion: flot does not know how to handle data series with varying length. This means that if you have 3 data series each with a different length, the bars overwright each other seemingly random. If however you make sure that all series are the same length, the bars stack without problems.

The best solution for this in my opinion is to make sure on the server side, that all your series are the same length and have a value at every data tick . Ideally you would add zero values into all series that have missing values at data ticks and make sure that all series are the same length this way.

Here is the code for my solution:

Data and options:

    $scope.tasksRunChartOptions = {

      xaxis: {
        mode: "time",
        timeformat: "%m/%d/%y",
        minTickSize: [1, "day"]
      },
      grid: {
        labelMargin: 10,
        hoverable: true,
        borderWidth: 0
      },
      series: {
        stack: true,
        "bars":{
                "show":"true",
                "barWidth":36000000,
                "order":1,
                "align":"center"
            }
      },
      colors: colorCodes,
      tooltip: true,
            legend: {
                show: true,
                noColumns: 0, // number of colums in legend table
                labelFormatter: null, // fn: string -> string
                labelBoxBorderColor: "#888", // border color for the little label boxes
                container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
                position: "nw", // position of default legend container within plot
                margin: [5, 10], // distance from grid edge to default legend container within plot
                backgroundOpacity: 0 // set to 0 to avoid background
            }
    };

    $scope.translate = function(value) {
      var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      var myDate = new Date(value);
      return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
    }

    $scope.reportTasksRunRange = {
      min: 1415059200000,
      max: 1418342400000, 
      floor: 1415059200000,
      ceil: 1418342400000,
      step: (1412467200000 - 1412380800000)
    };


   $scope.tasksRunData = [
    {
        "data":
        [[1415491200000,1],[1415577600000,3],[1415664000000,2],[1415750400000,1],[1415836800000,3],[1415923200000,1],[1416009600000,7],[1416096000000,2],[1416268800000,2],[1416441600000,1],[1416528000000,12],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,2],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,1],[1417910400000,4],[1417996800000,6],[1418083200000,2],[1418169600000,4],[1418256000000,3]],
        "label":"ICS-MANG"
    },
  {
        "data":
        [[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,2],[1416009600000,15],[1416096000000,4],[1416268800000,1],[1416441600000,3],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,3],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,3],[1417910400000,1],[1417996800000,6],[1418083200000,5],[1418169600000,4],[1418256000000,3]],
        "label":"Neeraj_secure"
    },
    {
        "data":
        [[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,3],[1416009600000,1],[1416096000000,2],[1416268800000,4],[1416441600000,1],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,4],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,7],[1417910400000,20],[1417996800000,6],[1418083200000,4],[1418169600000,4],[1418256000000,3]],
        "label":"Bkrishna",
    }];

And a plnkr displaying my solution is here.

Answer 2

There's a report opened on Google Code, describing the issue and possible fixes:

https://code.google.com/p/flot/issues/detail?id=247

In my case it was also neccessary to sort the data ticks .