Different barWidth with time ? #354

Open
dnschnur opened this Issue Sep 28, 2012 · 13 comments

Projects

None yet

1 participant

@dnschnur
Member

Original author: vinet.ad...@gmail.com (December 09, 2009 21:41:37)

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: http://code.google.com/p/flot/issues/detail?id=275

@dnschnur
Member

From olau%iol...@gtempaccount.com on January 20, 2010 13:19:05
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.

@dnschnur
Member

From d...@mailinator.com on January 28, 2010 23:28:45
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

@dnschnur
Member

From d...@mailinator.com on January 28, 2010 23:29:59
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.

@dnschnur
Member

From gabriel....@gmail.com on February 03, 2010 21:00:53
Mine has the axis for the days all skewed as well. also has bar graphs 1px wide.

@dnschnur
Member

From davidm...@gmail.com on February 09, 2010 17:57:02
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);
    }
    }

@dnschnur
Member

From keithhop...@gmail.com on March 30, 2010 20:53:47
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

@dnschnur
Member

From olivier....@gmail.com on June 25, 2010 15:14:49
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 :)

@dnschnur
Member

From rahulpa...@gmail.com on July 09, 2010 00:19:56
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?

@dnschnur
Member

From rahulpa...@gmail.com on July 09, 2010 17:36:18
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

@dnschnur
Member

From joseph...@gmail.com on December 09, 2010 06:30:41
thanks rahulparte, did it for me! :)

@dnschnur
Member

From markos on November 25, 2011 16:38:19
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 :)

@dnschnur
Member

From janssen....@gmail.com on December 12, 2011 14:14:05
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);
            }
        }
@dnschnur
Member

From luzi...@gmail.com on February 16, 2012 10:20:33
autoHighlight do not work with this series.bars.timeMode = "month"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment