jqplotClick event on jqPlot series (iOS devices Safari browser)

Question

I am having some issues performing action clicks on jqPlot items, and I am hoping someone else can shed some light on what is going wrong.

I have a barchart rendered with jqPlot, which attach a click event handler to (on jqPlot chart) using the following code:

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

myClickHandler looks like this:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
  alert('you have triggered click action');
}

My intention is that by using this simple jqPlot implementation, the alert action will be triggered when a click is delivered on the area inside the chart, including the bar chart item. This works perfectly in any desktop browsers (IE6/7/8/9, Chrome, Safari).

The issue I am having, however, is that when I access the site using iPhone/iPad, everything is rendered perfectly except that the click action specified above behaves strangely.

If I try touching on any bar chart item, it does not alert 'you have triggered click action' - as if nothing is happening.

However, when I tried to click (touch) the empty space of the chart, the alert message fires normally.

Any ideas?

Answer 1

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

This call will attach onClick handler to the whole event canvas. (This event canvas is with the size of the plot and should be ABOVE all other canvases to work - meaning that you might need to manually modify it's z-index to make things work). What I think is happening in your case is this:

1. You are attaching "myClickHandler" method to the event canvas. It will be fired every time event canvas is clicked, no matter where - over the series or over the background of the plot.

2. In the case with barchart renderer this event canvas is below the series canvas (either it is created before series canvas, or it has lower z-index). Solution would be to manually increase the z-index of the event canvas AFTER chart was created. After this it will be on top and click events will be handled correctly.

3. Remember, this click event will fired on every click over the plot, no matter where. Solution would be to filter the execution of the "myClickHandler" method like this:

Code:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
    if (isClickEventOverTheSeries(gridpos)) {
        alert('you have triggered click action');
    }
}

In this example gridpos is array which contains 2 points - x and y coordinates of the click event. "isClickEventOverTheSeries" method is function which checks if under this coordinates there is series drawn. I'm not sure how to achieve this with BarChart renderer - I never used it, but with the line render there is a method which checks it...

Hope this helps