CODEWITHSUNDEEP
javascriptjqueryjqplot
GayashanNA
GayashanNA

Reputation: 478

Tracking mouse position of a jqplot vertical line chart

I want to create a jqPlot line chart which has the ability to change orientation between vertical and horizontal orientation. I was able to achieve this using CSS rules, by rotating the div element containing the chart.

My work up to now: http://jsfiddle.net/GayashanNA/A4V4y/14/

But the problem is I also want to track the mouse-pointer and mouse clicks on points on chart after the orientation is flipped because i want to annotate those points. I am unable to do this when the chart is in vertical orientation. Can anyone suggest a method to do this? Or am i approaching the problem in a wrong way?

(Note: I am able to do this in horizontal orientation, you can observe it if you try to click on a point on the above chart.)

Thanks and help is much appreciated.

Upvotes: 2

Views: 1272

Answers (2)

GayashanNA
GayashanNA

Reputation: 478

I finally found a solution for the problem. But i had to change jqPlot library to achieve this. To help anyone else who run in to the same problem, i'll put my solution here.

First i had to insert the following code in to the jqPlot class of the jquery.jqplot.js file, which is the core library.

function jqPlot() {
    //add the following code segment
    var verticallyOriented = false;
    this.setVertical = function(state){
        verticallyOriented = state;
    }
    //don't change other code that isn't mentioned here

    //now you have to change the logic in the getEventPosition function
    //to make sure the new orientation is detected
    function getEventPosition(ev) {
        //change the line starting with var gridPos = ...
        //to the following code segment
        //depending on the orientation the event position calculating algorithm is changed
        if(verticallyOriented){
            var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
        } else {
            var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
        }
        //no change to other code is needed
    }
}

You can view a working example here: http://jsfiddle.net/GayashanNA/yZwxu/

Gist for the changed library file: https://gist.github.com/3755694

Please correct me if i have done something wrong.

Thanks.

Upvotes: 2

Pablo
Pablo

Reputation: 380

I've never used jqPlot, but I guess your problem is trying to use css rotate(), since the cursor plugin is using the mouse position to determine where to draw the lines, and element's size doesn't change when transformed by rotate(), it still have the same width and height values.

If you take a look at the code, you will see:

if (c.showVerticalLine) {
    c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
    c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}

So it seems like the library is always drawing the lines based on mouse position over the original element, which of course, won't match the position after being transformed by rotate(), and XY coordinates are going to be transformed to YX after rotate().
I would try to change the size of your original element, though I don't know if the library lets you specify in which sides are the labels going to be drawn.

Upvotes: 2

Related Questions