Re: Unexpected white gaps in stacked bar charts

[Karan Bhatnagar]

correction > ('data' instead of 'data2')

 this.plot_ = $.plot($("#my_div_id"), data2, { }); -->  this.plot_ = $.plot($("#my_div_id"), data, { }); 

On Mon, Jun 27, 2011 at 2:00 PM, Karan Bhatnagar <karan.b...@gmail.com> wrote:

Hi.

I have a code snippet which aims at making a stacked bar chart for two series, each series having two points.

series 1 : (1, 20), (2, 40)

series 2 : (1, 10), (2, 50)

series 3 : (1, 30), (2, 25)

The bar chart displayed by this code has gaps in between the stacked-bars (screenshot attached).

May be some JS global variable  is being corrupted which is being used by Flot library.

Can someone suggest what could be causing this thing in Flot library, and how can I avoid it (may be via some options fields)? 

<--begin JS code-->

  var seriess = [];

  seriess[0] = [];

  seriess[0][0] = [1, 20];

  seriess[0][1] = [2, 40];

  seriess[1] = [];

  seriess[1][0] = [1, 10];

  seriess[1][1] = [2, 50];

  seriess[2] = [];

  seriess[2][0] = [1, 30];

  seriess[2][1] = [2, 25];

  var data = [];

  $.each(seriess,

      function(index, series) {

    if (series) {

      var dataPoint = {

          data: series,

          stack: true,

          };

      data.push(dataPoint);

    }

  });        

  

  console.log(data2);

  this.plot_ = $.plot($("#my_div_id"), data2, {

       series: {

           stack: 0,

           lines: { show: false},

           bars: { show: true, barWidth: 0.2}

        }

  });

  console.log(this.plot_.getData());

<--end JS code-->

As per plot_.getData() (see attached screenshot),  the height of gap on Y axis is equal to the height of the bar just below it.

The content of this.plot_.getData()[i].datapoints.points show that a stack-ed bar which is supposed to start from top of the bar below it starts after a gap which is equal to the height of the stack-ed bar below it.

I tried entering raw data insted of data object : ie  data.push(series) instead of data.push(datapoint), still this persists.

I plan to debug jquery.flot.stack.js to see where exactly this gap is coming from, in the meantiem I though i will ask if someone has a quick solution for this.

Thanks.

Karan

[Karan Bhatnagar]

[Ryan Bailey]

I'm having the same issue. Did you ever find the problem?

>  plot_getData_gaps.png
> 47KViewDownload
>
>  bar_chart_with_gaps.png
> 10KViewDownload