Displaying bars with flot

Question

Issue with my xaxis ticks, only the first tick shows at the far right of the graph, and no bars are plotted. I have a feeling i'm missing something obvious.

Desired solution: Show all the xaxis ticks and plot the bars accordingly

Associated code:

$.plot($("#chart"), results, {
    grid: {
        hoverable: true,
        aboveData: true
    },
    xaxis: {
        ticks: [
            [1, "AL"],
            [2, "AZ"],
            [3, "CA"],
            [4, "CO"],
            [5, "CT"],
            [6, "DE"],
            [7, "FL"],
            [8, "GA"],
            [9, "HI"],
            [10, "IA"],
            [11, "IL"],
            [12, "IN"],
            [13, "KS"],
            [14, "KY"],
            [15, "LA"],
            [16, "MA"],
            [17, "MD"],
            [18, "ME"],
            [19, "MI"],
            [20, "MN"],
            [21, "MO"],
            [22, "MS"],
            [23, "NC"],
            [24, "NE"],
            [25, "NJ"],
            [26, "NM"],
            [27, "NY"],
            [28, "OH"],
            [29, "OK"],
            [30, "OR"],
            [31, "PA"],
            [32, "RI"],
            [33, "SC"],
            [34, "TN"],
            [35, "TX"],
            [36, "UT"],
            [37, "VA"],
            [38, "WA"],
            [39, "WV"]
        ],
        tickSize: 1,
        tickLength: 1
    },
    grid: {
        hoverable: true,
        clickable: false,
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "ne",
        margin: [-100, 0]
    },
    series: {
        bars: {
            show: true,
            align: "center",
            horizontal: "true"
        }
    }
});

JSFiddle: http://jsfiddle.net/emaM7/

Answer 1

I think the problem may be simply that you're using non-numeric X values in your data. I added this code before the plot call:

for (i = 0; i < results.length; i++) {
    for (j = 0; j < results[i].data.length; j++) {
        results[i].data[j][0] = j;
    }
}

with this a graph shows up as do the labels.

You'll probably want to use slightly more complex logic to select the proper numeric code for each state, as what I wrote won't work if you have states missing or out of order in the 'results' object.