100_045_CrossImage
Previous Chapter Previous Page Next Page Next Chapter Table of content
In previous chapter, we have explained how to put text accross the chart. We will now explain how to put images through the chart.
With crossImage options, you can draw more than one image on the chart : the values for all options related to crossImage are arrays of values. The most important option is “crossImage” (the first option explained here after). If the crossImage option is an array with “n” values, only the “n”-first values in the array of the other associated options will be taken in account. If the value of one of the other associated options has less than “n” values, the last defined value will be taken in account for the “missing” values.
Example :
crossImage=[V1,V2,V3];
crossImageAngle=[0];
crossImageRelativePosX=[0,2];
crossImageRelativePosY=[0,1,2,3];
This will be similar as :
crossImage=[V1,V2,V3];
crossImageAngle=[0,0,0];
crossImageRelativePosX=[0,2,2];
crossImageRelativePosY=[0,1,2];
crossImage is really a powerfull set of options…. but really difficult to explain. This part of the documentation has to be re-worked by someone that understand it and that is able to explain it in simple words…
- crossImage
- crossImageAlign
- crossImageAngle
- crossImageBaseline
- crossImageIter
- crossImageOverlay
- crossImagePosX
- crossImagePosY
- crossImageRelativePosX
- crossImageRelativePosY
- special case : drawing a background image
Description : in the crossImage option, specify – in the form of an array - the images that have to be printed in your chart.
Chart types : All
Values : an array of images.
Default value : [undefined] (<=> no image)
Sample :
var img1=new Image();
var img2=new Image();
img1.src="test1.jpg";
img2.src='data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
crossImage=[img1,img2];
See also : title, subtitle, footNote, xAxisLabel, yAxisLabel
Description : Through other options – see crossImageRelativePosX, crossImageRelativePosY, crossImagePosX and crossImagePosY -, you can specify a position of the Image on the chart. Associated to this position, through option crossImageAlign, you can specify the horizontal alignment of the Image. If the assigned value is “default”, the position will depend on the parameter crossImageRelativePosX.
Chart types : All
Values : “left”, “center”, “right” or “default”
Default value : [“center”]
Sample : crossImageAlign : [“center”,”center”,”left”,”right”,”center”]
See also : crossImageBaseline
Description : Through other options – see crossImageRelativePosX, crossImageRelativePosY, crossImagePosX and crossImagePosY -, you can specify a position of the image on the chart. Specify the rotation angle to apply for the image through the crossImageAngle option.
Chart types : All
Values : 0->360
Default value : [0]
Sample : crossImageAngle : [90,180,270,0]
See also :
Description : Through other options – see crossImageRelativePosX, crossImageRelativePosY, crossImagePosX and crossImagePosY -, you can specify a position for the image on the chart. Associated to this position, through option crossImageBaseline, you can specify the vertical alignment of the image. If the assigned value is “default”, the position will depend on the parameter crossImageRelativePosY.
Chart types : All
Values : “bottom”, “middle”, “top” or “default”
Default value : [“middle”]
Sample : crossImageBaseline : [“middle”,”middle”,”top”,”bottom”,”bottom”]
See also : crossImageAlign
Description : Each crossImage can be displayed at each iteration or at a specific iteration of the animation. If you specify “all”, the image will be displayed at each iteration; if you specify “first”, the image will be displayed at first iteration; If you specify “last”, the image will be displayed at last iteration; If you specify a number, the image will be displayed at this iteration of the animation. If you specify "background", the image will be drawn at the very beginning of the procedure (before the printing of the titles, legend and labels (see - special case : drawing a background image).
Chart types : All
Values : “all”, “first”, “last”, "background" or an integer.
Default value : [“all”]
Sample : crossTextIter : [“first”,”last”,”all”,4, "before"]
See also : crossImage
Description : the image can be written over the chart or under the chart. Specify true if the image is displayed over the chart; false otherwise.
Chart types : All
Values :true or false
Default value : [true]
Sample : crossImageOverlay : [true,true,true, false]
See also :
Description : whith the options crossImageRelativePosX, crossImageRelativePosY you can specify a relative position for the image; The crossImagePosX specifies the horizontal padding position of the image in pixels.
Chart types : All
Values :
Default value : [0]
Sample :
See also : crossImagePosY, crossImageRelativePosX, crossImageRelativePosY
Description : whith the options crossImageRelativePosX, crossImageRelativePosY you can specify a relative position for the image; The crossImagePosY specifies the vertical padding position of the image in pixels.
Chart types : All
Values :
Default value : [0]
Sample :
See also : crossImagePosX, crossImageRelativePosX, crossImageRelativePosY
Description : with option crossImageRelativePosX, you specifiy the horizontal position of the image in the canvas :
* 0 : on the left of the canvas;
* 1 : on the left of the chart (-> position of the Y left Axis)
* 2 : on the center of the chart
* -2 : on the center of the canvas
* 3 : on the right of the chart (-> position of the Y right Axis)
* 4 : on the right of the canvas
Chart types : All
Values : 0,1,2, -2, 3, 4
Default value : [2] Example : see crossTextRelativePosX sample in previous chapter.
See also : crossImagePosX,crossImagePosY, crossImageRelativePosX, crossImageRelativePosY
Description : with option crossImageRelativePosY, you specifiy the vertical position of the image in the canvas :
* 0 : at the top of the canvas;
* 1 : at the top of the chart (-> position of the X top Axis)
* 2 : on the center of the chart
* -2 : on the center of the canvas
* 3 : at the bottom of the chart (-> position of the X bottom Axis)
* 4 : at the bottom of the canvas
Chart types : All
Values : 0, 1, 2, -2, 3, 4
Default value : [2] Example : see crossTextRelativePosY sample in previous chapter.
See also : crossImagePosX,crossImagePosY, crossImageRelativePosX, crossImageRelativePosY
If you want to draw a background image for your chart, you have to specify "animation:false", the value for the crossImageIter option has to be "background" and the option for crossImageOverlay has to be false.
Example : crossImage : [backgroundimg], crossImageIter : ["background"], crossImageOverlay : [false], animation : false,
Previous Chapter Previous Page Next Page Next Chapter Top of Page