CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcchartsflot
Burak Karakuş
Burak Karakuş

Reputation: 1410

Flot Chart's Bar Width

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 longer x-axis texts

The one with shorter x-axis texts The one with shorter x-axis texts

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

Upvotes: 2

Views: 2524

Answers (1)

Raidri
Raidri

Reputation: 17550

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.

Upvotes: 3

Related Questions