In my last post i showed you how to create a dynamically updating line chart using jqPlot library and how make the chart flip its orientation. This time i wanted to track the mouse position on the chart so i can put some annotations to the chart. It was possible to display annotations on the chart using the pointLabels plugin and some CSS tricks as the previous one. All i had to do was to add the annotations to the data array and make the pointLabels plugin display the content in the 3rd index of the data array as the point label.
Tuesday, October 2, 2012
Tracking mouse position on your vertical, annotatable, jqPlot line chart
This was working fine when the chart was in horizontal position. However when the chart was in vertical position the position of the mouse was not detected and as a result it was not possible to know which position in the chart should be annotated. I tried different methods, but was unable to find a solution. So i had to change the code in the library it self. I had to change the jquery.jqplot.js file, which is the core library file in order to achieve the result i expected. Here's what i did. First i had to insert the following code into the jqPlot class of the jquery.jqplot.js file.
Then when the chart was flipped i could simply call the setVertical() method so the library detects that it has been flipped.
You can find a working example of the above work here. You can click on a point on the chart to add an annotation to that point. (try it out in both orientations)
You can download/view the gist of the changed jqPlot core library file here.
If you have any problems/questions regarding this, please let me know in the comments.