Different barWidth with time ?

[GoogleCodeExporter]

Hi,
I try to display a bar chart for all months of the year.
The problem is that in calculating the barWidth of each month, it must
timeStamp. Only the timeStamp is different for each month.
Someone there a solution?

Thank you.

PS: See the graf with timeStamp of 30days

Original issue reported on code.google.com by vinet.ad...@gmail.com on 9 Dec 2009 at 9:41

Attachments:

• graph.gif

[GoogleCodeExporter]

Yeah, you can't currently change the bar width. There are two ways to solve it,
either you can see if you can transform the x axis into uniform width (I'm not 
quite
sure how you'd do that, but there's a transform hook in Flot 0.6 which can be 
used,
you have to figure out the transformation yourself though). Or you can make the
columns less wide. It doesn't look as silly if you say make them 15 days wide 
and
center them.

If you have some thoughts on how the API could be extended to handle this, I'd 
love
to hear that too.

Original comment by olau%iol...@gtempaccount.com on 20 Jan 2010 at 1:19

[GoogleCodeExporter]

I'm have the same issue, but with diferent results.

My data are one day wide. and bars appears as one pixel! despite the fact that 
there's 
a good 50px between each day on the X-axis

Original comment by d...@mailinator.com on 28 Jan 2010 at 11:28

[GoogleCodeExporter]

Not to metion that the data points do not match the days on the grid. mine also 
happens this. and i'm using the timestamp for the zero hour of the day. my 
points 
apear some 30% to the right of the day line.

Original comment by d...@mailinator.com on 28 Jan 2010 at 11:29

[GoogleCodeExporter]

Mine has the axis for the days all skewed as well. also has bar graphs 1px wide.

Original comment by gabriel....@gmail.com on 3 Feb 2010 at 9:00

Attachments:

• flot275_a.html
• flot275_a.png

[GoogleCodeExporter]

The cleanest solution I have found is to use the processRawData hook.
Adding the required barWidth as part of the data array. This means you can 
specify a
different width per data point.

e.g.

var options = $.extend(true, {}, d.Options, 
{ hooks: { processRawData: function(a, b, c, d) {
  b.datapoints.format = [
               { x: true, number: true, required: true },
               { y: true, number: true, required: true },
               { y: true, number: true, required: false, defaultValue: 0 },
               { x: false, number: true, required: false } // <=== THIS IS NEW
                        ];
                }
} });

$.plot(p, d.Series, options);

One caveat is that you need to modify the below function jquery.flot.js (line 
1695 in
flot 0.6)

            function plotBars(datapoints, barLeft, barRight, offset,
fillStyleCallback, axisx, axisy) {
                var points = datapoints.points, ps = datapoints.pointsize;

                for (var i = 0; i < points.length; i += ps) {
                    if (points[i] == null)
                        continue;

                    var br = points[i + 3] && points[i + 3] > 0 ? barLeft + points[i
+ 3] : barRight; // <======ADD THIS LINE

                    drawBar(points[i], points[i + 1], points[i + 2], barLeft,
barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal);
                }
            }

Original comment by davidm...@gmail.com on 9 Feb 2010 at 5:57

[GoogleCodeExporter]

I am also trying to plot a bar graph using timestamps and no matter how many 
points 
there are my bars are 1px wide. I'll try the workaround from Comment 5

Original comment by keithhop...@gmail.com on 30 Mar 2010 at 8:53

[GoogleCodeExporter]

Actually comment 5 fix doesn't seem to work for me... I've managed a new hack.
Change plotBars function in jquery.flot.js by adding the following :

if(options.xaxis.mode == "time" && options.xaxis.tickSize[1] == "month") {
    var d = new Date(points[i]);
    d.setMonth(d.getMonth()+1);
    barRight = (d.getTime()-points[i]);
}

your function will look like this :

function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, 
axisx, axisy) {
    var points = datapoints.points, ps = datapoints.pointsize;

    for (var i = 0; i < points.length; i += ps) {
        if (points[i] == null)
            continue;

    if(options.xaxis.mode == "time" && options.xaxis.tickSize[1] == "month") {
        var d = new Date(points[i]);
        d.setMonth(d.getMonth()+1);
        barRight = (d.getTime()-points[i]);
    }

        drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal);
}
}

Nothing else to do !
You can easily adapt this hack to take into consideration other things than 
months :)

Original comment by olivier....@gmail.com on 25 Jun 2010 at 3:14

[GoogleCodeExporter]

This is definitely an annoying issue. I wish It computed the Barwidth 
automatically.

Anyways, does the above function change to plotBars() affect anything else. 
Anyone tested it out?

Original comment by rahulpa...@gmail.com on 9 Jul 2010 at 12:19

[GoogleCodeExporter]

ok found the fix for 1px barWidth issue in timeline bar graphs

barWidth : 24*60*60*1000 //(milliseconds)

above is for one day.. so set it accordingly

Original comment by rahulpa...@gmail.com on 9 Jul 2010 at 5:36

[GoogleCodeExporter]

thanks rahulparte, did it for me! :)

Original comment by joseph...@gmail.com on 9 Dec 2010 at 6:30

[GoogleCodeExporter]

I created a patch along the lines of #7 that I've been using on a project of 
mine. You can find it at https://github.com/samastur/flot/commits/master

Difference is that I actually added another option (timeMode) to settings for 
bar charts because I prefer to make it more obvious.

Please do let me know of changes necessary for this functionality to be merged. 
Thanks :)

Original comment by markos on 25 Nov 2011 at 4:38

[GoogleCodeExporter]

Here's an easier fix. It not only works for time based graphs like for months 
and such:

//SJJ: options.bars.autoWidth has to be true for the current series 
if (series.bars.autoWidth) {
    curBar = points[i];
    nextBar = points[i + ps];
    barRight = nextBar-curBar;
}

your function should look like this:

function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, 
axisx, axisy) {
                var points = datapoints.points, ps = datapoints.pointsize;

                for (var i = 0; i < points.length; i += ps) {
                    if (points[i] == null)
                        continue;

                    //SJJ: options.bars.autoWidth has to be true for the current series 
                    if (series.bars.autoWidth) {
                        curBar = points[i];
                        nextBar = points[i + ps];
                        barRight = nextBar-curBar;
                    }

                    drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, offset, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);
                }
            }

Original comment by janssen....@gmail.com on 12 Dec 2011 at 2:14

[GoogleCodeExporter]

autoHighlight do not work with this series.bars.timeMode = "month"

Original comment by luzi...@gmail.com on 16 Feb 2012 at 10:20

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 8 May 2012 at 12:26

• Changed state: Accepted