flot bar chart with equal distance x axis

flot, jquery

Solution

Flot is taking your tick values as numeric (give me a tick at this number) when what you really want is for them to just be labels.

Specify your ticks and data like this:

var views = [[0,7],
             [1,2],
             [2,2],
             [3,1],
             [4,1],
             [5,1],
             [6,1],
             [7,1],
             [8,1],
             [9,1]];


    var ticks = [
        [0,'3747'],
        [1,'3119'],
        [2,'3442'],
        [3,'3748'],
        [4,'3754'],
        [5,'2645'],
        [6,'3534'],
        [7,'3120'],
        [8,'2836'],
        [9,'3571']
    ];

Fiddle here.

Problem

I am using flot for my reports. I can get my data into flot, but I am confused about the formatting of it. For example, my flot code looks like this: ``` var views = [ [3747, 7], [3119, 2], [3442, 2], [3748, 1], [3754, 1], [2645, 1], [3534, 1], [3120, 1], [2836, 1], [3571, 1] ]; var ticks = [ 3747, 3119, 3442, 3748, 3754, 2645, 3534, 3120, 2836, 3571 ]; var options = { series: { bars: { show: true } }, grid: { hoverable:true, clickable:true, tickColor:"#dddddd", borderWidth:0 }, bars: { align: "center", barWidth: 0.5 }, xaxis: { ticks: ticks }, colors:["#FA5833"] }; var data = [{data: views, label: "Views"}]; var placeholder = $("#top-views-graph"); var plot = $.plot(placeholder, data, options); ``` which shows this: I have two problems with this. - The x axis is automatically adjusting the gaps between each label. I want them all to be equal. - I need the actual bars to extend the full width of the "grid column" does anyone know how to achieve this? I have tried the documentation and google but I can't seem to find anyway to do it. I would have thought it is something that a lot of people require. Any help would be appreciated :) /r3plica

Original source