100_095_Mouse_Actions

Previous Chapter          Previous Page          Next Page          Next Chapter          Table of content

Mouse Actions

Through mouse actions (click, move on) on the graph, you can call self written functions. This chapter explains how to define those actions.

An example can be found in Samples\mouse_actions.html.

mouse options

By default, nothing occurs when you act with your mouse on a graph (except if you have activated the SavePngor the annotateDisplay option). If you want that a function is called when you act with the mouse on the graph, 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 graph;
  mouseDownRight : activates a function when you perform a left click on the graph;
  mouseDownMiddle : activates a function when you perform a left click on the graph;
  mouseMove : activates a function when the mouse moves upon the graph;
  mouseOut : activates a function when the mouse leaves the graph area;

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 graph 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 graph but not on a data ,the message "You click the left button but not on a data" will be displayed.

mouse functions

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)
{
  (...)
}

Parameter 1 : event

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.

Parameter 2 : ctx

The canvas himself is passed as second parameter to the function.

Parameter 3 & Parameter 4 : config & data

The config options of the canvas and the data of the graph are passed has third and fourth parameter.

Parameter 5 : other

The last parameter is more complicate to explain, but it is the more important one !

If the mouse action occurs when the mouse is not over a piece of the graph (point, bar, piece of pie), this parameter will have the value 'null'.

Previous Chapter          Previous Page          Next Page          Next Chapter          Top of Page