900_100_Annotate_add ins
Previous Chapter Previous Page Table of content
UNDER CONSTRUCTION !!!!!
By default, annotates are displayed next to the mouse cursor. With the annotate.js add-ins, it is possible to display the annotate at other places : in the middle, on top, at the bottom, on a specific place in the chart, etc... It is also possible to display annotates with special shapes (instead of the standard rectangle) : a bubble, a rectangle with an arrow, ...
If you want to use the annotate.js add-ins, you have to insert it AFTER the ChartNew.js module (annotate.js replaces some functions from ChartNew.js). The specification about where the annotates have to be displayed is done through new options that are only working when then annotate.js module is used - See chapter "Additional options for specifying the location of the annotates. If you want to use another shape for the annotate (something else than the normal rectangle), it is explained in the chapter "Shape of the annotate".
###annotatePaddingX/annotatePaddingY
Description : Through the options annotatePaddingX and annotatePaddingY, you can specify a offset value in pixels for the annotate. A positive value for annotatePaddingX will offset the annotate on the right. A positive value for annotatePaddingY will offset the annotate to the bottom. By defautl, if no annotate position options is specified, the annotate is displayed next to the mouse cursor. The offset between the mouse and the annotate is specified through the annotatePaddingX and annotatePaddingY wich have, by default, a non null value.
Chart Type : All charts
Values : any integer
Default value : 10
###annotatePaddingY
Description :
Chart Type : All charts
Values : any integer
Default value : 10
###annotatePositionAngle
Description :
Chart Type : Pie, Doughnut, PolarArea
Values : "center", "middle", "start", "end", "atMousePosition".
Default value : "atMousePosition"
###annotatePositionRadius
Description :
Chart Type : Pie, Doughnut, PolarArea, Radar
Values : "out", "Xout", "MXout", "in", "Xin", "MXin", "center", "middle", "Lcenter", "Lmiddle", "MXcenter"," MXmiddle".
Default value : "atMousePosition"
###annotatePositionY Description : Chart Type : Line, Bar, StackedBar, HorizontalBar, HorizontalStackedBar Values : "top", "Stop", "Xtop", "SXtop", "MXtop", "LXtop", "bottom", "Sbottom", "Xbottom", "SXbottom", "MXbottom", "Xbottom", "center", "middle", "Xcenter", "Xmiddle" or an integer or a string with an integer followed by "%". Default value : "atMousePosition"
###annotatePositionX
Description :
Chart Type : Line, Bar, StackedBar, HorizontalBar, HorizontalStackedBar
Values : "right", "Sright", "Xright", "MXright", "SXright", "left", "Sleft", "Xleft", "MXleft", "SXleft", "center", " "middle", "Xcenter", "Xmiddle" or an integer or a string with an integer followed by "%".
Default value : "atMousePosition"
The shape of the annotate is not specified through an option : the shape of the annotate has to be the same for all charts in a page : if you have more than a chart in a page, you cannot specify that the shape for one chart is different to the shape of other charts in the page. The shape of the annotates is specified throught the global variable "annotate_shape".
To set the shape of the annotate to a bubble, set the value of annotate_shape to 'bubble_tooltip'.
var annotate_shape='bubble_tooltip';
Bubble annotates are always displayed next to the mouse; You cannot place bubble annotates at other place through the options specified in previous chapter.
By default, the shape of the annotate is a simple rectangle. If you want, ChartNew.js can add an arrow in the direction of the piece that is associated to the annotate. In ordre to get this result, you have to set the variable annotate_shape to the value 'ARROW'.
var annotate_shape='ARROW';
The position of the arrow in the shape is computed by an algorithm and vary according the position of the annotate and the piece that is related to the annotate..
If you want, you can force the arrow to be always at the same place on the annotate. To do this specify the arrow position in the config option annotateClassName.
Allowed value for the annotateClassName option : "TopCenter", "TopRight", "RightTop", "RightCenter", "RightBottom", "BottomRight", "BottomCenter", "BottomLeft", "LeftBottom", "LeftCenter", "LeftTop" or "TopLeft" (options are listed according to the direction of a clock).
var annotate_shape='ARROW';
var options={ annotateClassName:"BottomCenter"; }
