CanvasXpress
CanvasXpress is a javascript library based on the <canvas> tag implemented in HTML5. I developed this library as the core visualization component for our BMS systems biology platform which I hope to release soon. The basic idea was to have generic and simple way to display genomics data. CanvasXpress supports 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, pie charts, correlation plots, Venn diagrams, networks (or pathways), candlesticks plots and genome browser. It also supports a few data transformations like log and exponential transformation, z-score, percentile transformation, ratios and transposing. It also support grouping of samples, hierarchical clustering, kmeans, complex layouts, regression lines, normal distribution plots, non linear fitting, zooming, events ... well, there a lot more features but maybe at this time I already capture your attention. Here are some example graphs so you can mouseover, click, select, rotate ... yada, yada, yada ...
Browser Support
It is supposed to work in all major browsers like Firefox, Safari, Chrome, Opera and IE. (I have only test it in Chrome, Firefox and IE). It even works in substandard browsers like Internet Explorer 6 if an additional javascript library, ExplorerCanvas is included. 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).
Usage
Javascript Libraries
Please see the javascripts libraries included in any page in this site which should look something like:
<!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="./js/canvasXpress.min.js"></script>
The file canvasXpress.min.js also contains the additional javascript libraries, sprintf to format numbers, datadumper to show json structures, 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.
|
background
{color} rgb(255,255,255)
|
Background color of the canvas.
|
|
backgroundGradient1Color
{color} rgb(0,0,200)
|
The first color of the gradient if the background type is a gradient.
|
|
backgroundGradient2Color
{color} rgb(0,0,36)
|
The second color of the gradient if the background type is a gradient.
|
|
backgroundImage
{string} false
|
Background image
|
|
backgroundType
{string} solid
|
Type of background for the canvas. The canvas may have a window for plotting the data which may have a gradient, a solid pattern or an image.
solid, gradient, window, windowGradient, windowGradient2, windowSolidGradient, image, windowImage
|
|
backgroundWindow
{color} rgb(255,255,255)
|
Background color of the canvas window.
|
|
backgroundWindowGradient1Color
{color} rgb(0,0,200)
|
The first color of the gradient if the background type is a windowGradient.
|
|
backgroundWindowGradient2Color
{color} rgb(0,0,36)
|
The second color of the gradient if the background type is a windowGradient.
|
|
backgroundWindowGradientOrientation
{string} vertical
|
The orientation for the gradient if the background type is windowGradient or windowGradient2.
vertical, horizontal
|
|
foreground
{color} rgb(0,0,0)
|
Foreground color of the canvas.
|
|
foregroundWindow
{color} rgb(0,0,0)
|
Foreground color of the canvas window.
|
|
functions
{array}
|
Functions exposed to the api
|
|
gradient
{boolean} false
|
Flag to use gradients in the canvas objects, that is any object ploted in the graphs or in the networks
|
|
gradientRatio
{float} 5.5
|
Ratio used to generate linear gradients in the canvas objects.
|
|
gradientType
{string} radial
|
Type ot gradient to use in the canvas objects, that is any object ploted in the graphs or in the networks
linear, radial
|
|
graphOrientation
{string} horizontal
|
Orientation for the graphs
horizontal, vertical
|
|
graphType
{string} Bar
|
Graph Type
Bar, Line, Area, BarLine, Boxplot, Dotplot, Heatmap, Candlestick, Stacked, StackedLine, StackedPercent, StackedPercentLine, Scatter2D, ScatterBubble2D, Scatter3D, Correlation, Pie, Venn, Network, Genome
|
|
margin
{int} 5
|
Length in pixels of the distance between many areas in the canvas.
|
|
shadowBlur
{int} 2
|
Amount in blur for the shadow.
|
|
shadowColor
{color} rgba(0,0,0,0.5)
|
Color for the shadow.
|
|
shadowOffsetX
{int} 3
|
Length in pixels for the shadow offset in the X axis.
|
|
shadowOffsetY
{int} 3
|
Length in pixels for the shadow offset in the Y axis.
|
|
showShadow
{boolean} false
|
Flag to show or not shadows in the canvas. It will be forced to false if the browser is IE.
|
|
transparency
{float} null
|
Percentage of transparency for canvas objects, that is any object ploted in the graphs or in the networks
|
|
align
{position} center
|
Default horizontal alignment for text.
right, center, left
|
|
autoScaleFont
{boolean} true
|
Flag to automatically adjust the font size. However, the scaling factors still can modify the fonts. This flag needs to be false for the text to accept the specified font size.
|
|
baseline
{position} right
|
Default vertical alignment for text.
top, middle, bottom
|
|
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
Gentilis, Helvetiker, Optimer, Verdana, sans-serif
|
|
fontSize
{int} 12
|
Font size
|
|
fontStyle
{mixed} false
|
Font style. Experimental.
false, bold, italic
|
|
fonts
{array}
|
Font name. It will be set depending on the browser. It could be Optimer, Helvetiker, Gentilis or Verdana, sans-serif
|
|
maxTextSize
{int} 14
|
Maximum size for the text in the canvas.
|
|
minTextSize
{int} 4
|
Minimum size for the text in the canvas.
|
|
scaleTextConstantAdd
{int} 2.5
|
Constants to autoscale text (extra)
|
|
scaleTextConstantMult
{int} 40
|
Constants to autoscale text
|
|
subtitle
{mixed} false
|
Title of the graph.
|
|
subtitleHeight
{int} 16
|
Height for the subtitle of the graph. The font height will be adjusted automatically to fit in the canvas.
|
|
title
{mixed} false
|
Title of the graph.
|
|
titleHeight
{int} 30
|
Height for the title of the graph. The font height will be adjusted automatically to fit in the canvas.
|
|
arrowPointSize
{int} 10
|
Size in pixels of the arrow head in the arrow lines.
|
|
capType
{string} butt
|
Type for the cap of lines.
butt, round, square
|
|
colorScheme
{string} basic
|
Color Scheme.
user, basic, dark, strong, light, pastel
|
|
colors
{array} colors
|
Colors.
|
|
dashLength
{int} 8
|
Size in pixels of the length of the dashes and the separation between the dashes in the dashed lines.
|
|
dotLength
{int} 5
|
Size in pixels of the length between dots in the doted lines.
|
|
lines
{array}
|
Line types and there are a lot. 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'.
, dashed, dotted, bezierY, bezierX, curved + arrow, arrowHead, arrowTail, arrowHeadSquareTail, arrowTailSquareHead, square, squareHead, squareTail, squareHeadArrowTail, squareTailArrowHead
|
|
outlineWidth
{int} 1
|
Width in pixels of the lines
|
|
shapes
{array}
|
Shapes
sphere, square, triangle, star, rhombus, octagon, oval, plus, minus, pacman, mdavid, rect2, rect3'
|
|
sizes
{array}
|
Sizes
4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34
|
|
timeFormat
{string} isoDate
|
Time Format according to date.format.js Steven Levithan
default, shortDate, mediumDate, longDate, fullDate, shortTime, mediumTime, longTime, isoDate, isoTime, isoDateTime, isoUtcDateTime
|
|
autoExtend
{boolean} false
|
Flag to automaticaly adjust the size of the canvas to prevent over crowding. It works in all graphs except the scatter plots and the networks. If the graph orientation is vertical, the canvas wil extend in the horizontal axis and if the graph orientation is horizontal the canvas will extend in the vertical axis. The possible values are true or false and the default is false. If you set it to true, make sure you put the canvas element in an scrollable DOM object
|
|
maxSmpStringLen
{int} 50
|
Maximum length in characters a sample label or description can have so anything above is truncated.
|
|
maxVarStringLen
{int} 30
|
Maximum length in characters a variable label or description can have so anything above is truncated.
|
|
scaleSmpLabelFontFactor
{int} 1
|
Scaling factor used to increse or decrease sample font size in the canvas.
|
|
scaleSmpTitleFontFactor
{int} 1
|
Scaling factor used to increse or decrease sample font size in the canvas.
|
|
scaleVarLabelFontFactor
{int} 1
|
Scaling factor used to increse or decrease variable font size in the canvas.
|
|
scaleVarTitleFontFactor
{int} 1
|
Scaling factor used to increse or decrease variable font size in the canvas.
|
|
showSampleNames
{boolean} true
|
Flag to show the sample names
|
|
showVariableNames
{boolean} true
|
Flag to show the variable names
|
|
smpLabelColor
{color} foreground color
|
Font color for the sample labels
|
|
smpLabelDescription
{string} false
|
Sample label description
|
|
smpLabelFont
{font}
|
Font for the sample labels
|
|
smpLabelFontSize
{int} 10
|
Size for the sample labels
|
|
smpLabelRotate
{int}
|
Rotation for sample labels in degrees. It could be positive or negative.
|
|
smpTitle
{string} false
|
Sample title
|
|
smpTitleColor
{color} foreground color
|
Font color for the sample titles
|
|
smpTitleFont
{font}
|
Font for the sample titles
|
|
smpTitleFontSize
{int} 10
|
Size for the sample title
|
|
varLabelColor
{color} foreground color
|
Font color for the variable labels
|
|
varLabelDescription
{string} false
|
Variable label description
|
|
varLabelFont
{font}
|
Font for the variable labels
|
|
varLabelFontSize
{int} 10
|
Size for the variable labels
|
|
varLabelRotate
{int}
|
Rotation for variable labels in degrees It could be positive or negative.
|
|
varTitle
{int} 10
|
Variable title
|
|
varTitleColor
{color} foreground color
|
Font color for the variable titles
|
|
varTitleFont
{font}
|
Font for the variable titles
|
|
varTitleFontSize
{int} 10
|
Size for the variable title
|
|
varTitleLabelOverlayPosition
{string} bottom
|
Position for variable labels in heatmaps
botom, top
|
|
highlightNode
{array} []
|
Name of nodes (in the data object) to highlight.
|
|
highlightSmp
{array} []
|
Name of samples (in the data object) to highlight.
|
|
highlightVar
{array} []
|
Name of variables (in the data object) to highlight.
|
|
isSelectNodes
{int}
|
Number of selected nodes (in the data object).
|
|
nodeHighlightColor
{color} rgb(255,0,0)
|
The color for the highlighted nodes.
|
|
selectNode
{object} {}
|
Name of nodes (in the data object) to select.
|
|
smpHighlightColor
{color} rgb(255,0,0)
|
The color for the higlighted samples.
|
|
varHighlightColor
{color} rgb(255,0,0)
|
The color for the highlighted variables.
|
|
overlayFont
{font}
|
Font for the overlays
|
|
overlayFontColor
{color} foregroung color
|
Color for the overlays
|
|
overlayFontSize
{int} 6
|
Font size for the overlays
|
|
overlays
{array} empty
|
This parameter is deprecated and should be replaced by smpOverlays
|
|
overlaysWidth
{int} 30
|
Length in pixels of the width for the colored boxes above the samples
|
|
scaleOverlayFontFactor
{int} 1
|
Scaling factor used to increse or decrease overlays font size in the canvas.
|
|
showOverlays
{boolean} true
|
Flag to indicate to show or not the overlays
|
|
smpOverlays
{array} empty
|
Sample annotations included in the data object
|
|
varOverlays
{array} empty
|
Variable annotations included in the data object
|
|
legendBackgroundColor
{color} background color
|
Color for the legend background
|
|
legendBox
{boolean} true
|
Flag to create a box around the legend
|
|
legendColor
{color} foregroung color
|
Color for the legends
|
|
legendFont
{font}
|
Font for the legends
|
|
legendFontSize
{int} 10
|
Font size for the legends
|
|
legendPosition
{string} right
|
Position for the legend in the graphs
right, bottom
|
|
scaleLegendFontFactor
{int} 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
{string} bottom
|
Position for the indicators
bottom, right
|
|
showIndicators
{boolean} true
|
Flag to show or not color, shape and size indicators for several graphs
|
|
decorationFont
{font}
|
Font for the decoration
|
|
decorationFontSize
{font} 10
|
Font for the decorations
|
|
decorations
{array} []
|
Name of the node properties to include in the network decorations
|
|
decorationsColor
{color} foreground color
|
Color for the decorations
|
|
decorationsColors
{array} []
|
Colors for the network decorations not to be confused by its singular form 'decorationsColor' above
|
|
decorationsHeight
{int} 20
|
Length in pixels of the height for the decorations in the networks
|
|
decorationsPosition
{string} bottom
|
Position for the decorations
bottom, right
|
|
decorationsType
{string} bar
|
Type for the decorations in the networks
bar, heatmap
|
|
decorationsWidth
{int} 10
|
Length in pixels of the width for the decorations in the networks
|
|
scaleDecorationFontFactor
{int} 1
|
Scaling factor used to increse or decrease decoration font size in the canvas.
|
|
showDecorations
{boolean} false
|
Flag to show or not extra lines for several graphs
|
|
axisTickColor
{color} foregroung color
|
Color for the axis ticks
|
|
axisTickFont
{font}
|
Font for the axis ticks
|
|
axisTickFontSize
{int} 10
|
Font size for the axis ticks
|
|
axisTitleColor
{color} foregroung color
|
Color for the axis title
|
|
axisTitleFont
{font}
|
Font for the axis titles
|
|
axisTitleFontSize
{int} 10
|
Font size for the axis titles
|
|
scaleTickFontFactor
{int} 1
|
Scaling factor used to increse or decrease tick font size in the canvas.
|
|
scaleTitleFontFactor
{int} 1
|
Scaling factor used to increse or decrease title font size in the canvas.
|
|
tickRotate
{int}
|
Rotation for graph ticks in degrees. It could be positive or negative.
|
|
groupingFactors
{array} []
|
An array that holds the group names used for grouping the data.
|
|
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.
|
|
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.
|
|
randomData
{boolean} false
|
Flag to create or not random data for debug and demonstraion purposes
|
|
randomDataMean
{int} 100
|
Mean value when creating random data
|
|
randomDataSampleAnnotationRatio
{int} 2
|
Approximate number of classes in each sample annotation when creating random data
|
|
randomDataSampleAnnotations
{int} 3
|
Default number of sample annotations when creating random data
|
|
randomDataSamples
{int} 50
|
Default number of samples when creating random data
|
|
randomDataSigma
{int} 100
|
Sigma value when creating random data
|
|
randomDataVariableAnnotationRatio
{int} 2
|
Approximate number of classes in each variable annotation when creating random data
|
|
randomDataVariableAnnotations
{int} 2
|
Default number of variable annotations when creating random data
|
|
randomDataVariables
{int} 50
|
Default number of variables when creating random data
|
|
randomMissingDataPercentage
{int}
|
Default percentege of missing values when creating random data
|
|
ratioReference
{int}
|
Default index of sample used in ratio transformation.
|
|
segregateSamplesBy
{mixed} false
|
String to indicate the annotation used to segregate the samples.
false, string
|
|
segregateVariablesBy
{mixed} false
|
String to indicate the annotation used to segregate the variables.
false, string
|
|
showErrorBars
{boolean} true
|
Flag to indicate whether to show or not error bars in the graphs.
|
|
smpSort
{int}
|
Sample index used in sorting the data.
|
|
sortDir
{string} ascending
|
Default direction for data sorting.
ascending, descending
|
|
tmpAsciiArray
{array}
|
A temporary array to enable sorting data asciibetically.
|
|
transformBase
{int} 2
|
Default log or exponential transformation.
2, 10
|
|
transformType
{mixed} false
|
Default transformation type.
false, log2, log10, exp2, exp10, percentile, zscore, ratio, ratio2, ratio10, save, reset, undo
|
|
varSort
{int}
|
Variable index used in sorting the data.
|
|
zscoreAxis
{string} samples
|
Default axis to use to zsore the data.
samples, variables
|
|
panningGlobalX
{float}
|
Number of unit to pan the network in the X dimension
|
|
panningGlobalY
{float}
|
Number of unit to pan the network in the Y dimension
|
|
panningStep
{float} 0.1
|
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
|
|
zoomStep
{float} 0.1
|
Percentage step for zooming networks.
|
|
centerData
{boolean} false
|
Flag to indicate whether to center data when clustering
|
|
clusterAxis
{string} samples
|
Default axis to use when clustering data.
samples, variables
|
|
distance
{string} euclidian
|
Distance metric to use when clustering data.
euclidian, manhattan, max
|
|
imputeMethod
{string} mean
|
Imputation method for missing data when clustering
mean, median
|
|
kmeansClusters
{int} 3
|
Number of clusters when clustering data with kmeans.
|
|
linkage
{string} single
|
Linkage type to use when clustering data.
single, complete, average
|
|
maxIterations
{int} 10
|
Number of maximum iterations when clustering data with kmeans.
|
|
axisExact
{boolean} false
|
Flag to force exact values for the data
|
|
axisExtension
{float} 0.1
|
Percentage to extend the values in the data
|
|
setMax
{mixed} null
|
Maximum value to set the data
|
|
setMax2
{mixed} null
|
Maximum value to set the data in the 2nd axis
|
|
setMaxX
{mixed} null
|
Maximum value to set the data in the X axis
|
|
setMaxY
{mixed} null
|
Maximum value to set the data in the Y axis
|
|
setMaxZ
{mixed} null
|
Maximum value to set the data in the Z axis
|
|
setMin
{mixed} null
|
Minimum value to set the data
|
|
setMin2
{mixed} null
|
Minimum value to set the data in the 2nd axis
|
|
setMinX
{mixed} null
|
Minimum value to set the data in the X axis
|
|
setMinY
{mixed} null
|
Minimum value to set the data in the Y axis
|
|
setMinZ
{mixed} null
|
Minimum value to set the data in the Z axis
|
|
ticks
{int} 50
|
Number of ticks in the genome browser
|
|
timeTicksFirst
{string} false
|
Flag to indicate whether to use the first date on a time graph or the last
|
|
timeValueIndices
{array} empty
|
Array containig the indices of the values when the the graph is a time series
|
|
timeValues
{array} empty
|
Array containig the tick values when the the graph is a time series
|
|
xAxis
{array} empty
|
Indices for the samples groups or variables to be displayed in the X axis
|
|
xAxis2
{array} empty
|
Indices for the samples groups or variables to be displayed in the 2nd X axis
|
|
xAxis2AbsMax
{mixed}
|
Maximum unfiltered value for the 2nd X axis
|
|
xAxis2AbsMin
{mixed}
|
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} empty
|
Values for the minor ticks in the 2nd X axis
|
|
xAxis2Ticks
{int} 5
|
Number of ticks in the 2nd X axis
|
|
xAxis2Values
{array} empty
|
Values for the ticks in the 2nd X axis
|
|
xAxisAbsMax
{mixed}
|
Maximum unfiltered value for the X axis
|
|
xAxisAbsMin
{mixed}
|
Minimum unfiltered value for the X axis
|
|
xAxisCurrent
{int}
|
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} empty
|
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(220,220,220)
|
Color for the tick lines in the X axis
|
|
xAxisTickStyle
{string} solid
|
Style for the tick lines in the X axis
solid, dotted
|
|
xAxisTicks
{int} 5
|
Number of ticks in the X axis
|
|
xAxisTitle
{string} false
|
Title for the X axis
|
|
xAxisTransform
{mixed} false
|
Tranformation for the values in the X axis.
log2, log10, exp2, exp10, percentile
|
|
xAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the X axis
|
|
xAxisValues
{array} empty
|
Values for the ticks in the X axis
|
|
yAxis
{array} empty
|
Indices for the samples groups or variables to be displayed in the Y axis
|
|
yAxisAbsMax
{mixed}
|
Maximum unfiltered value for the Y axis
|
|
yAxisAbsMin
{mixed}
|
Minimum unfiltered value for the Y axis
|
|
yAxisCurrent
{int}
|
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} empty
|
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(220,220,220)
|
Color for the tick lines in the Y axis
|
|
yAxisTickStyle
{string} solid
|
Style for the tick lines in the Y axis
solid, dotted
|
|
yAxisTicks
{int} 5
|
Number of ticks in the Y axis
|
|
yAxisTitle
{string} false
|
Title for the Y axis
|
|
yAxisTransform
{mixed} false
|
Tranformation for the values in the Y axis.
log2, log10, exp2, exp10, percentile
|
|
yAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the Y axis
|
|
yAxisValues
{array} empty
|
Values for the ticks in the Y axis
|
|
zAxis
{array} empty
|
Indices for the samples groups or variables to be displayed in the Z axis
|
|
zAxisAbsMax
{mixed}
|
Maximum unfiltered value for the Z axis
|
|
zAxisAbsMin
{mixed}
|
Minimum unfiltered value for the Z axis
|
|
zAxisCurrent
{int}
|
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} empty
|
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(220,220,220)
|
Color for the tick lines in the Z axis
|
|
zAxisTickStyle
{string} solid
|
Style for the tick lines in the Z axis
solid, dotted
|
|
zAxisTicks
{int} 5
|
Number of ticks in the Z axis
|
|
zAxisTitle
{string} false
|
Title for the Z axis
|
|
zAxisTransform
{mixed} false
|
Tranformation for the values in the Z axis.
log2, log10, exp2, exp10, percentile
|
|
zAxisTransformTicks
{boolean} true
|
Flag to transform the values of the ticks in the Z axis
|
|
zAxisValues
{array} empty
|
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.
|
|
blockContrastEvenColor
{color} rgb(240,240,240)
|
The color for the contrast block (even samples).
|
|
blockContrastOddColor
{color} background color
|
The color for the contrast block (odd samples).
|
|
blockFactor
{int} 1
|
Factor to adjust the size of the bars or dots in the graphs. The default is 1. If you want to make the bars or dots wider then increse this parameter (2 is twice as big).
|
|
blockSeparationFactor
{int} 1
|
Factor to adjust the spacing between the bars or dots in the graphs. The default is 1. If you want to make the bars or dots wider apart then increse this parameter (2 is twice as much)
|
|
smpHairline
{mixed} dotted
|
This is a thin line that appears in the middle of the bar graphs just for aesthetics.
false, solid, dotted
|
|
smpHairlineColor
{color} rgb(220,220,220)
|
The color for the thin line that appears in the middle of the bar graphs
|
|
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
{mixed} sybol
|
Lines decorations in the line graphs
false, dot, symbol
|
|
lineTickness
{int} 1
|
Thickness in pixels for line plots
|
|
colorBy
{mixed} false
|
Name of a variable annotation or a sample name or the string 'variable' to color the variables.
|
|
isScatterLine
{boolean} false
|
Flag to draw lines to join data points in data series in scatter plots
|
|
isSelectDataPoints
{int}
|
Number of selected data points (in the data object).
|
|
selectDataPoint
{array} []
|
Ids of data points (in the data object) to select.
|
|
shapeBy
{mixed} false
|
Name of a variable annotation or a sample name or the string 'variable' to shape the variables.
|
|
sizeBy
{mixed} false
|
Name of a variable annotation or a sample name or the string 'variable' to size the variables.
|
|
allVsAll
{boolean} false
|
Flag to plot an n-1 x n-1 matrix of 2D sccaterplots
|
|
allVsAllType
{string} both
|
Type for the n-1 x n-1 matrix of 2D sccaterplots
both, upper, lower
|
|
functionIntervals
{int} 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
{int} 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.
|
|
rotationDelay
{int} 100
|
Time in milliseconds to wait between rendering the plot when dragging the mouse.
|
|
rotationSensitivity
{int} 45
|
Factor to adjust the sensitivity of the mouse when rotating the graph
|
|
rotationStep
{int} 2
|
Number of degrees used when the plot is automatically rotated
|
|
xRotate
{int} 45
|
Number of degrees to rotate graph arround the X axis
|
|
yRotate
{int}
|
Number of degrees to rotate graph arround the Y axis
|
|
zRotate
{int}
|
Number of degrees to rotate graph arround the Z axis
|
|
heatmapType
{string} 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
blue, blue-green, blue-red, blue-yellow, blue-cyan, blue-purple, green, green-blue, green-red, green-yellow, green-cyan, green-purple, red, red-blue, red-green, red-yellow, red-cyan, red-purple, yellow, yellow-green, yellow-red, yellow-yellow, yellow-cyan, yellow-purple, cyan, cyan-green, cyan-red, cyan-cyan, cyan-cyan, cyan-purple, purple, purple-green, purple-red, purple-purple, purple-cyan, purple-purple
|
|
indicatorCenter
{string} 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.
white, black, rainbow, rainbow-red, rainbow-green
|
|
indicatorHeight
{int} 8
|
Length in pixels for the heatmap indicator
|
|
indicatorWidth
{int} 1
|
Length in pixels for the heatmap indicator line width used for increase the size of the indicator
|
|
smpIndicesStart
{int}
|
Number that indicates starting point for samples in heatmaps when the canvas is zoom in.
|
|
varIndicesStart
{int}
|
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
{int} 40
|
Length in pixels of the height of the correlation anchor legend
|
|
correlationAxis
{string} samples
|
Axis used for the correlation.
samples, variables
|
|
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
{int} 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
{string} 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
{string} 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} false
|
Colors for the Venn bubles.
|
|
vennCompartments
{array}
|
Name for the compartments in the the Venn diagrams
|
|
vennGroups
{int} 4
|
Number of groups in the Venn diagram
|
|
maxPieSectors
{float} 20
|
Max pie sectors. After that number the sectors will be put in a sector named 'other'.
|
|
pieSegmentLabels
{string} inside
|
Location for the values in the pie charts
inside, outside
|
|
pieSegmentPrecision
{int}
|
Number of decimals for values in the Pie charts
|
|
pieSegmentSeparation
{int} 3
|
Length in pixels for the separation of the pieces of the pie charts
|
|
pieType
{string} separated
|
Position for the pices of the pie
separated, solid
|
|
showPieGrid
{float} true
|
A flag to show the labels for the grid when plotting multiple pies
|
|
showPieSampleLabel
{float} true
|
A flag to show the sample label when plotting mutliple pies
|
|
showSMA10
{boolean} false
|
Flag to show or not 10 day single moving average in the candlestick graphs
|
|
showSMA25
{boolean} false
|
Flag to show or not 25 day single moving average in the candlestick graphs
|
|
showSMA5
{boolean} false
|
Flag to show or not 5 day single moving average in the candlestick graphs
|
|
showSMA50
{boolean} false
|
Flag to show or not 50 day single moving average in the candlestick graphs
|
|
showVolume
{boolean} true
|
Flag to show or not volume in the candlestick graphs
|
|
sma10Color
{color} rgb(255,120,0)
|
The color for the 5 day single moving average
|
|
sma25Color
{color} rgb(255,120,0)
|
The color for the 25 day single moving average
|
|
sma50Color
{color} rgb(255,120,0)
|
The color for the 50 day single moving average
|
|
sma5Color
{color} rgb(255,120,0)
|
The color for the 5 day single moving average
|
|
approximateNodePositions
{boolean} false
|
Flag to force approximate X, Y node positions.
|
|
calculateLayout
{boolean} true
|
Flag to force or not to calculate the network layout.
|
|
colorEdgeBy
{mixed} false
|
Name of the attribute to color the edges.
|
|
colorNodeBy
{mixed} false
|
Name of the attribute to color the nodes.
|
|
edgeWidth
{int} 1
|
Default width for the edges in the networks
|
|
is3DNetwork
{boolean} false
|
Flag to create or not a 3D network
|
|
layoutTime
{int} 15
|
Time in milliseconds used to calculate the layout for the network
|
|
network2DRotate
{int}
|
Number of degrees to rotate network arround the X axis
|
|
networkDepth
{int}
|
Depth of the radial network.
|
|
networkDivisions
{int}
|
Number of angular divisions in the radial network.
|
|
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
{string} forceDirected
|
Type of network layout.
forceDirected, radial
|
|
networkRoot
{mixed} false
|
Node Id of the network root.
|
|
networkStack
{array}
|
Array to keep state of the network after a drag or move
|
|
networkStackStates
{int}
|
Number of states to keep in the network stack after a drag or move
|
|
nodeFont
{font}
|
Font for the text in networks
|
|
nodeFontColor
{color} background color
|
Color for the network text
|
|
nodeFontSize
{int} node width
|
Size in pixels for the font size of text in the networks
|
|
nodeWidth
{int} 10 | 20
|
Length in pixels for the size of the nodes in the network
|
|
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
{int} 5
|
Default number of maximum edges when creating random networks
|
|
randomNetworkNodes
{int} 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
|
|
scaleNodeFontFactor
{int} 1
|
Scaling factor used to increse or decrease network text font size in the canvas.
|
|
shapeEdgeBy
{mixed} false
|
Name of the attribute to shape the nods.
|
|
shapeNodeBy
{mixed} 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.
|
|
showNetworkRadialLayout
{boolean} false
|
Flag to show or not a radial layout wire.
|
|
showNodeNameThreshold
{int} 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.
|
|
sizeEdgeBy
{mixed} false
|
Name of the attribute to size the edges.
|
|
sizeNodeBy
{mixed} 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
|
|
featureHeightDefault
{int} 8
|
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
{int} 8
|
Size in pixels for the font size of text of the features in the genome browser
|
|
featureTypeDefault
{string} line
|
Default type for the feature in the genome browser
box, bar, heatmap, sequence, triangle, line
|
|
featureWidthDefault
{int} 3
|
Default size in pixels of the feature width
|
|
periodTicksLabels
{int} 5
|
Number of ticks to skip between values in the genome browser
|
|
sequenceAColor
{color} rgb(255,255,0)
|
Color for the adenines in the genome browser
|
|
sequenceCColor
{color} rgb(0,255,255)
|
Color for the cytosines in the genome browser
|
|
sequenceFont
{font}
|
Font for the text of the sequence in the genome browser
|
|
sequenceFontSize
{int} 10
|
Size in pixels for the font size of text of the sequence in the genome browser
|
|
sequenceGColor
{color} rgb(0,255,0)
|
Color for the guanines in the genome browser
|
|
sequenceMColor
{color} rgb(255,0,255)
|
Color for the degenerate nucleotide sequences in the genome browser
|
|
sequenceTColor
{color} rgb(255,0,0)
|
Color for the thymidines in the genome browser
|
|
showFeatureNameThereshold
{int} 20
|
Threshehold used to set te limit when there are too many features in the genome browser
|
|
tension
{float} 0.3
|
Number to adjust the splines curvature
|
|
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
{int} 10
|
Size in pixels for the font size of text of the tracks in the genome browser
|
|
wireColor
{color} rgba(220,220,220,0.1)
|
Color for the ticks in the genome browser
|
|
debug
{boolean} true
|
Flag to turn on alerts.
|
|
showVersion
{boolean} true
|
Flag to show version when mouse over top-left corner of the canvas.
|
|
dataEvent
{array}
|
Array to store the areas that will trigger an event
|
|
disableConfigurator
{boolean} false
|
Flag to disable configurator.
|
|
disableEvents
{boolean} false
|
Flag to disable all events.
|
|
dragAreaColor
{color} rgb(208,222,240)
|
Color for the div displayed when mouse is dragged over the graph to zoom in the canvas
|
|
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.
|
|
infoAreaColor
{color} rgb(208,222,240)
|
Color for the div displayed when mouse over an element in the canvas
|
|
infoTimeOut
{int} 3000
|
Time in milliseconds to wait between updates for the mouse over info to show up
|
|
isBroadcasting
{boolean} true
|
Flag to enable broadcasting to other canvasXpress objects in the page
|
|
modelEvent
{string} global
|
Model to handle the events. Experimental
global, local
|
|
selectedBackgroundColor
{color} rgb(208,222,240)
|
Color for the selected objects in the canvas
|
|
resizerAreaColor
{color} rgb(220,220,220)
|
Color for the div that shows up when resizing the axes in the canvas or the whole canvas
|
|
resizerAreaColorCurrent
{color} rgb(153,187,232)
|
Color for the div that shows up the current area selected in the axes in the canvas
|
|
resizerAreaColorOutlineCurrent
{color} rgb(153,187,232)
|
Color for the div that shows up the current area selected in the axes in the canvas
|
|
resizerBackgroundImage
{string} -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
{string} bottom
|
Position for the axis resizer in complex plots
top, rigth, bottom, left
|
|
resizerTransparency
{boolean} true
|
Flag to make the axis resizers transparent
|
|
resizerType
{mixed} false
|
String to indicate the type of axis resizer in complex plots
false, samples, box
|
|
resizerWidth
{int} 18
|
Length in pixels for the width of the visible axis resizer
|
|
animationCycles
{int} 20
|
Number of cycles to plot the graph for the animations.
|
|
animationTime
{int} 30
|
Time in milliseconds to wait between rendering the plot when showing the animation.
|
|
animationType
{string} grow
|
Type of animation
grow, spring, random
|
|
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
{int} 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
{int}
|
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
1, 2, 3
|
|
layoutComb
{boolean} false
|
Flag that identify that multiple graphs will be displayed in the canvas.
|
|
layoutCurrent
{int}
|
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.
|
|
layoutMaxLegend
{int}
|
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
{mixed}
|
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.
|
|
imageDir
{string} http://canvasxpress.org/images/
|
Relative path to a directory contaioning images
|
|
nextButton
{string} fast_forward.png
|
Relative path to an image file to the next button (not including the image directory)
|
|
playButton
{string} play.png
|
Relative path to an image file to the play button (not including the image directory)
|
|
previousButton
{string} rewind.png
|
Relative path to an image file to the previous button (not including the image directory)
|
|
stopButton
{string} 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
{int} 1000
|
Time in milliseconds to wait between iterations over remote data sets
|
|
remoteDataIndex
{int}
|
Index of the canvasXpress object requested
|
|
remoteDirection
{string} next
|
Direction parameter used to obtain data remotely.
next, prev
|
|
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.
|
|
remoteService
{url} false
|
Url used to obtain data remotely. It expects and array of canvasXpress objects
|
|
remoteUpdating
{boolean}
|
Initialize general attributes, shapes, lines etc
|
|
remoteWindow
{int} 1
|
Number of plots to show when requesting remote data
|
The parameter events is a json object with the user
defined events. By default I assign the two events that
canvasXpress supports which are mouseover and click. The events
can also handle scope as shown below. In json format the
events is like this:
{mouseover: function(o) {
// Do something ...
},
click: function(o) {
// Do something else ...
}
}
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. The
click event by default is to call a method in the library datadumper to alert the data object.
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.
Shortcuts
Reseting the canvas
In order to reset the canvas just press the 'esc' key.
Selecting data point 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.
Printing the canvas
To print the canvas you need to simultaneously click the 'ctrl' and the 'p' keys.
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.
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.
License
This library is released as LGPL3. So you can do basically
anything you want as long as the copyrigth notice is included
without any modification
/*
* CanvasXpress 4.0 - JavaScript Canvas Library
*
* Copyright (c) 2009-2010 Isaac Neuhaus
*
* imnphd@gmail.com
*
* Redistributions of this source code must retain this copyright
* notice and the following disclaimer.
*
* CanvasXpress is licensed under the terms of the Open Source
* LGPL 3.0 license.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*
* Thanks to Mingyi Liu for his contributions in extending the Ext panel
* and adding major capabilities to the network graphs and animations.
*
*/
Download
Please go to sourceforge to download the most recent version of the code. You will need canvasXpress.min.js and do not forget also canvasXpress.gif. Please see the usage in the documentation.