javascript - Consistent bar widths in flot charts - Stack Overflow

admin管理员组

文章数量:1023195

I'm having trouble getting consistent bar widths in Flot. I have charts that can have anywhere between 1 and 10 data points. When there are 10 data points, the bars are the right size. However when there are less than 10 data points, the bars in the chart start getting fatter. The following two images demonstrate this.

The bars are decently sized when there are 10 items.

The bar bees incredibly large when there is only 1 item.

I am aware of the barWidth property and I've tried changing it. The problem is that it only affects the size of the bars in the chart with 10 items but it leaves the chart with the fat bar alone.

I have also read somewhere that I could try changing the height of the div containing the chart, but I would like to avoid this as I want the charts to have a fixed dimension regardless of items displayed.

I'm having trouble getting consistent bar widths in Flot. I have charts that can have anywhere between 1 and 10 data points. When there are 10 data points, the bars are the right size. However when there are less than 10 data points, the bars in the chart start getting fatter. The following two images demonstrate this.

The bars are decently sized when there are 10 items.

The bar bees incredibly large when there is only 1 item.

I am aware of the barWidth property and I've tried changing it. The problem is that it only affects the size of the bars in the chart with 10 items but it leaves the chart with the fat bar alone.

I have also read somewhere that I could try changing the height of the div containing the chart, but I would like to avoid this as I want the charts to have a fixed dimension regardless of items displayed.

• javascript
• charts
• flot

Share Improve this question Follow asked Mar 26, 2013 at 9:54 CadentOrangeCadentOrange 3,34311 gold badge3636 silver badges5252 bronze badges 2

• 1 I do not know flot but a possible quick and dirty workaround is : making 9 more invisible(border and bg color = chart bg If possible) bars and adding them. – Volkan Commented Mar 26, 2013 at 10:05
• That is very quick and dirty :) Thanks for the suggestion and I think that's the route I'll go down if there isn't a more elegant solution. – CadentOrange Commented Mar 26, 2013 at 10:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The problem is that barWidth is expressed in axis units. As you reduce the number of bars the y axis automatically scales, until with only one bar it's going from 0 to 1, and the default bar width of 0.8 takes up most of the vertical space.

You can solve this in two ways:

1. Calculate the barWidth to scale with the number of series, i.e. 0.8 * numSeries / maxSeries. If maxSeries is 10, then the barWidth scales from 0.8 for 10 series to 0.08 for one series.

2. Set a fixed min & max on the y axis, with max being numSeries + (maxSeries - numSeries) / 2 and min being -(maxSeries - numSeries) / 2. This reserves space above and below the bars even as their number drops below maxSeries.

Both of these require that you have some idea of the maximum number of series that will be present.

I think you must pass somewhere labels to your yaxis (ticks property). Assume that your labels are in myLabels array. So if there is only 1 label, add new empty label before and after it to make your only bar smaller:

var myLabels = [];

// add a fake label (in my production code I grab labels from the server)
myLabels.push([0, 'My only label']); // This label has index=0

if (myLabels.length == 1) {
    myLabels.splice(0, 0, [-1, '']); // (-1) is the new index lower than my label's index
    myLabels.push([1, '']); // (1) is the new index greater than my label's index
}

// In configuration of a plot:

// [...]
yaxis: {
    ticks: myLabels,
    // [...]
},

I'm having trouble getting consistent bar widths in Flot. I have charts that can have anywhere between 1 and 10 data points. When there are 10 data points, the bars are the right size. However when there are less than 10 data points, the bars in the chart start getting fatter. The following two images demonstrate this.

The bars are decently sized when there are 10 items.

The bar bees incredibly large when there is only 1 item.

I am aware of the barWidth property and I've tried changing it. The problem is that it only affects the size of the bars in the chart with 10 items but it leaves the chart with the fat bar alone.

I have also read somewhere that I could try changing the height of the div containing the chart, but I would like to avoid this as I want the charts to have a fixed dimension regardless of items displayed.

I'm having trouble getting consistent bar widths in Flot. I have charts that can have anywhere between 1 and 10 data points. When there are 10 data points, the bars are the right size. However when there are less than 10 data points, the bars in the chart start getting fatter. The following two images demonstrate this.

The bars are decently sized when there are 10 items.

The bar bees incredibly large when there is only 1 item.

I am aware of the barWidth property and I've tried changing it. The problem is that it only affects the size of the bars in the chart with 10 items but it leaves the chart with the fat bar alone.

I have also read somewhere that I could try changing the height of the div containing the chart, but I would like to avoid this as I want the charts to have a fixed dimension regardless of items displayed.

• javascript
• charts
• flot

Share Improve this question Follow asked Mar 26, 2013 at 9:54 CadentOrangeCadentOrange 3,34311 gold badge3636 silver badges5252 bronze badges 2

• 1 I do not know flot but a possible quick and dirty workaround is : making 9 more invisible(border and bg color = chart bg If possible) bars and adding them. – Volkan Commented Mar 26, 2013 at 10:05
• That is very quick and dirty :) Thanks for the suggestion and I think that's the route I'll go down if there isn't a more elegant solution. – CadentOrange Commented Mar 26, 2013 at 10:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The problem is that barWidth is expressed in axis units. As you reduce the number of bars the y axis automatically scales, until with only one bar it's going from 0 to 1, and the default bar width of 0.8 takes up most of the vertical space.

You can solve this in two ways:

1. Calculate the barWidth to scale with the number of series, i.e. 0.8 * numSeries / maxSeries. If maxSeries is 10, then the barWidth scales from 0.8 for 10 series to 0.08 for one series.

2. Set a fixed min & max on the y axis, with max being numSeries + (maxSeries - numSeries) / 2 and min being -(maxSeries - numSeries) / 2. This reserves space above and below the bars even as their number drops below maxSeries.

Both of these require that you have some idea of the maximum number of series that will be present.

I think you must pass somewhere labels to your yaxis (ticks property). Assume that your labels are in myLabels array. So if there is only 1 label, add new empty label before and after it to make your only bar smaller:

var myLabels = [];

// add a fake label (in my production code I grab labels from the server)
myLabels.push([0, 'My only label']); // This label has index=0

if (myLabels.length == 1) {
    myLabels.splice(0, 0, [-1, '']); // (-1) is the new index lower than my label's index
    myLabels.push([1, '']); // (1) is the new index greater than my label's index
}

// In configuration of a plot:

// [...]
yaxis: {
    ticks: myLabels,
    // [...]
},

本文标签： javascriptConsistent bar widths in flot chartsStack Overflow