Open GoogleCodeExporter opened 9 years ago
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
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
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
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:
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
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
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
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
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
thanks rahulparte, did it for me! :)
Original comment by joseph...@gmail.com
on 9 Dec 2010 at 6:30
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
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
autoHighlight do not work with this series.bars.timeMode = "month"
Original comment by luzi...@gmail.com
on 16 Feb 2012 at 10:20
Original comment by dnsch...@gmail.com
on 8 May 2012 at 12:26
Original issue reported on code.google.com by
vinet.ad...@gmail.com
on 9 Dec 2009 at 9:41Attachments: