CODEWITHSUNDEEP
flot
Mark Salamon
Mark Salamon

Reputation: 579

Clickable xaxis ticks in Flot with Categories

I am using the categories plugin for Flot. I have the xaxis ticks. (The xaxis lists different Products.) I want to make each xaxis tick clickable so that when you click on it, an alert is triggered with some information about that xaxis.

however, when I add a tickFormatter function, it is completely ignored. (I have a yaxis tickformatter function that works fine.) I think this is because of the categories plugin.

Can anyone demonstrate the categories plugin an a tickFormatter function on the xaxis.

Upvotes: 1

Views: 1286

Answers (1)

Mark
Mark

Reputation: 108557

Try something like this:

var ticks = $('.flot-x-axis > .flot-tick-label');
ticks.css({'z-index': 100, 'cursor': 'pointer'});
ticks.click(function(){
    alert($(this).text());
});

Inspecting this sample here, the generated axis is:

<div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
    <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 136px; top: 395px; left: 49px; text-align: center;">January</div>
    ...

I tried the above code on that page and it works.

EDITS

When using the flot-tickrotor plugin the labels are not divs but are "written" on the canvas. Try this instead:

$("#chart").bind("plotclick", function (event, pos, item) {
  var x = chart.getXAxes()[0];
  var y = chart.getYAxes()[0];
  if (pos.y < y.min) { // make sure user is clicking in XAxis
    alert(x.rotatedTicks[Math.round(pos.x)].label);
  }
});

Example here.

Upvotes: 2

Related Questions