-
Notifications
You must be signed in to change notification settings - Fork 141
100_095_Mouse_Actions
Previous Chapter Previous Page Next Page Next Chapter Table of content
Through mouse actions (click, move on) on the chart, you can call self written functions. This chapter explains how to define those actions.
An example can be found in Samples\mouse_actions.html.
By default, nothing occurs when you act with your mouse on a chart (except if you have activated the SavePng or the annotateDisplay option). If you want that a function is called when you act with the mouse on the chart, you have to define the function and to assign it on the associated option.
Available options :
- mouseDownLeft : activates a function when you perform a left click on the chart;
- mouseDownRight : activates a function when you perform a right click on the chart;
- mouseDownMiddle : activates a function when you perform a middle click on the chart;
- mouseMove : activates a function when the mouse moves upon the chart;
- mouseOut : activates a function when the mouse leaves the chart area;
- mouseWheel : activates a function when the mouse wheel is used upon the chart area;
- contextMenu : true or false ; By default, when you right click on a canvas, a menu is displayed. If you want to desactivate this menu, set contextMenu to false. When the option mouseDownRight is associated to a function, the contextMenu is always desactivated.
- detectMouseOnText : true or false (default value : false) ; If the user perform a mouse action over a text area, the parameter "other" of the called function is NULL; If you set option detectMouseOnText to true, instead of NULL, the parameter "other" of the called function will receveive several values.
Example :
function fctMouseDownLeft(event,ctx,config,data,other)
{
if(other != null) window.alert("Click on left button");
else window.alert("You click the left button but not on a data");
}
var opt = {
mouseDownLeft : fctMouseDownLeft
}
Suppose that you define this function and associates that 'opt' variable to a chart produced with ChartNew.js. If you click on a data (a bar, a point on a line, a piece of a Pie), the message "Click on left button' will appear; If you click on the chart but not on a data ,the message "You click the left button but not on a data" will be displayed.
The functions associated to a mouse action have to be written by the user. The called function receives 5 parameters that are described here.
function user_written_mouse_function(event,ctx,config,data,other)
{
(...)
}
When a mouse action is trapped in a Javascript Program, it receives the parameter 'event'. Through this parameter, you get for instance the mouse position and the mouse action that initiated the calls. The 'event' parameter is passed as first parameter to the function associated to the mouse action.
The canvas himself is passed as second parameter to the function.
The config options of the canvas and the data of the chart are passed has third and fourth parameter.
The last parameter is more complicate to explain, but it is the most important one !
If the mouse action occurs when the mouse is NOT over a piece of the chart (point, bar, piece of pie), this parameter will have the value 'null'.
If the mouse action occurs when the mouse is over a piece of the chart (point, bar, piece of pie), this parameter receives lot of values : other.v1, other.v2, etc... other.v12 are initialised with values associated to the piece of chart the mouse is on.
Explanation of the values are v1 -> v12 (or even v13) are explained in Chapter Template Variables.
If the mouse action accurs when the mouse is over a text Area and if the option detectMouseOnText is set to "true", this parameter will receive following values :
- other.values[0] : Description of the text zone;
- other.values[1] : The text himself;
- ("+other.values[2].p1+","+other.values[3].p1+");("+other.values[2].p2+","+other.values[3].p2+");("+other.values[2].p3+","+other.values[3].p3+");("+other.values[2].p4+","+other.values[3].p4+")" : position of the four corners of the virtual rectangle around the text;
- other.values[4] : text rotation in radiant;
- other.values[5] : text width;
- other.values[6] : text height;
Example : see Samples/clicktextwithmouse.html
Previous Chapter Previous Page Next Page Next Chapter Top of Page