Question

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.

Answer 1

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.