Flot Chart's Bar Width

Question

I'm using flot charts in my report page. The chart has x-axis which contains some labels like Quality of Service, Quality of Performance etc, but these labels are dynamic for every other customer. What I mean is labels can be Car, Plane, Truck for some other customer, and the character difference between the texts in x-axis causes abrupt changes in the width of the bars. As far as I know, barWidth property of flot bar chart depends on the x-axis, as the author of this answer says. In time mode, I somehow understand, but if I use text in x-axis, how is the barWidth determined?

EDIT: The code that's generated is here.

Same width value, which is 0.1, two different views in chart:

The one with longer x-axis texts

The one with shorter x-axis texts

And here it comes, the one that sucks the most: enter image description here

What is the underlying data of the different charts? (The last one for example looks like there is one bar group missing.) Even if you use categories mode, the positioning and width of the bars depends on the numeric values in the underlying data. (If you could provide a fiddle or code snippet for the charts in the images we could provide further details.) — Raidri
The code that's generated by html is added to the question. Thanks for your interest. I couldn't achieve to add a fiddle cause there is a lot of data, couldn't handle it. — Burak Karakuş

Raidri Raidri · Accepted Answer · 2014-10-22T11:53:24

Explanation for your third image for which your linked to the generated code:

The x-values are 103, 110 and 114 (from var d_main_quest_bar_20 = [[103, 8.25],[110, 8.75],[114, 7.75],];). The differences between the x-values are 7 and 4 which explains the different distance between the groups of bars. Your bar width is 0.4 so each group of bars has an approximately total width of 1.6. And your bar groups are centered. All together this gives:

start     end     width    description             tickname
--------------------------------------------------------------
102.2 to 103.8     1.6     first group of bars     Tesis
103.8 to 109.2     5.4
109.2 to 110.8     1.6     second group of bars    Program
110.8 to 113.2     2.4
113.2 to 114.8     1.6     third group of bars     Personel

So, as I mentioned in my comment, the bar width and postion is calculated from the numerical x-values from your data even if you don't show these values. (And it has nothing to do with the length of the tick names like you hint in the question, that's only a coincidence.)

If you want to show the groups with equal distance and don't care for their values you could use the categories plugin (example). You would have to check/test if this works well together with the orderbar plugin and how the bar width is calculated in that case.

Flot Chart's Bar Width

1 Answers