1. Chris Leonello
  2. jqplot
Issue #53 on hold

Click event for data points

Anonymous created an issue

I couldn't find anything in the documentation to receive clicks on the data points. I have a graph showing monthly expenses and would like to display a list of all the expenses if the user clicks on a data point.

Comments (23)

  1. Chris Leonello repo owner

    The plot's eventCanvas tiggers events for plot clicks. If the plot click happens near a data point, a "neighbor" property will be set which you can test to see if you're on or near a point.

    You bind to the event triggered by the event canvas with a call like:

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

    And then you set up your click handler like:

    function myClickHandler(ev, gridpos, datapos, neighbor, plot) {...}

    The arguments will be:

    • ev - the event object.
    • gridpos - an object with the x,y coordinates of the click on the grid, {x:26, y:133}.
    • datapos - an object with the value in "data" coordinates of the click, {xaxis:5, yaxis:6, x2axis:null, y2axis:null, y3axis:null, y4axis:null, y5axis:null, y6axis:null, y7axis:null, y8axis:null, y9axis:null} (null if axis is not displayed).
    • neighbor - an object representing the point on or close to the click, {seriesIndex: 0, pointIndex:5, gridData:[x, y], data:[x, y, ...]}.
    • plot - the plot object itself.

    "neighbor" will be null if you're not near a point.

    "gridData" is the x,y data values that correspond to the x and y axis associated with this point. Any series (and all it's points) can be associated with only one x axis and one y axis, and these are those values.

    The series data point can contain other values (hi low close, point labels, ...) and the "data" property has the complete data set for this point.

  2. Anonymous

    This "$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);" approach works fine for me for line charts; but not for stacked bar charts.

    Oddly, it _occasionally_ works, but maybe 95% of clicks seem to be ignored.

    I'd really like a stacked bar chart where (a) clicking anywhere on the area works, and (b) the tooltip will show up when mousing over any part of the area. Is there an easy way to do that.

  3. Anonymous

    Hmm. seems to depend on where in the javascript that ...eventListenerHooks.... line was. If I put it before the jqplot statements, I get every click. If I put it after, I only get a subset of the clicks. Is some other event handler (perhaps zooming?) eating some clicks?

  4. Anonymous

    I am having an issue controlling the scope of this.. I have three jqplot charts... when I add this it applies it to all three.. Still searching for additional context of how to implement. Is there some additional reference code or a working example that anyone is aware of?

  5. Anonymous

    Clicks do not work as expected for bar charts. Unless I click at the end of the bar chart, the neighbor parameter is null. I would expect that clicking anywhere on the bar would return the data point for the bar.

  6. Anonymous

    I am trying to create bar chart with click events. I tried $.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

    function myClickHandler(ev, gridpos, datapos, neighbor, plot) { ... }

    It does not work for me. I am new to jqplot. Please help me!

    Thanks in advance

  7. Anonymous

    Excellent piece of software!

    I'm having similar problems to the people above:

    1) it would be nice if clicking anywhere on a bar in a bar graph (not just the top of a bar) fired a click event

    2) when I put multiple plots on the same page, clicking on a bar in the first plot causes an event to fire for only the first pane; clicking on the second plot causes an event to fire for the first two panes, and clicking on the third plot causes an event to fire for all three panes. Ideally the event would ONLY fire for the relevant pane.

  8. Anonymous

    currently jqplot does not include neighbor information for pie charts.

    i've worked out some code that returns the slice that was clicked but it requires modifying the pieRenderer to store the value for the origin of the piechart along with the angles for each of the slices.

    based on the current architecture I think it makes more sense if each plugin can provide a method for determining if a neighbor is near the mouse click. this way the core jqplot doesn't need to know that the pie chart doesn't really have axes.

    let me know if you are interested in my code and I can come up with something that might be more acceptable for inclusion.

    function inPie(plot, orig_x, orig_y) {
        var diameter = plot.series[0].diameter;
        var radius = diameter/2;
        var origin = plot.series[0].origin;
        var gd = plot.series[0].gd;
        var x = orig_x - origin.x;
        var y = orig_y - origin.y;
        var angle = Math.atan(Math.abs(y)/Math.abs(x));
        if (x < 0) {
            if (y < 0) {
                angle = Math.PI+angle;
            } else {
                angle = Math.PI-angle;
            }
        } else {
            if (y < 0) {
                angle = 2*Math.PI-angle;
            }
        }
        for (var i=0; i<gd.length; i++) {
            var ang1 = (i == 0) ? 0 : gd[i-1][1];
            if (angle < gd[i][1]) {
                if (angle > ang1) {
                    alert("clicked in " + gd[i][0]);
                }
            }
        }
    };
    $.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);
    function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
             inPie(plot, gridpos.x, gridpos.y);
    }
    
  9. Anonymous

    forgot to check for distance from the center:

    add the following just before the alert

                    if (((Math.cos(angle) * radius) >= Math.abs(x)) && (Math.sin(angle) * radius) >= Math.abs(y)) {
    

    I chose to add gd to the plot because I didn't want to recalculate the angles for all of the slices every time I want to know if the mouse is within the plot. Same thing for the origin.

  10. Anonymous

    last update, i swear. further testing showed that my previous code didn't quite work correctly. here is an updated inPie that works but doesn't including "fuzzing" (doesn't include any margin of error in clicking).

    function inPie(plot, orig_x, orig_y) {
        var diameter = plot.series[0].diameter;
        var r = diameter/2;
        var origin = plot.series[0].origin;
        var gd = plot.series[0].gd;
        var x = orig_x - origin.x;
        var y = orig_y - origin.y;
        var inCircle = false;
        var angle = Math.atan(Math.abs(y)/Math.abs(x));
        if (((Math.cos(angle) * r) >= Math.abs(x)) && (Math.sin(angle) * r) >= Math.abs(y)) {
            inCircle = true;
        }
        if (x < 0) {
            if (y < 0) {
                angle = Math.PI+angle;
            } else {
                angle = Math.PI-angle;
            }
        } else {
            if (y < 0) {
                angle = 2*Math.PI-angle;
            }
        }
        for (var i=0; i<gd.length; i++) {
            var ang1 = (i == 0) ? 0 : gd[i-1][1];
            if (angle < gd[i][1]) {
                if (angle > ang1 && inCircle) {
                    alert("clicked in " + gd[i][0]);
                }
            }
        }
    };
    
  11. James Rutherford

    As noted in comment 4, if you define the click handler before initializing the plot, it seems to work fine. I also noted, however, that if you zoom in, this also fixes the "missing clicks" problem (even if you zoom back out again). Might help someone pin down the root cause of this issue...

  12. Anonymous

    Is this code (or something similar to this code) likely to be integrated into a release version. If not, why?

  13. Anonymous

    thanks, this helped me advance on an issue that I was stuck for a while. Now it works perfectly thanks to your workaround.

  14. Chris Leonello repo owner

    There have been significant changes to bar (and pie, donut, funnel, etc.) chart event handling. jqPlot does now capture events over the entire area. There is an example, "barTest.html" in the examples folder with many plots on a page and binding to different events for different plots. There are similar exmaples for pie, donut, funnel, etc.

    I think all the issues mentioned here have been addressed. The exception may be zooming, which isn't supported for bar/pie/funnel/donut. The answer there would be, untill I disable it on those plot types, don't use it. It may work in some instances, but it isn't supported.

    If anyone is still following this issue, let me know if you have problems with the latest builds. If no response, I'll close it.

  15. Anonymous

    Hey Chris,

    I am trying to use this feature and I am running into a lot of issues. As addressed by one of them in this post, firstly it varies widely based on when the event handler is called..

    Secondly, I am trying to capture the x and the y axis values upon clicking on the graph so, that I could draw further lines with them. My x-axis has date time format and so when I try ti use the "gridData" to obtain the x and the y axis values, it does not retrieve the correct x-axis value in the format needed which I could use.

    Could you tell me if I am going wrong somewhere? or how do I go about doing this?

    Thanks,S.

  16. Anonymous

    For anyone is searching how to retrieve the data after the user click the point in a line chart, use the following script:

    $('#chartdiv').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); } );

  17. Vinod Louis

    Getting the data, series index and point index is fine but is there any way to explode the pie slice when its clicked,or at least the slice Margin of the jqplot chart can be changed run time whenever each slice is clicked ?

    i' not able to figure it out

  18. Log in to comment