Documentation
Browser Support
CanvasXpresso works in all major browsers, Firefox, Safari, Chrome, Opera and IE. It even works in substandard browsers like Internet Explorer 6 if an additional javascript library like ExplorerCanvas or FlashCanvas is included. CanvasXpress is much slower in IE unless the google frame plugin is installed. (Please see below how to automatically enable this plugin). Older versions of many browsers (I mean Firefox 1.5, Opera 9, Safari 3.x, Chrome 1.0, IE 6) also require additional javascript libraries, canvas-text and typeface.js to support printing of text. (Please see below).
Functionalities
Zooming and Panning
Zooming graphs can be done by dragging the mouse over an area while pressing the left mouse button or by clicking close to the axis after the axis resizer appears. You can adjust the maximum and minimum value and / or drag an interval across the range. You can select samples by dragging the mouse over the samples you want to see while you pressing the left mouse button and the 'shift' key. Also, networks and haetmaps can be zoom in and out with the help of the mouse wheel or with the help.
Panning can be done also in networks and heatmaps by either dragging the mouse or with the help of the the arrow keys.
Selecting data points or nodes
You can select data points in the scatter plots or in the networks by simultanously pressing the 'shift' key and dragging the mouse over the data points or nodes. You can also select individual items by simultaneously pressing the 'ctrl' key and clicking with the left mouse button on the individual item. Once selected, you can press simultaneously the 'ctrl' and the 'delete' keys to hide them or the 'ctrl' and the 'insert' keys to show them again. You can reset the selecting by pressing the 'esc' key.
Canvas Resizing
You can resize the canvas image using the handle that appears when you mouse over the south and east sides of the canvas.
Animations
You can use the arrow keys to rotate the 3D-Scatter plot or cycle over the axes in the 2D-Scatter plots (including the paging keys too). Of course you have to simultaneously press any of those keys and the 'ctrl' key.
Reseting the canvas
In order to reset the canvas just press the 'esc' key.
Printing the canvas
To print the canvas you need to simultaneously click the 'ctrl' and the 'p' keys.
Usage
Javascript Libraries
Please see the javascripts libraries included in any page in this site which should look something like:
Flash fallback for IE
<!--[if lt IE 9]><script type="text/javascript" src="./js/flashcanvas.js"></script><![endif]-->
<script type="text/javascript" src="./js/canvasXpress.min.js"></script>
or
VML fallback for IE
<!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript" src="./js/extext.js"></script><![endif]-->
<script type="text/javascript" src="./js/canvasXpress.min.js"></script>
Make sure when you are using FlashCanvas to include the flash binaries in the same directory where the JavaScript file is located. Please see the documentation.
As mentioned above canvasXpress is slower in Internet Explorer unless the Google Chrome Frame plugin is installed. Enabling the plugin is simple. For most web pages, all you have to do is add a single tag to your pages and detect whether your users have installed Google Chrome Frame. Please see the html head included in any page in this site which should look something like:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
The file canvasXpress.min.js also contains the additional javascript libraries, sprintf to format numbers, canvas text libraries to support cross-browser displaying of text and date.format to nicely format dates.
How to initialize canvasXpress
Simple ...
var cX = new CanvasXpress(target, data, config, events);
or
var cX = new CanvasXpress({renderTo: target,
data: data,
config: config,
events: events});
The function takes either one or four arguments which I will explain in detail. Briefly, target is the id of the element in the DOM tree with the tag name <canvas> where the graph will be render to, data is a json object with the data you want to plot, config refers to a json object to customize the graph and events is a json object with user-defined mouse events. If the function is called with a single argument then it must consist of an object with the properties renderTo, data, config and events which are in essence the same four arguments described above. So now, let me ellaborate some more.
Arguments
The parameter target is the id of the element in the DOM with the tag name <canvas>. If it is undefined, a new element is inserted in the document body.
A json object with the data you want to plot. There are six different data formats. One for the genome browser, one for the networks, one for the Venn diagramas, one for the correlation plots, one for the stock market data and one for all the other graphs.
I'll start first with the last one which is used for the following graphs: bar graphs, line graphs, bar-line combination graphs, boxplots, dotplots, area graphs, stacked graphs, stacked-line combination graphs, percentage-stacked graphs, percentage-stacked-line combination graphs, heatmaps, heatmaps, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots and pie charts.
The data structure can be conceptually represented like this:
..........................
. .
. Samp Annotations (x) .
..........................
..... ..........................
. . . .
. V . . .
. a . . .
. r . . .
. . . .
. A . . .
. n . . .
. n . . .
. o . . Data (y) .
. t . . .
. a . . .
. t . . .
. i . . .
. o . . .
. n . . .
. s . . .
. . . .
.(z). . .
. . . .
..... ..........................
Suffice to say that any plotting apply to variables and samples, one or many. All data that I have ever analyzed can be divided into three compartments. The (y) compartment which contains the actual numerical values, the (x) compartment which contains characteristics of the samples (these are in statistics terms called factors), and the (z) compartment which contains annotations for the variables. That is not to say however that you always have to have all these compartments but in most cases you do. Another point is that the (y) compartment could be multi-dimensional depending on the granularity of the data. For example rather than having the raw data, you may have the average and the standard deviation for variables measured in a particular set of samples, or for example, with stock market data you may have the open, low, high, close and volume for a stock (variable) on a given day (sample). I'll keep it simple for now and I'll start with raw data.
In json format the data is like this:
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR'],
Category: ['A', 'A', 'B', 'C', 'D', 'C']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]},
t: {vars: '((Gene6:0.2,Gene3:0.3):0.2,((Gene1:0.25,(Gene4:0.15,Gene2:0.3):0.2):0.3,Gene5:0.7):0.1)',
smps: '((Smp2:0.8,(Smp4:0.7,((Smp1:0.6,(Smp6:0.2,Smp5:0.1):0.2):0.15,(Smp8:0.15,Smp3:0.05):0.1):0.15):0.2):0.05,Smp7:0.9)'}}
What???? This seems to be more complicated than what I just
said. Not quite, let's see the (y) property in the data object
first. It has 4 properties, (vars), which are the name of the
variables, Gene1, Gene2, etc; (smps), which are the name of the
samples, Smp1, Smp2, etc; (desc) which is the description of the
(data), Intensity in this case, which is the fourth
property. The (data) property is a two dimensional array which
is the actual data which pretty much matches the initial
explanation. If you disregard the rest of the properties in the
data object then you would have the minimum set that yo need to
provide to use this library, (of course you would not take
advantage of all the cool stuff). Now the (x) property contains
extra annotations for the samples (besides their names) and the
(z) property contains extra anotations for the variables
(besides their names). Let me briefly reiterate, the (y)
compartment contains the actual numerical data in a two
dimensional array (data) for six variables and eight samples,
the variable names in an array (vars), the sample names in an
array (smps). The (y) compartment also contains a description
(desc) of the numerical data which in this case is
'Intensity'. That is, the 'Intensity' for 'Gene1' in 'Smp1' is
10. The (x) compartment contains sample annotations, for example
'Smp1' is a 'Kidney' sample from donor 'D1' taken at
'1hour'. The (z) compartment contains the variable annotations,
for example 'Gene1' has the symbol 'ABC' and belongs to the
category 'A'.
You probably also noticed that there is also
a (t) property in the data which is used to specify the
dendrograms or trees for the variables (vars) and/or for the
samples(smps) using the newick format. This is an optional
property so those who do not have biological background can
breath again.
In the case of bar-line combination graphs the data structure have an additional property called (a) to identify the samples that will be plotted in each axis, 'axis1' and 'axis2'. Also the property (desc) will have an extra element so the data plotted in each axis can be described. That is, one to describe the values in 'axis1' and one to describe the values in 'axis2'. So the data in json format will be like this:
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR'],
Category: ['A', 'A', 'B', 'C', 'D', 'C']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity', 'Normalized Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]},
a: {axis1: ['Gene1', 'Gene2', 'Gene3'],
axis2: ['Gene4', 'Gene5', 'Gene6']}}
So going back to a previous point, what if you have multidimentional data? Conceptually you could represent it like this:
..........................
. .
. [Outliers (out)] .
.......................... .
. . .
. 3rd IQR (iqr3) . .
.......................... . .
. . . .
. 1st IQR (iqr1) . . .
.......................... . . .
. . . . .
. 3rd Quantile (qtl3) . . . .
.......................... . . . .
. . . . . .
. 1st Quantile (qtl1) . . . . .
.......................... . . . ...
. . . . . .
. N (n) . . . . .
.......................... . . . ...
. . . . . .
. Std Deviation (stdev) . . . . .
..... .......................... . . . ...
. . . . . . . .
. V . . . . . . .
. a . . . . . . .
. r . . . . . ...
. . . . . . .
. A . . . . . .
. n . . . . . .
. n . . . . ...
. o . . Mean (mean) . . .
. t . . or . . .
. a . . Median (median) . . .
. t . . . ...
. i . . . .
. o . . . .
. n . . . .
. s . . ...
. . . .
.(z). . .
. . . .
..... ..........................
..........................
. Samp Annotations (x) .
..........................
(I hope you are impressed with my artistic ability to represent an staggered collection of data sets using ASCII characters)
An example of multidimensional data for wich you have the mean (mean), the standard deviation (stdev) and the number of measurements (n) in json format would look like this:
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1'],
Time: ['1hour', '1hour', '2hour', '2hour']},
z: {Symbol: ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR'],
Category: ['A', 'A', 'B', 'C', 'D', 'C']},
y: {vars: ['Gene1', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4'],
desc: ['Intensity'],
mean: [[1, 2, 3, 4], [2, 1, 3, 6], [3, 2, 1, 5], [4, 2, 1, 3], [4, 3, 2, 1], [9, 2, 7, 4]],
stdev: [[1, 3, 2, 1], [2, 3, 2, 1], [2, 2, 2, 1], [2, 3, 1, 1], [1, 1, 1, 1], [3, 1, 3, 1]],
n: [[4, 5, 5, 5], [4, 5, 5, 5], [6, 4, 4, 5], [6, 4, 5, 6], [5, 5, 5, 5], [6, 5, 5, 5]]}}
I really hope it is clear and you got it since I will explain the next data format.
The data format for the correlation plots is as follows:
{y: {smps: ['Smp1', 'Smp2', 'Smp3', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
cor: [[ 1.0, 0.9, 0.4, -0.4, -0.6, -0.4, -0.7, -0.7],
[ 0.9, 1.0, 0.3, -0.3, -0.6, -0.4, -0.7, -0.6],
[ 0.4, 0.3, 1.0, -0.4, -0.8, -0.5, 0.2, -0.6],
[-0.4, -0.3, -0.4, 1.0, 0.1, 0.3, 0.1, 0.7],
[-0.6, -0.6, -0.8, 0.1, 1.0, 0.6, 0.3, 0.7],
[-0.4, -0.4, -0.5, 0.3, 0.6, 1.0, 0.3, 0.5],
[-0.7, -0.7, 0.2, 0,1 0,3, 0,3, 1.0, 0.5],
[-0.7, -0.6, -0.6, 0.7, 0.7, 0.5, 0.5, 1.0]]}}
As you can see this is just an extension of the previous format in which the correlation between samples (in this case) is represented in a two dimensional array under the property (cor). In fact if you try to plot a correlation plot and you don't have the (cor) property, canvasXpress will do it for you as long as you provide the raw data. Neeeexxxxxt ...
The format for the data for the Venn diagrams with four groups is as follows:
{venn: {data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148},
legend: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'}}}
This format contains the property (venn) where the data is organized. The (data) property contains the actual data and the (legend) property the different lists in the Venn diagram. The basic idea here is that in this case there are four lists, A, B, C, and D so you just have to assign a number to each one and also to any combination of them but they must be in alphabetical order; that is, they have to be 'AB' rather than 'BA'. If you have only three lists then you only have to assign numbers to A, B and C; if you have two list then you only have to assign numbers to A nad B.
The data format for the networks (or pathways) is as follows:
{nodes: [{id: 'Gene', color: 'rgb(255,0,0)', shape: 'square', rotate: 1.5, size: 1},
{id: 'SNP', color: 'rgb(0,255,0)', shape: 'rectangle', width: 10, height: 20},
{id: 'Pheno', color: 'rgb(0,255,255)', shape: 'triangle', size: 1}],
edges: [{id1: 'Gene', id2: 'SNP', color: 'rgb(51,102,255)', width: '1', type: 'line'},
{id1: 'Gene', id2: 'Pheno', color: 'rgb(51,102,255)', width: '1', type: 'arrowHeadLine'},
{id1: 'SNP', id2: 'Pheno', color: 'rgb(51,102,255)', width: '1', type: 'arrowHeadLine'}],
legend: {nodes: [],
edges: [],
text: []}
The (nodes) property contains as it name indicates the nodes in the network. Each node must have a unique (id) property. Also, (color), (shape), (rotate), (pattern), (outline), (outlineWidth) and either (size) or (width) and (height) can be specified for each node. The (color) property is specified in an rgb format compatible with the <canvas> element. The (shape) must be one of the shapes in this library (see the options section). The rotation for the shape must be expressed in degrees. The (pattern) is either 'closed' or 'open'. The (size) is a multiplier and not the actual size of the node, for example, to make a node twice as big, the size should be set to 2. If you need more control over the shape then you need to specify (width) and (height). The (edges) property as you can imagine, contains the info for the edges in the network. Each edge must contain an (id1) and an (id2) properties which must match two nodes in the network. Similarly, you can specify the (color), the (width), which is the actual width of the line, the (cap) which could be 'butt', 'round' or 'square' and the line (type) which should be one of the types in this library (see the options section). The property (legend) is an object that contains the information for the nodes and edges and additional text.
Each node may have one parent under the property 'parentNode' and it has to match a valid node id. This feature is useful if you want to group nodes together. You can assign a name and / or a label to each node. The order in which the text will be displayed is label or name or id.
The data format for the candlesticks plots (Market data) is as follows:
{market: [{symbol: 'BMY',
data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
[20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
[20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
[20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
[20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
[20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
[20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
[20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
[20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
[20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
[20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
[20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
[20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
[20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
[20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
[20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
[20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
[20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
[20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
[20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
[20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
[20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
[20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
[20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
[20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
[20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
[20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
[20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]}
I guess this is self eveident, it is the same format you download data from Yahoo except that the hyphens in the date are stripped. Also, you can add many symbols too.
And finally the last data format used for the genome browser is probably the most elaborated. This is the json data structure:
{tracks: [{name: 'Affy Probes',
type: 'box',
connect: true,
fill: 'rgb(255,255,51)',
line: 'rgb(0,0,0)',
data: [{id: '123456_at', dir: 'right', data: [[100,120], [123,132], [141,160]]},
{id: '234567_at', dir: 'left', data: [[181,200], [211,230], [251,270]]},
{id: '345678_at', dir: 'right', data: [[281,300], [311,330], [351,370]]}]},
{hide: true,
type: 'bar',
height: 20,
fill: ['rgb(255,0,0)', 'rgb(0,0,255)', 'rgb(255,255,0)'],
line: ['rgb(255,0,0)', 'rgb(0,0,255)', 'rgb(255,255,0)'],
data: [{id: '123456_at', data: [100,25,35,46]},
{id: '234567_at', data: [181,80,45,10]},
{id: '345678_at', data: [281,65,46,29]}]},
{name: 'Tissue Distribution (Heart, Liver, Kidney)',
hide: false,
type: 'heatmap',
autowidth: true,
height: 20,
line: 'rgb(0,0,0)',
smps: ['Heart', 'Kidney', 'Liver'],
data: [{id: '123456_at', data: [100,25,35,46]},
{id: '234567_at', data: [181,80,45,10]},
{id: '345678_at', data: [281,65,46,29]}]},
{name: 'SNP',
type: 'triangle',
fill: 'rgb(100,0,0)',
line: 'rgb(0,0,0)',
data: [{id: 'SNP123', data: 123},
{id: 'SNP234', data: 145},
{id: 'SNP789', data: 220}]},
{name: 'SNP',
type: 'line',
line: 'rgb(0,255,0)',
data: [{id: 'SNP123', data: 123},
{id: 'SNP234', data: 145},
{id: 'SNP789', data: 220}]},
{type: 'sequence',
subtype: 'DNA',
hide: true,
line: 'rgb(255,255,255)',
data: [{id: 'SNP123', data: [119,'AGCT[TA]CGAG']},
{id: 'SNP234', data: [141,'ATCG[TG]AATA']},
{id: 'SNP789', data: [216, 'GCCC[CT]AGGG']}]}]}
If you are not in the biology field please skip this data format since I will assume a general understanding of some terms. If you are stubborn enough to continue reading or you do have the biology background then look at the genome example so you can figure out how to format the data. The property (tracks) is an array with the tracks you want to represent in a region of the genome. They can be of six different (type)s, box, bar, heatmap, triangle, line and sequence. The sequence type can be of (subtype) 'DNA' or 'Protein'. You may specify the color of the shapes with the property (fill) for the inside of the shape and (line) for the edge of the shape. Only in the track type 'bar', the (fill) and the (line) properties are represented as an array of colors so you can assign each bar different colors. The (tracks) may have a (name) which will be used as the title for the track but you can use the property (hide) to prevent displaying it. This is useful in some cases to save landscape as well as to make closer elements in adjacent tracks. You may also specify the height of the track with the property (height) but if you do not, it will take the default value (see the options section). Finally you can add as many propertys as you please in each track if you need to access them for a click or mouseover event (see the event section).
First, the 'box' type can have many features specified in its (data) property as an array and each one of them may have many segments specified in its corresponding (data) property as a nested array. The segments can be displayed connected or not with the property (connect) which is boolean and is specified at the track level. That is, if it is true all the segments in each of the features in the track will be connected using a slanted line with their apexes in the middle between the adjacent segments. Also, each feature must have a unique (id) in the track, that is, it is not necessary to have a unique id among all the tracks, and it may have an orientation represented as an arrow which can be specified with the property (dir) which could be right or left. As I mentioned, the segments in each feature are an array with the first element representing the coordinate for the starting point and the second element with the coordinates for the ending point in the genome. Similar you can add many more propertys as you please if you need to make use of them for mouse events (see the event section).
The 'bar' and the 'heatmap' types, similarily, may have many features specified in its (data) property represented as an array. Each feature identified with a unique (id) may have many values identified in its corresponding (data) property also represented as an array. The first element of the array is the coordinates for the feature in the genome, the rest of the elements will be y values for the bar graphs or for the heatmap. In the case of the type 'bar', you may specify a (width) for the 'bar' at the track level or you may specify (autowidth) and in that case the width of the bar will be a unit of the base pair in the genome. That is, if you have three bars the width of each bar is going to be a third of a base pair. The only difference for the 'heatmap' type is that the bars will be stacked and the colors will be automatically assigned according to the y alues.
The 'triangle' and the line types are also very similar except that each feature will have a property data to identify the coordinates for it in the genome.
Finally, the 'sequence' type may also have many features. The only difference in the structure of the data is that in each feature's data structure, the first element represent the coordinates in the genome and the second element is the actual sequence. If there are multiple alleles at a given position then the sequence is represented in square brackets, for example, [AG].
Pretty much everything in this library is customazible. The configuration parameters are divided in sections. The first column has the name of the parameter on top and its type (in squegly brackets) followed by the default value at the bottom. The second column has the description for the parameter on top and the options (if applicable) at the bottom. The parametes in the grey background are private and are not modifiable.... but they could.
|
acknowledgementIcon
{option} cx.png
|
Acknowledge canvasXpress icon
|
|
acknowledgementIconPosition
{option} outside
|
Acknowledge canvasXpress icon position
|
|
acknowledgment
{boolean} false
|
Acknowledge canvasXpress
|
|
autoAdjust
{boolean} true
|
Flag to automaticaly adjust the size of the canvas in most visualizations. If set to 'false' you can easily adjust the rows and columns in the heatmap visualizations
|
|
autoAdjustMax
{integer} 3
|
Number of times to try to automaticaly adjust the size of the canvas when autoAdjust is true
|
|
autoAdjustXTries
{integer}
|
Counter to try to automaticaly adjust the horizontal size of the canvas when autoAdjust is true
|
|
autoAdjustYTries
{integer}
|
Counter to try to automaticaly adjust the vertical size of the canvas when autoAdjust is true
|
|
background
{color} rgb(255,255,255)
|
Background color for the canvas.
|
|
backgroundGradient1Color
{color} rgb(0,0,200)
|
The first color of the gradient if the background is a type of gradient.
|
|
backgroundGradient2Color
{color} rgb(0,0,36)
|
The second color of the gradient if the background is a type of gradient.
|
|
backgroundImage
{url} false
|
Url for the background image
|
|
backgroundType
{option} solid
|
Type of background for the canvas. The canvas may have a window for plotting the data which may be a gradient, a solid pattern or an image.
|
|
backgroundVideo
{url} false
|
Url for the background video
|
|
backgroundWindow
{color} rgb(204,204,204)
|
Background color of the canvas window when the background type is a type of window.
|
|
backgroundWindowGradient1Color
{color} rgb(0,0,200)
|
The first color of the gradient if the background is a type of window gradient.
|
|
backgroundWindowGradient2Color
{color} rgb(0,0,36)
|
The second color of the gradient if the background is a type of window gradient.
|
|
backgroundWindowGradientOrientation
{string} vertical
|
The orientation for the gradient if the background type is windowGradient or windowGradient2.
|
|
canvasBox
{boolean} true
|
Flag to create a box around the canvas
|
|
canvasBoxColor
{color} rgb(0,0,0)
|
Color for the box around the canvas
|
|
foreground
{color} rgb(0,0,0)
|
Foreground color for the canvas
|
|
foregroundWindow
{color} rgb(0,0,0)
|
Foreground color of the canvas window when the background type is a type of window.
|
|
functions
{array}
|
Functions exposed to the api
|
|
gradient
{boolean} false
|
Flag used to apply gradients to all elements ploted in the visualizations according to their corresponding color
|
|
gradientOrientation
{option} vertical
|
The orientation for the gradient if the background type is windowGradient or windowGradient2.
|
|
gradientRatio
{float} 1.3
|
Ratio used to generate the linear gradients applied to all elements in the visualizations
|
|
gradientType
{option} radial
|
Type of patern used for the gradients applied to all elements in the visualizations
|
|
graphOrientation
{option} horizontal
|
Orientation of the graph when plotting one dimensional graphs
|
|
graphType
{option} Bar
|
Type of graph
|
|
margin
{integer} 5
|
Length in pixels for the distance between many areas in the graphs
|
|
marginBottom
{integer}
|
Length in pixels for the bottom margin in the canvas
|
|
marginLeft
{integer}
|
Length in pixels for the left margin in the canvas
|
|
marginRight
{integer}
|
Length in pixels for the right margin in the canvas
|
|
marginTop
{integer}
|
Length in pixels for the top margin in the canvas
|
|
shadowBlur
{integer} 2
|
Amount in blur for the shadow.
|
|
shadowColor
{color} rgba(0,0,0,0.5)
|
Color for the shadow.
|
|
shadowOffsetX
{integer} 3
|
Length in pixels for the shadow offset in the X axis.
|
|
shadowOffsetY
{integer} 3
|
Length in pixels for the shadow offset in the Y axis.
|
|
showGraph
{boolean} true
|
Flag to show the graph
|
|
showShadow
{boolean} false
|
Flag used to add shadows to all element in the canvas. It will be forced to false if the browser is IE.
|
|
transparency
{float} null
|
Percentage of transparency applied to all elements in the visualiztionss
|
|
useFlashIE
{boolean} true
|
Flag to use flash in IE rather than VML (through excanvas.js)
|
|
videoAutoplay
{boolean}
|
Flag to autoplay videos default true
|
|
videoClassName
{string} video-js vjs-default-skin
|
Video class name / css for videos
|
|
videoColor
{color} rgb(255,0,0)
|
Color for the video grid and current time
|
|
videoControls
{boolean}
|
Flag to show controls in videos default true
|
|
videoCurrentTime
{boolean} false
|
Flag to show video current time
|
|
videoGrid
{boolean} false
|
Flag to show grid in video
|
|
videoGridStep
{int} 10
|
Number of steps to divide the grid in the video
|
|
videoLoop
{boolean}
|
Flag to loop videos default false
|
|
videoPlaybackRate
{float} 1
|
Video Playback Rate
|
|
videoPoster
{url} false
|
Video poster for videos
|
|
videoPreload
{option} {}
|
Data for videos @cfg {string object} videoData
|
|
align
{option} center
|
Default horizontal alignment for drawing text.
|
|
autoScaleFont
{boolean} true
|
Flag to automatically adjust the font size in many visualization. Please be aware that scaling factors can still modify the font size. This flag needs to be false for the text to accept the specified font size.
|
|
baseline
{option} right
|
Default vertical alignment for drawing text.
|
|
font
{font} Verdana, sans-serif 12pt
|
The combination of font name style and size.
|
|
fontName
{font} Verdana, sans-serif
|
Font name. It will be set depending on the browser. It could be Optimer, Helvetiker, Gentilis or Verdana, sans-serif
|
|
fontSize
{integer} 12
|
Font size for text in complex plot only. See other categories to modify specific font sizes.
|
|
fontStyle
{option} false
|
Font style. Not implemented yet.
|
|
fonts
{array}
|
Font name. It will be set depending on the browser. It could be Optimer, Helvetiker, Gentilis or Verdana, sans-serif
|
|
maxTextSize
{integer} 14
|
Maximum size for any text in the canvas.
|
|
minTextSize
{integer} 4
|
Minimum size for any text in the canvas.
|
|
scaleTextConstantAdd
{float} 2.5
|
Constants to autoscale text (extra)
|
|
scaleTextConstantMult
{integer} 40
|
Constants to autoscale text
|
|
citation
{string} false
|
A reference citation of the graph which is placed at the bottom right corner
|
|
citationColor
{color} rgb(0,0,0)
|
Color for a reference citation of the graph
|
|
citationFont
{font}
|
Font for the reference citation
|
|
citationScaleFontFactor
{float} 1
|
Scaling factor used to increase or decrease citation font size in the canvas
|
|
smpTitleFontSize
{integer} 6
|
Size for the text of the reference citation of the graph
|
|
subtitle
{string} rgb(0,0,0)
|
Title of the graph.
|
|
subtitleHeight
{integer} 16
|
Height for the subtitle of the graph. The font height will be adjusted automatically to fit in the canvas.
|
|
title
{string} false
|
Title of the graph.
|
|
titleColor
{color} rgb(0,0,0)
|
Color for the subtitle
|
|
titleHeight
{integer} 30
|
Height for the title of the graph. The font height will be adjusted automatically to fit in the canvas.
|
|
arrowPointSize
{integer} 10
|
Size in pixels of the arrow head in arrow lines.
|
|
capType
{option} butt
|
Default type of cap for lines.
|
|
colorHSV
{array}
|
Color HSV. Hue, Saturation and Value used in the configurator
|
|
colorRGB
{array}
|
Color RGB. Red, Green, Blue used in the configurator
|
|
colorScheme
{option} basic
|
Color schemes can be user defined which will take the colors in the color property or one provided in canvasXpress. The order of the colors will be used to sequentially select when a different color is needed in a particular visualization.
|
|
colors
{array} colors
|
Colors.
|
|
dashLength
{integer} 8
|
Size in pixels of the length of the dashes and the separation between the dashes in the dashed lines.
|
|
dotLength
{integer} 1
|
Size in pixels of the length between dots in the doted lines.
|
|
evenColor
{color} rgb(240,240,240)
|
The color for the even numbers in samples or sequences
|
|
images
{array} []
|
Array of urls of images used in scatter plots.
|
|
lines
{array}
|
Line types available network graphs The patterns can be: '', 'dashed', 'dotted', 'bezierY', 'bezierX' and 'curved'. The end could be: 'arrow', 'arrowHead', 'arrowTail', 'arrowHeadSquareTail', 'arrowTailSquareHead', 'square', 'squareHead', 'squareTail', 'squareHeadArrowTail' or 'squareTailArrowHead'.
|
|
oddColor
{color} background color
|
The color for the odd numbers in samples or sequences
|
|
outlineWidth
{integer} 1
|
Default width in pixels for the lines
|
|
shapes
{array}
|
Shapes used in network graphs
|
|
sizes
{array}
|
Sizes used invisualizations
|
|
timeFormat
{option} isoDate
|
Time Format according to date.format.js Steven Levithan
|
|
filterSmpBy
{filter} []
|
Filter samples by their annotation included in the 'data.x' object used in one dimensional plots
|
|
highlightSmp
{array} []
|
Name of samples in the 'data.y' object to highlight.
|
|
maxSmpStringLen
{integer} 50
|
Maximum length in characters a sample label or description can have so anything above is truncated.
|
|
showSampleNames
{boolean} true
|
Flag to show the sample names in one dimensional plots.
|
|
smpHighlightColor
{color} rgb(255,0,0)
|
The color for the higlighted samples.
|
|
smpLabelCircular
{boolean} false
|
Flag to show the sample names in a circular orientation in circular plots.
|
|
smpLabelColor
{color} foreground color
|
Font color for the sample labels in one dimensional plots
|
|
smpLabelDescription
{string} false
|
Sample label description is a valid sample classification included in the 'data.x' object used in heatmaps
|
|
smpLabelFont
{font}
|
Font for the sample labels in one dimensional plots
|
|
smpLabelFontSize
{integer} 10
|
Size for the sample labels in one dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the sample label scaling factor
|
|
smpLabelInterval
{integer} 1
|
Interval for the sample labels in one dimensional plots
|
|
smpLabelRotate
{integer}
|
Rotation for sample labels in degrees. It could be positive or negative.
|
|
smpLabelScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease sample label font size in the canvas.
|
|
smpTitle
{string} false
|
Title for the sample axis in one dimensional plots
|
|
smpTitleColor
{color} foreground color
|
Font color for the sample title in one dimensional plots
|
|
smpTitleFont
{font}
|
Font for the sample title in one dimensional plots
|
|
smpTitleFontSize
{integer} 10
|
Size for the sample title in one dimensional plots
|
|
smpTitleScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease sample title font size in the canvas
|
|
filterVarBy
{filter} []
|
Filter variables by their annotation included in the 'data.z' object used in one dimensional plots
|
|
highlightVar
{array} []
|
Name of variables in the 'data.y' object to highlight.
|
|
maxVarStringLen
{integer} 30
|
Maximum length in characters a variable label or description can have so anything above is truncated.
|
|
showVariableNames
{boolean} true
|
Flag to show the variable names in one dimensional plots
|
|
varHighlightColor
{color} rgb(255,0,0)
|
The color for the highlighted variables.
|
|
varLabelColor
{color} foreground color
|
Font color for the variable labels in one dimensional plots
|
|
varLabelDescription
{string} false
|
Variable label description is a valid sample classification included in the 'data.z' object used in heatmaps
|
|
varLabelFont
{font}
|
Font for the variable labels in one dimensional plots
|
|
varLabelFontSize
{integer} 10
|
Size for the variable labels in one dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the variable label scaling factor
|
|
varLabelInterval
{integer} 1
|
Interval for the variable labels in heatmaps
|
|
varLabelRotate
{integer}
|
Rotation for variable labels in degrees It could be positive or negative.
|
|
varLabelScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease variable font size in the canvas.
|
|
varTitle
{integer} 10
|
Title for the sample axis in one dimensional plots
|
|
varTitleColor
{color} foreground color
|
Font color for the variable titles in one dimensional plots
|
|
varTitleFont
{font}
|
Font for the variable titles in one dimensional plots
|
|
varTitleFontSize
{integer} 10
|
Size for the variable title in one dimensional plots
|
|
varTitleLabelOverlayPosition
{option} bottom
|
Position for variable labels in heatmaps
|
|
varTitleScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease variable font size in the canvas.
|
|
overlayFont
{font}
|
Font for the overlays in one dimensional plots
|
|
overlayFontColor
{color} foregroung color
|
Color for the overlays in one dimensional plots
|
|
overlayFontSize
{integer} 6
|
Font size for the overlays in one dimensional plots
|
|
overlayScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease overlays font size in the canvas in one dimensional plots
|
|
overlaysWidth
{integer} 30
|
Length in pixels of the width for the colored boxes to clasify samples and or variables in one dimensional plots
|
|
showLevelOverlays
{boolean} true
|
Flag to indicate to show or not the level overlays in one dimensional plots
|
|
showOverlays
{boolean} true
|
Flag to indicate to show or not the overlays in one dimensional plots
|
|
smpOverlayRecycleColors
{boolean} false
|
Flag to indicate to recycle sample overlay colors with each overlay
|
|
smpOverlays
{array} []
|
Sample annotations included in the 'data.x' object used in one dimensional plots
|
|
varOverlayRecycleColors
{boolean} false
|
Flag to indicate to recycle variable overlay colors with each overlay
|
|
varOverlays
{array} []
|
Variable annotations included in the 'data.z' object used in one dimensional plots
|
|
legendBackgroundColor
{color} background color
|
Color for the legend background
|
|
legendBox
{boolean} true
|
Flag to create a box around the legend
|
|
legendBoxColor
{color} rgb(0,0,0)
|
Color for the box around the legend
|
|
legendColor
{color} foregroung color
|
Color for the legends
|
|
legendFont
{font}
|
Font for the legends
|
|
legendFontSize
{integer} 10
|
Font size for the legends. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the legend scaling factor
|
|
legendPosition
{option} right
|
Position for the legend in the graphs
|
|
legendScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease legend font size in the canvas.
|
|
showLegend
{boolean} true
|
Flag to show or not the legend in the graphs
|
|
indicatorsPosition
{option} bottom
|
Position for the color, shape and size indicators in several visualizations
|
|
showIndicators
{boolean} true
|
Flag to show color, shape and size indicators in several visualizations
|
|
decorationFont
{font}
|
Font for the decoration in scatter plots and network graphs
|
|
decorationFontSize
{font} 10
|
Font size for the decorations in scatter plots and network graphs
|
|
decorationScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease decoration font size in the canvas.
|
|
decorations
{array} []
|
Name of the node properties to include in the network decorations in the 'data.nodes' object
|
|
decorationsColor
{color} foreground color
|
Color for the decorations in scatter plots and network graphs
|
|
decorationsColors
{array} []
|
Array of colors used for selection in network decorations not to be confused by its singular form 'decorationsColor' above
|
|
decorationsHeight
{integer} 20
|
Length in pixels of the height for the decorations in the networks
|
|
decorationsPosition
{option} bottom
|
Position for the decorations in scatter plots and network graphs
|
|
decorationsProperties
{object} {}
|
Object to assign properties like color for the network decorations
|
|
decorationsType
{option} bar
|
Type for the decorations in the networks. The types stacked and stackedpercent must be two dimensional. Heatmap could be one or two dimensional
|
|
decorationsWidth
{integer} 10
|
Length in pixels of the width for the decorations in the networks
|
|
showDecorations
{boolean} false
|
Flag to show or not extra decorations like (regression lines, splines, etc) in scatter plots and (heatmaps, pie charts or stacked bar graphs in) network graphs
|
|
axisTickColor
{color} foregroung color
|
Color for the axis ticks in one and two dimensional plots
|
|
axisTickFont
{font}
|
Font for the axis ticks in one and two dimensional plots
|
|
axisTickFontSize
{integer} 10
|
Font size for the axis ticks in one and two dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the tick scaling factor
|
|
axisTitleColor
{color} foregroung color
|
Color for the axis title in one and two dimensional plots
|
|
axisTitleFont
{font}
|
Font for the axis titles in one and two dimensional plots
|
|
axisTitleFontSize
{integer} 10
|
Font size for the axis titles in one and two dimensional plots. Be aware that auto scaling font must be turned off for this property to take effect. A more convenient way to modify the size is to use the axis title scaling factor
|
|
axisTitleScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease title font size in the canvas in one and two dimensional plots
|
|
tickRotate
{integer}
|
Rotation for graph ticks in degrees. It could be positive or negative.
|
|
tickScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease tick font size in the canvas in one and two dimensional plots
|
|
groupingFactors
{array} []
|
An array that holds the group names used for grouping the data. It must be a category in the 'data.x' object
|
|
isBoxPlotCalc
{boolean}
|
Flag to indicate if the iqr has been calculated if the graph type is Boxplot.
|
|
isGraphTime
{boolean} false
|
Flag to indicate if the data is a time series so ther is no need to plot every time interval
|
|
isGroupedData
{boolean}
|
Flag to indicate if the data is grouped.
|
|
isLogData
{boolean} false
|
Flag to indicate if the data is Log transformed.
|
|
isMarketDataFormated
{boolean}
|
Flag to indicate if the data has been formated to display Candlestick.
|
|
isMarketSwitched
{boolean}
|
Flag to indicate if the data is a Candlestick.
|
|
isTransformedData
{boolean}
|
Flag to indicate if the data is transformed.
|
|
missingDataColor
{color} rgb(255,255,0)
|
Color for the missing data
|
|
randomData
{boolean} false
|
Flag to create or not random data for debug and demonstraion purposes
|
|
randomDataMean
{integer} 100
|
Mean value when creating random data
|
|
randomDataSampleAnnotationRatio
{integer} 2
|
Approximate number of classes in each sample annotation when creating random data
|
|
randomDataSampleAnnotations
{integer} 3
|
Default number of sample annotations when creating random data
|
|
randomDataSamples
{integer} 50
|
Default number of samples when creating random data
|
|
randomDataSigma
{integer} 100
|
Sigma value when creating random data
|
|
randomDataVariableAnnotationRatio
{integer} 2
|
Approximate number of classes in each variable annotation when creating random data
|
|
randomDataVariableAnnotations
{integer} 2
|
Default number of variable annotations when creating random data
|
|
randomDataVariables
{integer} 50
|
Default number of variables when creating random data
|
|
randomMissingDataPercentage
{integer}
|
Default percentege of missing values when creating random data
|
|
ratioReference
{integer}
|
Default index of sample used in ratio transformation.
|
|
segregateSamplesBy
{option} false
|
String to indicate the annotation used to segregate the samples. It must be a category in the 'data.x' object
|
|
segregateVariablesBy
{option} false
|
String to indicate the annotation used to segregate the variables. It must be a category in the 'data.z' object
|
|
showErrorBars
{boolean} true
|
Flag to indicate whether to show or not error bars in the graphs.
|
|
smpSort
{integer}
|
Sample index used in sorting the data.
|
|
sortDir
{option} ascending
|
Default direction for data sorting.
|
|
tmpAsciiArray
{array}
|
A temporary array to enable sorting data asciibetically.
|
|
transformBase
{integer} 2
|
Default log or exponential transformation.
|
|
transformType
{option} false
|
Default transformation type.
|
|
varSort
{integer}
|
Variable index used in sorting the data.
|
|
zscoreAxis
{option} samples
|
Default axis to use to zsore the data.
|
|
panningGlobalX
{float}
|
Cumulative number of unit to pan the network in the X dimension
|
|
panningGlobalY
{float}
|
Cumulative umber of unit to pan the network in the Y dimension
|
|
panningStep
{float} 0.2
|
Percentage step for panning networks.
|
|
panningX
{float}
|
Number of unit to pan the network in the X dimension
|
|
panningY
{float}
|
Number of unit to pan the network in the Y dimension
|
|
zoom
{float} 1
|
Zoom factor for the networks. A number greater than zero
|
|
zoomGlobal
{float}
|
Cumulative zoom factor for the networks.
|
|
zoomSamplesDisable
{boolean} false
|
Flag to disable zooming of samples with mouse wheel in Heatmaps
|
|
zoomStep
{float} 0.2
|
Percentage step for zooming networks and genome panel.
|
|
zoomVariablesDisable
{boolean} false
|
Flag to disable zooming of variables with mouse wheel in Heatmaps
|
|
centerData
{boolean} false
|
Flag to indicate whether to center data when clustering
|
|
clusterAxis
{option} samples
|
Default axis to use when clustering data.
|
|
distance
{option} euclidian
|
Distance metric to use when clustering data.
|
|
imputeMethod
{option} mean
|
Imputation method for missing data when clustering
|
|
kmeansClusters
{integer} 3
|
Number of clusters when clustering data with kmeans.
|
|
linkage
{option} single
|
Linkage type to use when clustering data.
|
|
maxIterations
{integer} 10
|
Number of maximum iterations when clustering data with kmeans for one dimensional graphs or maximum number of iterations when calculating force direct layout networks.
|
|
useSmpVarIndexOnClustering
{boolean} false
|
Flag to indicate to use variable or sample index rather than names when clustering. This allows to use '(', ')' and ':' in the variable or sample name
|
|
axisExact
{boolean} false
|
Flag to force exact values for the data
|
|
axisExtension
{float} 0.1
|
Percentage to extend the values in the data
|
|
rAxisAbsMax
{float}
|
Maximum unfiltered value for the R axis
|
|
rAxisAbsMin
{float}
|
Minimum unfiltered value for the R axis
|
|
rAxisCurrent
{integer}
|
Index of the sample that is currently displayed displayed in the R axis
|
|
rAxisExact
{boolean} false
|
Flag to force exact values for the data in the R axis
|
|
rAxisMaxStrLength
{string}
|
Longest string for ticks in the R axis
|
|
rAxisMinorTicks
{boolean} false
|
A flag to show minor tick lines in the R axis
|
|
rAxisMinorValues
{array} []
|
Values for the minor ticks in the R axis
|
|
rAxisShow
{boolean} true
|
Flag to show on not the values of the ticks in the R axis
|
|
rAxisTickColor
{color} rgb(204,204,204)
|
Color for the tick lines in the R axis
|
|
rAxisTickFormat
{string} false
|
Format for the tick values in the R axis
|
|
rAxisTickStyle
{option} solid
|
Style for the tick lines in the R axis
|
|
rAxisTicks
{integer} 5
|
Number of ticks in the R axis
|
|
rAxisTitle
{string} false
|
Title for the R axis
|
|
rAxisTransform
{option} false
|
Tranformation for the values in the R axis.
|
|
rAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the R axis
|
|
rAxisValues
{array} []
|
Values for the ticks in the R axis
|
|
setMax
{float} null
|
Maximum value to set the data
|
|
setMax2
{float} null
|
Maximum value to set the data in the 2nd axis
|
|
setMaxR
{float} null
|
Maximum value to set the data in the R axis
|
|
setMaxX
{float} null
|
Maximum value to set the data in the X axis
|
|
setMaxY
{float} null
|
Maximum value to set the data in the Y axis
|
|
setMaxZ
{float} null
|
Maximum value to set the data in the Z axis
|
|
setMin
{float} null
|
Minimum value to set the data
|
|
setMin2
{float} null
|
Minimum value to set the data in the 2nd axis
|
|
setMinR
{float} null
|
Minimum value to set the data in the R axis
|
|
setMinX
{float} null
|
Minimum value to set the data in the X axis
|
|
setMinY
{float} null
|
Minimum value to set the data in the Y axis
|
|
setMinZ
{float} null
|
Minimum value to set the data in the Z axis
|
|
ticks
{integer} 50
|
Number of ticks in the genome browser
|
|
timeTicksFirst
{boolean} false
|
Flag to indicate whether to use the first date on a time graph or the last
|
|
timeValueIndices
{array} []
|
Array containig the indices of the values when the the graph is a time series
|
|
timeValues
{array} []
|
Array containig the tick values when the the graph is a time series
|
|
xAxis
{array} []
|
Name of the samples groups or variables to be displayed in the X axis
|
|
xAxis2
{array} []
|
Name of the samples groups or variables to be displayed in the 2nd X axis
|
|
xAxis2AbsMax
{float}
|
Maximum unfiltered value for the 2nd X axis
|
|
xAxis2AbsMin
{float}
|
Minimum unfiltered value for the 2nd X axis
|
|
xAxis2Exact
{boolean} false
|
Flag to force exact values for the data in the 2nd X axis
|
|
xAxis2MaxStrLength
{string}
|
Longest string for ticks in the 2nd X axis
|
|
xAxis2MinorTicks
{boolean} true
|
A flag to show minor tick lines in the 2nd X axis
|
|
xAxis2MinorValues
{array} []
|
Values for the minor ticks in the 2nd X axis
|
|
xAxis2Show
{boolean} true
|
Flag to show on not the values of the ticks in the second X axis
|
|
xAxis2TickFormat
{string} false
|
Format for the tick values in the second X axis
|
|
xAxis2Ticks
{integer} 5
|
Number of ticks in the 2nd X axis
|
|
xAxis2Values
{array} []
|
Values for the ticks in the 2nd X axis
|
|
xAxisAbsMax
{float}
|
Maximum unfiltered value for the X axis
|
|
xAxisAbsMin
{float}
|
Minimum unfiltered value for the X axis
|
|
xAxisCurrent
{integer}
|
Index of the sample that is currently displayed displayed in the X axis
|
|
xAxisExact
{boolean} false
|
Flag to force exact values for the data in the X axis
|
|
xAxisMaxStrLength
{string}
|
Longest string for ticks in the X axis
|
|
xAxisMinorTicks
{boolean} true
|
A flag to show minor tick lines in the X axis
|
|
xAxisMinorValues
{array} []
|
Values for the minor ticks in the X axis
|
|
xAxisShow
{boolean} true
|
Flag to show on not the values of the ticks in the X axis
|
|
xAxisTickColor
{color} rgb(204,204,204)
|
Color for the tick lines in the X axis
|
|
xAxisTickFormat
{string} false
|
Format for the tick values in the X axis
|
|
xAxisTickStyle
{option} solid
|
Style for the tick lines in the X axis
|
|
xAxisTicks
{integer} 5
|
Number of ticks in the X axis
|
|
xAxisTitle
{string} false
|
Title for the X axis
|
|
xAxisTransform
{option} false
|
Tranformation for the values in the X axis.
|
|
xAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the X axis
|
|
xAxisValues
{array} []
|
Values for the ticks in the X axis
|
|
yAxis
{array} []
|
Name of the samples groups or variables to be displayed in the Y axis
|
|
yAxisAbsMax
{float}
|
Maximum unfiltered value for the Y axis
|
|
yAxisAbsMin
{float}
|
Minimum unfiltered value for the Y axis
|
|
yAxisCurrent
{integer}
|
Index of the sample that is currently displayed displayed in the Y axis
|
|
yAxisExact
{boolean} false
|
Flag to force exact values for the data in the Y axis
|
|
yAxisMaxStrLength
{string}
|
Longest string for ticks in the Y axis
|
|
yAxisMinorTicks
{boolean} true
|
A flag to show minor tick lines in the Y axis
|
|
yAxisMinorValues
{array} []
|
Values for the minor ticks in the Y axis
|
|
yAxisShow
{boolean} true
|
Flag to show on not the values of the ticks in the Y axis
|
|
yAxisTickColor
{color} rgb(204,204,204)
|
Color for the tick lines in the Y axis
|
|
yAxisTickFormat
{string} false
|
Format for the tick values in the Y axis
|
|
yAxisTickStyle
{option} solid
|
Style for the tick lines in the Y axis
|
|
yAxisTicks
{integer} 5
|
Number of ticks in the Y axis
|
|
yAxisTitle
{string} false
|
Title for the Y axis
|
|
yAxisTransform
{option} false
|
Tranformation for the values in the Y axis.
|
|
yAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the Y axis
|
|
yAxisValues
{array} []
|
Values for the ticks in the Y axis
|
|
zAxis
{array} []
|
Name of the samples groups or variables to be displayed in the Z axis
|
|
zAxisAbsMax
{float}
|
Maximum unfiltered value for the Z axis
|
|
zAxisAbsMin
{float}
|
Minimum unfiltered value for the Z axis
|
|
zAxisCurrent
{integer}
|
Index of the sample that is currently displayed displayed in the Z axis
|
|
zAxisExact
{boolean} false
|
Flag to force exact values for the data in the Z axis
|
|
zAxisMaxStrLength
{string}
|
Longest string for ticks in the Z axis
|
|
zAxisMinorTicks
{boolean} false
|
A flag to show minor tick lines in the Z axis
|
|
zAxisMinorValues
{array} []
|
Values for the minor ticks in the Z axis
|
|
zAxisShow
{boolean} true
|
Flag to show on not the values of the ticks in the Z axis
|
|
zAxisTickColor
{color} rgb(204,204,204)
|
Color for the tick lines in the Z axis
|
|
zAxisTickFormat
{string} false
|
Format for the tick values in the Z axis
|
|
zAxisTickStyle
{option} solid
|
Style for the tick lines in the Z axis
|
|
zAxisTicks
{integer} 5
|
Number of ticks in the Z axis
|
|
zAxisTitle
{string} false
|
Title for the Z axis
|
|
zAxisTransform
{option} false
|
Tranformation for the values in the Z axis.
|
|
zAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the Z axis
|
|
zAxisValues
{array} []
|
Values for the ticks in the Z axis
|
|
blockContrast
{boolean} false
|
A flag to creates a shade between the samples so there are two backgrounds, one for the odd samples and one for the even samples.
|
|
blockFactor
{int} 1
|
Factor to adjust the size of the sample blocks in the one dimensional graphs. The default is 1. If you want to make the blocks wider then increase this parameter (2 is twice as big). This only works if the auto adjust property is set to 'false'
|
|
blockSeparationFactor
{int} 1
|
Factor to adjust the spacing between the sample blocks in the one dimensional graphs. The default is 1. If you want to make the blocks wider apart then increse this parameter (2 is twice as much). This only works if the auto adjust property is set to 'false'
|
|
is3DPlot
{boolean} false
|
Flag to create or not a 3D plot
|
|
plotByVariable
{boolean} false
|
Flag to indicate whether to group the data variable rather than by sample
|
|
seriesSeparationFactor
{float} 2
|
Factor to adjust the spacing between the series in the bar graphs
|
|
smpHairline
{option} dotted
|
This is a thin line that appears in the middle of the bar graphs just for aesthetics.
|
|
smpHairlineColor
{color} rgb(204,204,204)
|
The color for the thin line that appears in the middle of the bar graphs
|
|
smpHairlineWidth
{float} 0.3
|
The width for the thin line that appears in the middle of the sample block just for aesthetics.
|
|
showDataValues
{boolean} false
|
Flag to indicate whether to show data values in the one bar graphs.
|
|
coordinateLineColor
{boolean} true
|
Flag to used same color in BarLine plots. If set to true the color of the bars and the lines will be the same
|
|
lineDecoration
{option} sybol
|
Lines decorations in the line graphs
|
|
lineTickness
{float} 1
|
Thickness in pixels for line plots
|
|
lineType
{option} rect
|
Type of line used to join the points in line graphs
|
|
tension
{float} 0.3
|
Curvature for the splines
|
|
dotPlotDataPointRatio
{float} 2
|
Ratio to adjust the size of the data points when displaying original data in boxplots. The higher the number the smaller the data points
|
|
dotPlotDataPointTransparency
{float} 0.5
|
Fraction to adjust color transparency for the data points when displaying original data in boxplots.
|
|
dotPlotJitter
{boolean} false
|
Flag to jitter the point in dotplots
|
|
boxPlotOutliersRatio
{integer} 8
|
Ratio for the size of the outliers with respect to boxplot
|
|
showBoxplotOriginalData
{boolean} false
|
Flag to show original data in boxplots
|
|
areaIsCumulative
{boolean} false
|
Flag to treat area graphs as cumulative values
|
|
colorBy
{option} false
|
Name of a variable annotation or a sample name or the string 'variable' to color the variables.
|
|
outlineBy
{string} false
|
Name of the annotation for the outline when drawing a multidimensional Heatmap
|
|
shapeBy
{option} false
|
Name of a variable annotation or a sample name or the string 'variable' to shape the variables.
|
|
shapeByShape
{array} false
|
String that identify the shape to use in multidimensional heatmaps. shapeByData will take precedence over this property.
|
|
sizeBy
{option} false
|
Name of a variable annotation or a sample name or the string 'variable' to size the variables.
|
|
this
{string} false
|
String that identify the object containing a two dimensional array with values used to color the outline data points when drawing a multidimensional Heatmap. It must be located within the data.y object (for example: data.y.data4)
|
|
isSelectDataPoints
{integer}
|
Number of selected data points (in the data object).
|
|
scatterSeries
{option} y
|
Axis that contain the series in the scatter plots
|
|
scatterType
{option} false
|
Type of scatter plot
|
|
selectDataMode
{option} area
|
Type of mode to highliht selected data points
|
|
selectDataModeDescription
{option} false
|
Variable label to display when highlihting selected data points that must be in the 'data.z' object
|
|
selectDataPoint
{array} []
|
Ids of data points (in the data object) to select.
|
|
allVsAll
{boolean} false
|
Flag to plot an n-1 x n-1 matrix of 2D sccaterplots
|
|
allVsAllType
{option} both
|
Type for the n-1 x n-1 matrix of 2D sccaterplots
|
|
functionIntervals
{integer} 20
|
Number of intervals to use when drawing functions in the decorations
|
|
histogramBarWidth
{float} 0.5
|
Length in pixels for half of the bar width in the 2D sccaterplot histogram
|
|
histogramBins
{integer} 20
|
Number of bins in histogram
|
|
isCreateHistogram
{boolean} false
|
Flag to indicate there is a histogram
|
|
isHistogram
{boolean} false
|
Flag to convert the 2D scatter plot into a histogram. That is, the points in the scatter plot are converted to bars that start at the bottom of the Y axis. It is useful to represent proteomics spectra or histograms.
|
|
bar3DInverseWeight
{float} 1
|
Value for adjusting the thickness of 3D bars. The larger the value the the thinner the bar
|
|
cullingThreshold
{integer} 1000
|
Number of data point to start culling data
|
|
maxRotate
{float} false
|
Maximum number of degrees to rotate graph arround axes
|
|
minRotate
{float} false
|
Minimum number of degrees to rotate graph arround axes
|
|
rotationDelay
{integer} 100
|
Time in milliseconds to wait between rendering the plot when dragging the mouse.
|
|
rotationSensitivity
{integer} 45
|
Factor to adjust the sensitivity of the mouse when rotating the graph
|
|
rotationStep
{integer} 2
|
Number of degrees used when the plot is automatically rotated
|
|
show3DGrid
{boolean} true
|
Flag to show the X,Y,Z grid in scatter 3D plots
|
|
x3DRatio
{float} 1
|
Value between 0 - 1 for adjusting the 3D of the X Axis
|
|
xRotate
{float} 45
|
Number of degrees to rotate graph arround the X axis
|
|
y3DRatio
{float} 1
|
Value between 0 - 1 for adjusting the 3D of the Y Axis
|
|
yRotate
{float}
|
Number of degrees to rotate graph arround the Y axis
|
|
z3DRatio
{float} 1
|
Value between 0 - 1 for adjusting the 3D of the Z Axis
|
|
zRotate
{float}
|
Number of degrees to rotate graph arround the Z axis
|
|
heatmapType
{option} blue-red
|
Color shades for the heatmap. It could be red, blue, green, yellow, cyan, purple or any combination of two colors separated by a dash
|
|
indicatorCenter
{option} white
|
Color for the center of the heatmap indicator. If rainbow-red is specified the order of the colors to generate the gradient will be: red - blue - green. If rainbow-green is specified then the order of the colors to generate the gradient will be: green - blue - red. The option rainbow is an alias for rainbow-red.
|
|
indicatorHeight
{integer} 8
|
Length in pixels for the heatmap indicator
|
|
indicatorWidth
{integer} 1
|
Length in pixels for the heatmap indicator line width used for increase the size of the indicator
|
|
isMultidimensionalHeatmap
{boolean}
|
Flag to indicate if the heatmap is multidimensional
|
|
smpIndicesStart
{integer}
|
Number that indicates starting point for samples in heatmaps when the canvas is zoom in.
|
|
varIndicesStart
{integer}
|
Number that indicates starting point for variables in heatmaps when the canvas is zoom in.
|
|
correlationAnchorLegend
{boolean} false
|
Flag to show a region above the correlation plot that anchror a sample/variable to a position
|
|
correlationAnchorLegendAlignWidth
{integer} 40
|
Length in pixels of the height of the correlation anchor legend
|
|
correlationAxis
{option} samples
|
Axis used for the correlation.
|
|
correlationLabelInterval
{integer} 1
|
Interval for the sample or variable labels in the correlation plot
|
|
dendrogramColor
{color} rgb(204,204,204)
|
The color for the dendrograms
|
|
dendrogramHang
{boolean} false
|
Flag to show or not the nodes in the dendrogram as hanging or not similar to that one in R
|
|
dendrogramHeight
{boolean} false
|
Flag to size the branches of the dendrogram.
|
|
dendrogramSpace
{integer} 6
|
Length in pixels to space the branches in the dendrograms.
|
|
showSmpDendrogram
{boolean} false
|
Flag to show or not the sample dendrogram
|
|
showVarDendrogram
{boolean} false
|
Flag to show or not the variable dendrogram
|
|
smpDendrogramPosition
{option} left
|
Position for the sample dendrogram in the plot. It could be top, bottom, right or left depending on the orientation of the graph.
|
|
varDendrogramPosition
{option} top
|
Position for the variable dendrogram in the plot. It could be top, bottom, right or left depending on the orientation of the graph.
|
|
vennColors
{array} []
|
Colors for the Venn bubles. If not specified the colors will be chosen from the colors array. Colors in this array need to be at least the same number of groups in the Venn diagram
|
|
vennCompartments
{array}
|
Name for the compartments in the the Venn diagrams
|
|
vennGroups
{integer} 4
|
Number of groups in the Venn diagram
|
|
vennLegendColors
{boolean} false
|
Flag to use the venn colors to use for the legends instead of the letters
|
|
maxPieSectors
{float} 20
|
Max pie sectors. After that number the sectors will be put in a sector named 'other'.
|
|
pieSegmentLabels
{option} inside
|
Location for the values in the pie charts
|
|
pieSegmentPrecision
{integer}
|
Number of decimals for values in the Pie charts
|
|
pieSegmentSeparation
{integer} 3
|
Length in pixels for the separation of the pieces of the pie charts
|
|
pieType
{option} separated
|
Position for the pices of the pie
|
|
showPieGrid
{float} true
|
A flag to show the labels for the grid when plotting multiple pies
|
|
showPieSampleLabel
{boolean} true
|
A flag to show the sample label when plotting mutliple pies
|
|
showPieValues
{float} true
|
A flag to show the values for the pie
|
|
startPieSectors
{float}
|
Starting degrees for pie sectors. 0 is equivalent to 3:00 oclock
|
|
circularLetterSeparationFactor
{float} 2
|
Factor to adjust the spacing between letters in the circular graphs. The greater the number the closer the letters in the labels
|
|
donutProportion
{float} 0.3
|
Proportion of the center of the circular graph to use as void
|
|
rAxis
{string} false
|
Radial axis for circular plots. It must be the name of a variable
|
|
rAxisZero
{boolean} true
|
Flag to force the rAxis to start from zero otherwise it starts from the minimum value
|
|
ringSegmentSeparation
{int} 4
|
Number of degrees to separate the segments in the circular plots
|
|
ringType
{array} []
|
Array containing the types for each ring in the circular plots
|
|
ringWeight
{array} []
|
Array containing the dimensions for each ring in the circular plots
|
|
showVolume
{boolean} true
|
Flag to show or not volume in the candlestick graphs
|
|
sma10Color
{color} rgb(0,255,0)
|
The color for the 5 day single moving average
|
|
sma20Color
{color} rgb(0,0,255)
|
The color for the 25 day single moving average
|
|
sma25Color
{color} rgb(255,0,255)
|
The color for the 25 day single moving average
|
|
sma50Color
{color} rgb(0,0,0)
|
The color for the 50 day single moving average
|
|
sma5Color
{color} rgb(255,0,0)
|
The color for the 5 day single moving average
|
|
stockIndicators
{array} []
|
Stock technical indicators
|
|
approximateNodePositions
{boolean} false
|
Flag to force approximate X, Y node positions.
|
|
attractiveForceFunction
{option} FruchtermanReingold
|
Type of function to apply when calculating attractive force in forceDirected network layouts
|
|
autoHideOnDecorationsCenter
{boolean} false
|
Flag to hide node when decorations are positioned on the center
|
|
calculateLayout
{boolean} true
|
Flag to force or not to calculate the network layout.
|
|
colorEdgeBy
{string} false
|
Name of the attribute to color the edges.
|
|
colorNodeBy
{string} false
|
Name of the attribute to color the nodes.
|
|
edgeConfigurableProperties
{array} 'width', 'cap', 'exact', 'type'
|
Edge configurable properties
|
|
edgeWidth
{integer} 1
|
Default width for the edges in the networks
|
|
filterEdgeBy
{filter} []
|
Filter edges by their properties used in network graphs
|
|
filterNodeBy
{filter} []
|
Filter nodes by their properties used in network graphs
|
|
highlightNode
{array} []
|
Name of nodes in the 'data.nodes' object to highlight.
|
|
initialTemperature
{integer}
|
Initial temperature to limit displacement at later stages of forceDirected and organic layouts. A value based on the number of node and edges will be assigned if not specified
|
|
is3DNetwork
{boolean} false
|
Flag to create or not a 3D network
|
|
isSelectNodes
{integer}
|
Number of selected nodes (in the data object).
|
|
layoutTime
{integer} 15
|
Time in milliseconds used to calculate the layout for the network
|
|
moveParentsWithChildren
{boolean} false
|
Flag to make parents move when a child is moved
|
|
network2DRotate
{integer}
|
Number of degrees to rotate network arround the X axis
|
|
networkDepth
{integer}
|
Depth of the radial network.
|
|
networkDivisions
{integer}
|
Number of angular divisions in the radial network.
|
|
networkForceConstant
{float}
|
Constant used for calculating attractive and repulsive forces in forcedDirected and organic layouts. A value based on the average area per node will be assigned if not specified
|
|
networkFreeze
{boolean} false
|
Flag to prevent autoscaling for the network layout.
|
|
networkFreezeOnLoad
{boolean} false
|
Flag to prevent autoscaling for the network layout after loading.
|
|
networkLayoutType
{option} forceDirected
|
Type of network layout.
|
|
networkNodeMinDistance
{integer} 2
|
Minimum distance between nodes in forceDirected and organic layouts
|
|
networkNodesOnTop
{boolean} true
|
Order to use when drawing nodes and edges in the networks
|
|
networkRoot
{string} false
|
Node Id of the network root.
|
|
networkStack
{array}
|
Array to keep state of the network after a drag or move
|
|
networkStackIndex
{integer}
|
Index in the network stack for undo and redo operations
|
|
networkStackStates
{integer} 5
|
Number of states to keep in the network stack after a drag or move
|
|
nodeConfigurableProperties
{array} 'x', 'y', 'z', 'shape', 'color', 'outline', 'size', 'width', 'height', 'pattern', 'rotate', 'outlineWidth', 'imagePath', 'zIndex', 'eventless'
|
Node configurable properties
|
|
nodeFont
{font}
|
Font for the text in networks
|
|
nodeFontColor
{color} background color
|
Color for the network text
|
|
nodeFontSize
{integer} node width
|
Size in pixels for the font size of text in the networks
|
|
nodeHighlightColor
{color} rgb(255,0,0)
|
The color for the highlighted nodes.
|
|
nodeScaleFontFactor
{float} 1
|
Scaling factor used to increse or decrease network text font size in the canvas.
|
|
nodeSize
{integer} 10 | 20
|
Length in pixels for the size of the nodes in the network
|
|
overrideEventlessNodes
{boolean} false
|
Flag to override nodes that do not take events to be able to edit them
|
|
preScaleNetwork
{boolean} false
|
Flag to prescale or not the network. This is a aesthetic parameter to make the graph look nicer... Sometimes...
|
|
randomNetwork
{boolean} false
|
Flag to create or not random network for debug and demonstraion purposes
|
|
randomNetworkNodeEdgesMax
{integer} 5
|
Default number of maximum edges when creating random networks
|
|
randomNetworkNodes
{integer} 50
|
Default number of nodes when creating random networks
|
|
reduceRandomNetwork
{boolean} false
|
Flag to create or not a single random network for debug and demonstraion purposes
|
|
repulsiveForceFunction
{option} square
|
Type of function to apply when calculating repulsive force in forceDirected network layouts
|
|
selectNode
{object} {}
|
Name of nodes (in the data object) to select.
|
|
shapeEdgeBy
{string} false
|
Name of the attribute to shape the nods.
|
|
shapeNodeBy
{string} false
|
Name of the attribute to shape the nods.
|
|
showHiddenChildEdges
{boolean} true
|
Flag to show or not children nodes when the parent node is hidden.
|
|
showNetworkDecorationsLegend
{boolean} true
|
Flag to show node legends in the networks
|
|
showNetworkEdgesLegend
{boolean} true
|
Flag to show edge legends in the networks
|
|
showNetworkNodesLegend
{boolean} true
|
Flag to show node legends in the networks
|
|
showNetworkRadialLayout
{boolean} false
|
Flag to show or not a radial layout wire.
|
|
showNetworkTextLegend
{boolean} true
|
Flag to show node legends in the networks
|
|
showNodeNameThreshold
{integer} 50
|
Thereshold used to set the limit to hide or display the name of nodes in a network. If the number of nodes exceed this thereshold then the name will not be shown.
|
|
sizeDecorationBy
{string} false
|
Name of the attribute to size the network decoration.
|
|
sizeEdgeBy
{string} false
|
Name of the attribute to size the edges.
|
|
sizeNodeBy
{string} false
|
Name of the attribute to size the nodes.
|
|
skipClick
{boolean}
|
Flag to skip click events after a mouse down event in the networks when the eventModel is global
|
|
subNetworks
{array}
|
Array to keep independent networks
|
|
temperature
{integer}
|
Temperature to limit displacement at later stages of forceDirected and organic layouts. A value based on the number of node and edges will be assigned if not specified
|
|
featrureCoordinateHeight
{integer} 12
|
Default size in pixels of the coordinates height
|
|
featrureQualityHeight
{integer} 12
|
Default size in pixels of the quality height
|
|
featrureSignalToNoiseHeight
{integer} 12
|
Default size in pixels of the quality height
|
|
featrureTranslateHeight
{integer} 12
|
Default size in pixels of the translation height
|
|
featureConfigurableProperties
{array} 'id', 'name', 'label', 'hideName', 'fill', 'outline', 'dir', 'showDir', 'connect', 'offset', 'data', 'subtype', 'quality', 'signalToNoise', 'coordinate', 'sequence', 'trace', 'gaps', 'translate', 'hide', 'counter'
|
Feature configurable properties
|
|
featureCoodinateShow
{boolean} true
|
Flag use to show coordinates
|
|
featureHeightDefault
{integer} 14
|
Default size in pixels of the feature height
|
|
featureNameFont
{font}
|
Font for the text of the features in the genome browser
|
|
featureNameFontColor
{color} background color
|
Color for the text of the features in the genome browser
|
|
featureNameFontSize
{integer} 8
|
Size in pixels for the font size of text of the features in the genome browser
|
|
featureQualityShow
{boolean} true
|
Flag use to show quality
|
|
featureQualityValues
{boolean} false
|
Flag use to show values for the quality
|
|
featureSignalToNoiseShow
{boolean} true
|
Flag use to show quality
|
|
featureSignalToNoiseValues
{boolean} false
|
Flag use to show values for the quality
|
|
featureStaggered
{boolean} false
|
Flag use to stagger the features in the genome panel
|
|
featureTraceHeight
{integer} 40
|
Default size in pixels of the trace height
|
|
featureTraceTrim
{integer} 1
|
Default triming for nucleotide values in the traces (expressed in percent)
|
|
featureTracesShow
{boolean} true
|
Flag use to show traces
|
|
featureTranslateShow
{boolean} true
|
Flag use to show tranlation
|
|
featureTypeDefault
{option} line
|
Default type for the feature in the genome browser
|
|
featureWidthDefault
{integer} 3
|
Default size in pixels of the feature width
|
|
filterFeatureBy
{filter} []
|
Filter features by their properties used in genome browser *
|
|
genomeResolution
{option}
|
Number to adjust the splines curvature
|
|
maxFeatureStringLen
{integer} 50
|
Maximum length in characters a feature label can have so anything above is truncated.
|
|
periodTicksLabels
{integer} 5
|
Number of ticks to skip between values in the genome browser
|
|
sequenceAColor
{color} rgb(0,103,0)
|
Color for the adenines and alanines in the genome browser
|
|
sequenceBColor
{color} rgb(0,0,0)
|
Color for the degenerate C/G/T and asparagines in the genome browser
|
|
sequenceCColor
{color} rgb(0,0,255)
|
Color for the cytosines and cysteins in the genome browser
|
|
sequenceDColor
{color} rgb(0,0,0)
|
Color for the degenerate A/G/T and aspartic acids in the genome browser
|
|
sequenceEColor
{color} rgb(0,0,0)
|
Color for the glutamic acids in the genome browser
|
|
sequenceEndColor
{color} rgb(255,0,0)
|
Color for the end codon in the genome browser
|
|
sequenceFColor
{color} rgb(0,0,255)
|
Color for the phenylalanines in the genome browser
|
|
sequenceFill
{color} false
|
Color for the background when showing sequnces in the box or sequence object in the Genome. The default is to use the background of the object. If specied a valid color then all the background of sequences will be uniform
|
|
sequenceFont
{font}
|
Font for the text of the sequence in the genome browser
|
|
sequenceFontSize
{integer} 10
|
Size in pixels for the font size of text of the sequence in the genome browser
|
|
sequenceGAPColor
{color} rgb(255,0,255)
|
Color for the deletions, insertions and gaps in the genome browser
|
|
sequenceGColor
{color} rgb(0,0,0)
|
Color for the guanines and glycines in the genome browser
|
|
sequenceHColor
{color} rgb(255,0,0)
|
Color for the degenerate A/C/T and histidines in the genome browser
|
|
sequenceIColor
{color} rgb(0,103,0)
|
Color for the isoleucines in the genome browser
|
|
sequenceKColor
{color} rgb(255,0,0)
|
Color for the degenerate G/T and lysines in the genome browser
|
|
sequenceLColor
{color} rgb(0,103,0)
|
Color for the leucines in the genome browser
|
|
sequenceMColor
{color} rgb(0,103,0)
|
Color for the degenerate A/G and methionines in the genome browser
|
|
sequenceNColor
{color} rgb(0,0,0)
|
Color for the degenerate A/C/G/T and asparagines in the genome browser
|
|
sequencePColor
{color} rgb(255,165,0)
|
Color for the prolines in the genome browser
|
|
sequenceQColor
{color} rgb(0,0,0)
|
Color for the glutamines in the genome browser
|
|
sequenceRColor
{color} rgb(255,0,0)
|
Color for the degenerate A/G and arginines in the genome browser
|
|
sequenceSColor
{color} rgb(255,165,0)
|
Color for the degenerate G/C and serines in the genome browser
|
|
sequenceStartColor
{color} rgb(0,255,0)
|
Color for the start codon in the genome browser
|
|
sequenceTColor
{color} rgb(255,0,0)
|
Color for the thymidines and threonines in the genome browser
|
|
sequenceUColor
{color} rgb(255,0,0)
|
Color for the uracils in the genome browser
|
|
sequenceVColor
{color} rgb(0,103,0)
|
Color for the degenerate A/C/G and valines in the genome browser
|
|
sequenceWColor
{color} rgb(0,0,255)
|
Color for the degenerate A/T and tryptophans in the genome browser
|
|
sequenceXColor
{color} rgb(0,0,0)
|
Color for the any aminoacid code in the genome browser
|
|
sequenceYColor
{color} rgb(0,0,255)
|
Color for the degenerate C/T and tyrosines in the genome browser
|
|
sequenceZColor
{color} rgb(0,0,0)
|
Color for the glutamines in the genome browser
|
|
showFeatureNameThereshold
{integer} 20
|
Threshehold used to set te limit when there are too many features in the genome browser
|
|
subtracksMaxDefault
{integer} 8
|
Maximum number of subtracks to show in a track
|
|
trackConfigurableProperties
{array} 'name', 'hideName', 'hideFeatureNames', 'type', 'height', 'fill', 'outline', 'data', 'hide', 'connect', 'subtracksMax', 'highlight'
|
Track configurable properties
|
|
trackNameFont
{font}
|
Font for the text of the tracks in the genome browser
|
|
trackNameFontColor
{color} background color
|
Color for the text of the tracks in the genome browser
|
|
trackNameFontSize
{integer} 10
|
Size in pixels for the font size of text of the tracks in the genome browser
|
|
wireColor
{color} rgba(204,204,204,0.1)
|
Color for the ticks in the genome browser
|
|
codeType
{option} pretty
|
Output type for the JSON code
|
|
debug
{boolean} true
|
Flag to turn on alerts.
|
|
errors
{array} []
|
Array containing benign errors produced when rendering canvasXpress
|
|
showCode
{boolean} false
|
Flag to show code for the canvas.
|
|
showVersion
{boolean} true
|
Flag to show version when mouse over top-left corner of the canvas.
|
|
skin
{option} grey
|
Skin for the application
|
|
skinHighlight
{color}
|
Color for the highlight skin automatically calculated
|
|
skinProperties
{array} 'skinBackgroundColor', 'skinBorderColor', 'skinColor', 'skinShadowColor'
|
Properties for the skin
|
|
skinPropertiesBlue
{array} []
|
Values for the blue skin
|
|
skinPropertiesGrey
{array} []
|
Values for the grey skin
|
|
broadcast
{boolean} true
|
Flag to enable broadcasting to other canvasXpress objects in the page
|
|
broadcastType
{option} var
|
Model for broadcasting to identify either variables or a combination of variable and samples
|
|
configuratorWidth
{integer} 300
|
Size in pixels for the configurator.
|
|
dataEvent
{array}
|
Array to store the areas that will trigger an event
|
|
dataFilterWidth
{integer} 300
|
Size in pixels for the data filters.
|
|
destroyCanvasXpressZombies
{boolean} true
|
Flag to destroy canvasXpress objects stored in the references array when they are no longer part of the DOM. This may happen when canvasXpress is used in other JS frameworks and the objects are not destroyed by the developer
|
|
disableConfigurator
{boolean} false
|
Flag to disable configurator.
|
|
disableDataFilters
{boolean} false
|
Flag to disable showing data filters
|
|
disableDataTable
{boolean} false
|
Flag to disable showing data table
|
|
disableEvents
{boolean} false
|
Flag to disable all events.
|
|
disableToolbar
{boolean} false
|
Flag to disable showing the toolbar
|
|
eventArrowKeys
{boolean} true
|
Flag to enable arrow key binding events.
|
|
eventKeys
{boolean} true
|
Flag to enable key binding events. This prevent some default browser shortcuts and it is system specific. Please see the Event section bellow.
|
|
eventPlusMinusKeys
{boolean} true
|
Flag to enable plus / minus key binding events.
|
|
helpKeyEvents
{boolean} true
|
Flag to enable help on key events.
|
|
infoTimeIn
{integer} 3000
|
Time in milliseconds to start showing info after a mouse over
|
|
infoTimeOut
{integer} 3000
|
Time in milliseconds to wait between updates for the mouse over info to show up
|
|
isLayoutConfigurator
{boolean} true
|
Flag to disable showing the configurator when there is a click in the full layout icon in the toolbar
|
|
maintainZoomOnDrag
{boolean} false
|
Flag to enable maintaining zooming after initial drag in one dimensional plots
|
|
monitorCanvasXpressZombiesTime
{integer} 30000
|
Time in milliseconds to wait between checking for canvasXpress zombies
|
|
resizable
{boolean} true
|
Flag to disable resizing the canvas by dragging the mouse over the edges
|
|
showAdvancedConfiguration
{boolean} false
|
Flag to show advanced configuration properties.
|
|
this
{time}
|
Time in milliseconds to keep track of time
|
|
toolbarPermanent
{boolean} false
|
Flag to make the toolbar permanently visible.
|
|
resizerBackgroundColor
{color} rgb(204,204,204)
|
Color for the div that shows up when resizing the axes in the canvas or the whole canvas
|
|
resizerBackgroundColorCurrent
{color} rgb(153,187,232)
|
Color for the div that shows up the current area selected in the axes in the canvas
|
|
resizerBackgroundColorOutlineCurrent
{color} rgb(153,187,232)
|
Color for the div that shows up the current area selected in the axes in the canvas
|
|
resizerBackgroundImage
{url} -1
|
Object to store data when the canvas is zoomed with the axis resizer resizerEventData @type {object}
|
|
resizerDraw
{boolean} true
|
Flag to make the axis resizers draw the canvas as they move
|
|
resizerPosition
{option} bottom
|
Position for the axis resizer in complex plots
|
|
resizerTransparency
{boolean} true
|
Flag to make the axis resizers transparent
|
|
resizerType
{option} false
|
String to indicate the type of axis resizer in complex plots
|
|
resizerWidth
{integer} 18
|
Length in pixels for the width of the visible axis resizer
|
|
animationCycles
{integer} 20
|
Number of cycles to plot the graph for the animations.
|
|
animationTime
{integer} 30
|
Time in milliseconds to wait between rendering the plot when showing the animation.
|
|
animationType
{option} grow
|
Type of animation
|
|
showAnimation
{boolean} false
|
Flag to show or not animation for the graphs
|
|
showAnimationFont
{font}
|
Font for the text in animations
|
|
showAnimationFontColor
{color} background color
|
Color for the animation text
|
|
showAnimationFontSize
{integer} 10
|
Size in pixels for the font size of text involved in the animation
|
|
snapshotCopyChangeOnly
{boolean} true
|
Flag to indicate whether to copy all or only the changed attributes in the network animation. This optimizes memory usage for snapshots.
|
|
isAnimation
{boolean}
|
Flag to indicate if there is an active animation
|
|
snapshots
{array}
|
Array to hold the data used in the animation
|
|
layout
{string} 1X1
|
Topology of the canvas. Number of rows and columns.
|
|
layoutAdjust
{boolean} false
|
Flag to force recalculating the ranges in the axes when multiple graphs are displayed in the canvas.
|
|
layoutAxis
{option}
|
Flag to indicated whether to print axes values when multiple graphs are displayed in the canvas. The possible values are: 1: horizontal, 2: vertical, 3: both
|
|
layoutComb
{boolean} false
|
Flag that identify that multiple graphs will be displayed in the canvas.
|
|
layoutCurrent
{integer}
|
Integer to identify the current graph being displayed in the canvas.
|
|
layoutHeight
{float}
|
Height of the current segment of the canvas when there are multiple graphs.
|
|
layoutMaxVarLegend
{integer}
|
Maximum length of legend when multiple graphs are displayed in the canvas.
|
|
layoutMulticolor
{boolean} true
|
Flag to cycle colors when displaying multiple graps in the canvas. If set to false the color will be reseted for every graph.
|
|
layoutWidth
{float}
|
Width of the current segment of the canvas when there are multiple graphs.
|
|
offsetX
{float}
|
Additional amount to move for the X axis
|
|
offsetY
{float}
|
Additional amount to move for the Y axis.
|
|
scaleX
{float}
|
Scale factor for the X axis
|
|
scaleY
{float}
|
Scale factor for the Y axis
|
|
translateX
{float}
|
Amount to translate for the X axis.
|
|
translateY
{float}
|
Amount to translate for the Y axis.
|
|
weight
{float}
|
Fraction of the canvas to be used (a value between 0 and 1). Used when multiple graphs are displayed in one canvas. Could be an number or an array of numbers.
|
|
dropdownButton
{image} menu_dropdown.png
|
Relative path to an image file to the drop down button (not including the image directory)
|
|
imageDir
{url} http://canvasxpress.org/images/
|
Relative path to a directory contaioning images
|
|
nextButton
{image} fast_forward.png
|
Relative path to an image file to the next button (not including the image directory)
|
|
playButton
{image} play.png
|
Relative path to an image file to the play button (not including the image directory)
|
|
previousButton
{image} rewind.png
|
Relative path to an image file to the previous button (not including the image directory)
|
|
stopButton
{image} stop.png
|
Relative path to an image file to the stop button (not including the image directory)
|
|
remoteAutoPlay
{boolean} false
|
Flag to iterate over remote data sets
|
|
remoteAutoPlayDelay
{integer} 3000
|
Time in milliseconds to wait between iterations over remote data sets
|
|
remoteDataIndex
{integer}
|
Index of the canvasXpress object requested
|
|
remoteDirection
{option} next
|
Direction parameter used to obtain data remotely.
|
|
remoteIds
{array}
|
Array of the remoteIds passed after a service call
|
|
remoteParams
{object} {}
|
Object to hold parameters used to obtain data remotely. The target property will be always added to the method as well as the direction [next|prev] (see below.
|
|
remoteParentId
{string}
|
Id for the parent holding the remoteWindow to prevent id collisions
|
|
remoteService
{url} false
|
Url used to obtain data remotely. It expects and array of canvasXpress objects
|
|
remoteUpdate
{boolean} false
|
Flag to indicate that the file to get the data needs to be updated
|
|
remoteUpdateDelay
{integer} 10000
|
Time in milliseconds to wait between tryig to get an upated version of the file containing the data
|
|
remoteUpdating
{boolean}
|
Flag to indicate that updating data is in progress
|
|
remoteWindow
{integer} 1
|
Number of plots to show when requesting remote data
|
|
edgesProperties
{array} []
|
Two dimensional array with object properties not at the root level for the edges in the Network graph to include in the Data table and the data filter
|
|
featuresProperties
{array} []
|
Two dimensional array with object properties not at the root level for the features in the Genome graph to include in the Data table and the data filter
|
|
nodesProperties
{array} []
|
Two dimensional array with object properties not at the root level for the nodes in the Network graph to include in the Data table and the data filter
|
|
skipConfigurableProperties
{boolean} true
|
Flag to indicate to exclude configurable parameters in the data table and the data filters in Networks and Genome Browser
|
|
filterSkipNullKeys
{boolean} false
|
Flag to indicate to bypass filtering when a key is non existent in the data objects
|
|
filterType
{option} and
|
Type for the filter. Can be 'and' or 'or'
|
|
colWidth
{integer} 100
|
Mumber of pixels for the width of cells in the data table
|
|
dataTableColumnWidth
{array}
|
Initialize configurations
|
|
dataTableTransposed
{boolean} true
|
Flag to transpose the data in the data table
|
|
freezeColLeft
{integer}
|
Number of columns to freeze in the left side of the data table
|
|
freezeColRight
{integer}
|
Number of columns to freeze in the right side of the data table
|
|
freezeRowBottom
{integer}
|
Number of rows to freeze at the bottom of the data table
|
|
freezeRowTop
{integer}
|
Number of rows to freeze at the top of the data table
|
|
maxCols
{integer} 8
|
Maximum number of columns to display in the data table
|
|
maxRows
{integer} 10
|
Maximum number of rows to display in the data table
|
|
networkShowDataTable
{option} nodes
|
Show nodes or edges on data table
|
|
refresehDataTableOnDraw
{boolean} true
|
Flag to indicate to refresh data after drawing the plot
|
|
rowHeight
{integer} 100
|
Mumber of pixels for the height of cells in the data table
|
|
showDataTable
{boolean} false
|
Flag to indicate to show the data table
|
|
showDataTableOnSelect
{boolean} false
|
Flag to indicate to show data after selecting data in the plot
|
|
startCol
{boolean}
|
Starting column in the data table
|
|
startRow
{boolean}
|
Starting row in the data table
|
The parameter events is a json object with the
user defined events. By default I assign the four
events that canvasXpress supports which are mouseover,
mouseout, click and dblclick. The events can also
handle scope as shown below. In json format the
events is like this:
{mouseover: function(o) {
// Do something ...
},
mouseoutr: function(o) {
// Do something more...
},
click: function(o) {
// Do something else ...
},
dblclick: function(o) {
// Do even more stuff
}
}
or
{scope: myScope,
handler: {mouseover: function(o) {
// Do something ...
},
click: function(o) {
// Do something else ...
}
}
}
I hope it is not too complicated. The parameter (o) passed to the
user defined callback has the same format as that one you passed
in the data parameter. Just go ahead and mouseover and/or click
in any element in the graphs and see what I mean. It is up to
you to include additional code to handle the events of
course.
The default mouseover event in canvasXpress
is to show the data value for most of the graphs or the
feature/node/edge name for the Genome and Network graphs.
This is how the events object should look like:
{click: function(o) {
DumperAlert(o);
}}
Oh, I almost forgot the event names are normalized so don't worry if you use IE or Firefox.
Additional Methods
There are a few more methods to create lines, shapes and text in any plot. In order, to use these methods you just need to save the canvasXpress in a variable and use the methods like this:
var cX = new CanvasXpress(target, data, config, events);
.....
cx.drawLine('dashed', 18, 18, 613, 613, 'rgb(255,0,0)', 2, 'butt');
.....
cx.drawShape('roundrect', 36, 36, 10, 49, 'rgb(255,0,0)', 'rgb(0,0,0)', 'closed', 3.14 / 2, '1');
.....
cx.drawText('This is kewl', 50, 50, 'Verdana, sans-serif 12pt', 'rgb(0,0,0)', 'center', 'middle', 3.14 / 4);
.....
drawLine
It takes the following parameters: type (string), a valid type of line (see the documentation above); x0 (int), initial X coordinate; y0 (int), initial Y coordinate; x1 (int), final X coordinate; y1 (int), final Y coordinate; color (color), an rgb string of a valid color according to the HTML 5 canvas specification; width (int), the line width for the line; cap (string), the cap style for the line which could be 'butt', 'round' or 'square'.
drawShape
It takes the following parameters: type (string), a valid type of shape (see the documentation above); x (int), center X coordinate; y (int), center Y coordinate; width (int), width of the shape; height (int), height of the shape; fill (color), an rgb string of a valid color according to the HTML 5 canvas specification for the fill of the shape; outline (color), an rgb string of a valid color according to the HTML 5 canvas specification for the outline of the shape; pattern (string), a pattern for the shape which could be either 'closed' or 'open'; rotation (int), a rotation in degrees for the shape; outline-width (int), the line width for the outline of the shape. If the first parameter (shape) is either 'polygon' or 'path' then the second and third parameter must be arrays with integers.
drawText
It takes the following parameters: string, the text you want to print; int, X coordinate; int, Y coordinate; color, an rgb string of a valid color according to the HTML 5 canvas specification; string, a valid align position according to the HTML 5 canvas specification; string, a valid baseline position according to the HTML 5 canvas specification; float, a rotation in radians for the text.
Ext-JS
This library can be used with EXT JS. Actually, the Ext.canvasXpress component has been extended tremendously thanks to Mingyi Liu. He has added a large number of features for playing with the networks. Please go to the example and right click anywhere and you'll see what I mean.