Search code examples
javascriptjqueryflotbar-chart

flot bar chart ticks not displaying


my data:

var data5 = [
    { label: "my cat",  data: [[1,10], [4,20], [7,30]], color: 'rgb(85, 96, 42)'},
    { label: "my job",  data: [[2,30], [5,20], [8,30]], color: '#42215F'}
];

my options:

var type = {};
type[charttype] = {show: true};
type["xaxis"] = {ticks: [[1,"foo"], [2,"bar"], [4,"cat"], [5,"woo"], [7,"cookie"], [8,"yay"]]};

var chart_options = {};
chart_options["series"] = type;

however, when I

var plot = $.plot($(div), data5, chart_options);

The ticks just show up as 1-9, instead of with the strings I've given. What am I doing wrong?


Solution

  • Try this:

    var data5 = [
        { label: "my cat",  data: [[1,10], [4,20], [7,30]], color: 'rgb(85, 96, 42)'},
        { label: "my job",  data: [[2,30], [5,20], [8,30]], color: '#42215F'}
    ];
    
    var chart_options = {
        series: {lines:{show: true}},
        xaxis:{ticks: [[1,"foo"], [2,"bar"],  [4,"cat"], [5,"woo"],  [7,"cookie"], [8,"yay"] ]}
    };
    
    var plot = $.plot($('div'), data5, chart_options);
    

    Demo

    charttype is replaced with an actual type (lines/points..)

    xaxis should not be inside of series object, instead on the same level.