CODEWITHSUNDEEP
jqueryflot
Olter
Olter

Reputation: 1139

Flot Ticks dynamic creation

I'm working with flot library and have some problems with displaying x-axis label correctly.

If I have a test array of data, like this:

  var textData = ["51% <br> 101 <br> data1", "11% <br> 32 <br> data2", "26% <br> 64 <br> data3"];

and then use it to create x-axis labels this way:

 xaxis: {
            tickLength: 0,
            show: true,
            ticks: [[0, textData[0]], [1, textData[1]], [2, textData[2]]]
        },

that works fine:

enter image description here

That works for test one, however, the number of data items can and would be different, so I'd should create x-axis values dynamically. I tried this:

     xaxis: {
                tickLength: 0,
                show: true,
            }
     })

     for (var i = 0; i < textData.length; i++) {
        ticks.push(i, textData[i]);
    }

That would create the chart, however the x-axis labels will be displayed incorrectly:

enter image description here

Any help will be appreciated.

Upvotes: 0

Views: 1517

Answers (1)

Mark
Mark

Reputation: 108537

Set up a ticks array to pass in your options:

var textData = ["51% <br> 101 <br> data1", "11% <br> 32 <br> data2", "26% <br> 64 <br> data3"];
var myTicks = [];
for (var i = 0; i < textData.length; i++)
{
    myTicks.push( [ i, textData[i] ] ); //note the extra brackets, it's an array of arrays
}

Then in your options:

xaxis: {
    tickLength: 0,
    show: true,
    ticks: myTicks
}

Upvotes: 5

Related Questions