StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This isn't well-documented, but you can find a discussion about it <a href="https://bitbucket.org/cleonello/jqplot/issue/53/click-event-for-data-points" rel="noreferrer">here</a>.</p> <p>Basically, you need to create event handlers for your chart <strong>before</strong> calling jqplot to create the actual chart. To do that, you need to do something like this:</p> <pre><code>var handler = function(ev, gridpos, datapos, neighbor, plot) { if (neighbor) { alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); } }; $.jqplot.eventListenerHooks.push(['jqplotClick', handler]); </code></pre> <p>That's just a simple event handler that checks to see if there's a neighboring data point near where you clicked. See a working example here: <a href="http://jsfiddle.net/andrewwhitaker/PtyFG/" rel="noreferrer">http://jsfiddle.net/andrewwhitaker/PtyFG/</a></p> <p><strong>Update:</strong> If you want to only listen to events on a certain plot, you could do something like this:</p> <pre><code>var handler = function(ev, gridpos, datapos, neighbor, plot) { if (plot.targetId === "#chartdiv") { if (neighbor) { alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); } } else if (plot.targetId === "#chart2div") { .... } // etc... }; </code></pre> <p>Where you would replace <code>#chartdiv</code> with whatever the Id of the chart you want to listen to events for is. The example has been updated.</p> <p><strong>Update 2:</strong> Looks like you can use a regular <code>bind</code> event with the plot events:</p> <pre><code>$("#chartdiv").bind("jqplotClick", function(ev, gridpos, datapos, neighbor) { if (neighbor) { alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); } }); </code></pre> <p>Example using this method, with 2 charts:</p> <p><a href="http://jsfiddle.net/andrewwhitaker/PtyFG/5/" rel="noreferrer">http://jsfiddle.net/andrewwhitaker/PtyFG/5/</a></p> <p>Hope that helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload