CODEWITHSUNDEEP
jquerychartsflot
Rikard
Rikard

Reputation: 7805

FLot ordered bars too small and long away from each other

I have a Flot graph with orderBars plugin.

I have JSON data from 2 different years and when I render them together they get too small. When I render each year separated it looks ok.

I have tried to override the width of the bars in the options bu no sucess.

How to fix this? Example

Upvotes: 2

Views: 267

Answers (2)

Raidri
Raidri

Reputation: 17550

In addition to the jitter from Mark's answer you can also increase the width of the bars (see this updated fiddle):

var options = {
    bars: {
        show: true,
        barWidth: 500000000
    }
}

Here I used a fixed width, but in praxis you should calculate the bar width depending on the plot width and the number of bars in the plot.

Upvotes: 2

Mark
Mark

Reputation: 108537

What the orderBars plugin is attempting to do is calculate an appropriate jitter value to offset the bars from each other. It looks like it fails miserably given the large javascript millisecond epoch values (it doesn't take into account the large range of data and appears to try and jitter them by 1s). So as is often my recommendation with flot, skip the plugin and jitter the bars yourself.

A year has 3.15569e10 milliseconds; this divided by the number of bars, is the basis for a good +- jitter value:

var millisInYear = 3.15569e10;
var N = raw2013.length;
var jitter = millisInYear / N;
for (var i = 0; i < N; i++){
    // find the midpoint and jitter around it
    // this way the "middle" bar is over the year tick
    if (i < N/2){
        raw2013[i].data[0][0] = raw2013[i].data[0][0] - (jitter * (N/2 - i));
    }else{
        raw2013[i].data[0][0] = raw2013[i].data[0][0] + (jitter * (i - N/2));
    }
}

Here's an updated fiddle (excuse me for removing the JSON parsing, but it was easier to think through with the whiskey I'm sipping :)

Upvotes: 2

Related Questions