CODEWITHSUNDEEP
jqueryflot
AP257
AP257

Reputation: 93803

Flot bar charts: configure extent of x-axis when there's only one entry?

Anyone know how to define a length for the x-axis in flot bar charts with only 1 entry?

There are 'min' and 'max' options given in the Flot documentation, but they seem to require absolute values.

By default, the x-axis automatically stretches to fit the values of the entries. From the docs: 

The options "min"/"max" are the precise minimum/maximum value on the
scale. If you don't specify either of them, a value will automatically
be chosen based on the minimum/maximum data values.

On graphs with one entry, the bar is stretching to the full extent of the x-axis, which looks decidedly wrong!

See an example of the problem.

Upvotes: 2

Views: 6147

Answers (4)

Thiago oliveira
Thiago oliveira

Reputation: 11

This is my solution, works for me.

            var margin = 0.01; //default

            // If your array has only one value, change the size of margin
            // than, you can have a small column
            if (data.length == 1)
            {
                margin = 3.00;
            }
            
            //Display graph
            $.plot($("#barras"), [ data ] , {
                xaxis: {
                    autoscaleMargin: margin // set the new value
                }

            });

Upvotes: 1

El Ronnoco
El Ronnoco

Reputation: 11922

Ok, change of tack. As you are working with whole day data (apparently) rather than a continuous 'analogue' series I would suggest making this explicit eg...

Example here

  var options = {
      xaxis: {
        mode: "time",
        timeformat: "%y-%b",
        minTickSize: [1, "day"], //we are only working to a resolution of 1 day
        autoscaleMargin: 0.02    //autoscaleMargin solves the issue of bars extending the full width
      },
      yaxis: {
        tickFormatter: suffixFormatter
      },
      legend: {
        position: "nw",
      },
      colors: ["#830242"],
      grid: { hoverable: true, clickable: true }
  };
  var data = [
    {
      points: {
        show: true
        },
      lines: {
        show: false,
        fill: 0
        },
      bars: {
        show: true,
        barWidth: 24 * 60 * 60 * 1000    //Force the bar to a day-wide (in milliseconds)
      },
    data: [
      [ new Date('2010-04-08T00:00:00Z'), 216359.0 ]
    ]}
  ];

Upvotes: 2

DarrellNorton
DarrellNorton

Reputation: 4651

You can set the Min and Max using an AJAX call or jQuery. Set the Min and Max to one month less and/or one month greater to avoid the bar filling the entire chart area.

Upvotes: 2

El Ronnoco
El Ronnoco

Reputation: 11922

I'm afraid I'm not very familiar with flot but consulting the API it appears to be possible to configure bar width and alignment. Presumably it is also possible to configure the overall width of the chart. So for example, if your chart is 500px wide, setting bars as follows:

bars: {
  barWidth: 250,
  align: "center",
  horizontal: false
}

should position the single bar in the middle of the x-axis.

Upvotes: -2

Related Questions