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, area-line combination graphs, stacked graphs, stacked-line combination graphs, percentage-stacked graphs, percentage-stacked-line combination graphs, heatmaps, treemap plots, heatmaps, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots, pie charts, correlation plots, Venn diagrams, networks (or pathways), candlesticks plots,genome browser, circular plots, and Video. 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

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

target

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.

data

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:


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:


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].

config

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.

General
canvasBox
{boolean} true
Flag to create a box around the canvas
canvasBoxColor
{color} rgb(0,0,0)
Color for the box around the canvas
functions
{array} 
Functions exposed to the api
graphOrientation
{option} horizontal
Specifies the orientation of one dimensional graphs.
graphType
{option} Bar
Specifies the type of graph.
loadImagesTimeOut
{integer} 100
Specifies the number of milliseconds to wait trying to load images before atempting to plot the data
transparency
{float} null
Percentage of transparency applied to all elements in the visualizations
useFlashIE
{boolean} true
Flag to use flash rather than VML (through excanvas.js) when graphs are displayed in IE browsers (not HTML5 compliant).
Gradients
gradient
{boolean} false
Flag used to apply gradients to all objects in the graphs.
gradientOrientation
{option} vertical
Specifies the orientation of the gradient if the gradient type is of the type 'linear'
gradientRatio
{float} 1.3
Specifies the ratio used to generate linear gradients.
gradientType
{option} radial
Specifies the gradient pattern.
Bars and Points Adjustment
autoAdjust
{boolean} true
Flag to automatically adjust the size of the bars or points in the one dimensional plots to fit in the provided canvas width and height. If the flag is set to 'false' the width and height of the canvas will be sized according to the number of bars or points in the data set. @ see {seriesSeparationFactor,blockSeparationFactor,blockFactor}
autoAdjustMax
{integer} 3
Specifies the number of times to try to automatically adjust the size of the canvas when autoAdjust is true
autoAdjustXTries
{integer} 
Counter set when trying to automatically adjust the horizontal size of the canvas when autoAdjust is true
autoAdjustYTries
{integer} 
Counter set when trying to automatically adjust the vertical size of the canvas when autoAdjust is true
Acknowledgment
acknowledgementIcon
{option} cx.png
Specifies the acknowledgment canvasXpress icon
acknowledgementIconPosition
{option} outside
Specifies the acknowledgement canvasXpress icon position
acknowledgment
{boolean} false
Flag to include an acknowledgment image for canvasXpress
Foreground
foreground
{color} rgb(0,0,0)
Specifies the foreground color for text or lines not covered in a more specific configuration property.
foregroundWindow
{color} rgb(0,0,0)
Specifies the foreground color for text or lines when the background type is of a type 'window'.
Background
background
{color} rgb(255,255,255)
Specifies the background color for the canvas.
backgroundGradient1Color
{color} rgb(0,0,200)
Specifies the first color of the gradient if the background type is of the type of 'gradient'.
backgroundGradient2Color
{color} rgb(0,0,36)
Specifies the second color of the gradient if the background type is of the type of 'gradient'.
backgroundImage
{url} false
Specifies the url for the background image when the background type is of the type 'image' or 'windowImage'.
backgroundType
{option} solid
Specifies the style for the background of the canvas. The canvas background is composed of a frame with a window where the data is plotted. Either of these elements the may be a solid or gradient color or an image or a video of your choosing.
backgroundVideo
{url} false
An array containing urls for the background video when the background type is of the type 'video'.
backgroundWindow
{color} rgb(204,204,204)
Specifies the background color for the canvas when the background type is of a type 'window'.
backgroundWindowGradient1Color
{color} rgb(0,0,200)
Specifies the first color of the gradient if the background type is of the type of 'windowGradient'.
backgroundWindowGradient2Color
{color} rgb(0,0,36)
Specifies the second color of the gradient if the background type is of the type of 'windowGradient'.
backgroundWindowGradientOrientation
{string} vertical
Specifies the orientation of the gradient if the background type is of the type 'windowGradient' or 'windowGradient2'.
Margins
margin
{integer} 5
Specifies the length in pixels for the distance between various objects in the graphs.
marginBottom
{integer} 
Specifies the length in pixels for the bottom margin in the canvas.
marginLeft
{integer} 
Specifies the length in pixels for the left margin in the canvas.
marginRight
{integer} 
Specifies the length in pixels for the right margin in the canvas.
marginTop
{integer} 
Specifies the length in pixels for the top margin in the canvas.
Shadows
shadowBlur
{integer} 2
Amount in blur for the shadow.
shadowColor
{color} rgba(0,0,0,0.5)
Color for the shadow.
shadowOffsetX
{integer} 1.5
Length in pixels for the shadow offset in the X axis.
shadowOffsetY
{integer} 1.5
Length in pixels for the shadow offset in the Y axis.
showShadow
{boolean} false
Flag used to add shadows to all graph objects in the canvas. It will be forced to false if the browser is IE.
showTextShadow
{boolean} false
Flag used to add shadows to all text in the canvas. It will be forced to false if the browser is IE.
Video
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
videoData
{object} {}
Data for videos
videoGrid
{boolean} false
Flag to show grid in video
videoGridStep
{integer} 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} none
Preload type for videos
Text
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} middle
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
Titles, Subtitles and Citations
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
citationFontSize
{integer} 6
Size for the text of the reference citation of the graph
citationScaleFontFactor
{float} 1
Scaling factor used to increase or decrease citation font size in the canvas
subtitle
{string} rgb(0,0,0)
Title of the graph.
subtitleColor
{color} rgb(0,0,0)
Color for the subtitle
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 title
titleHeight
{integer} 30
Height for the title of the graph. The font height will be adjusted automatically to fit in the canvas.
Lines
arrowPointSize
{integer} 10
Size in pixels of the arrow head in arrow lines.
capType
{option} butt
Default type of cap for lines.
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.
joinType
{option} mitter
Default type for joining lines.
lineWidthEvent
{integer} 2
Size in pixels of the width for the events in the lines.
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'.
outlineWidth
{integer} 1
Default width in pixels for lines in networks and other line elements in all visualizations except for the lines in the line plots.
Colors
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.
evenColor
{color} rgb(240,240,240)
The color for the even numbers in samples when the property block contrast is set in one dimensional plots or the color for odd number residues in translations in genome plots.
oddColor
{color} rgb(255,255,255)
The color for the odd numbers in samples when the property block contrast is set in one dimensional plots or the color for odd number residues in translations in genome plots.
Patterns
patternImages
{array} 
Image patterns used in visualizations to fill objects. This array must have the same length as that one for the pattern names.
patternNames
{array} 
Pattern names used in visualizations to fill objects. This array must have the same length as that one for the pattern images.
patterns
{array} 
Patterns used in visualizations to fill objects. This array must contain one or more pattern names and in concert with the color array can be used to specify the pattern colors for all filled objects in the visualizations.
Attributes
images
{array} []
Array of urls of images used in scatter plots.
shapes
{array} 
Shapes used in network graphs
sizes
{array} 
Sizes used invisualizations
timeFormat
{option} isoDate
Time Format according to date.format.js Steven Levithan
Samples
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.
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
smpLabelFontColor
{color} foreground color
Font color 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 increase or decrease sample label font size in the canvas.
smpTitle
{string} false
Title for the sample axis in one dimensional plots
smpTitleFont
{font} 
Font for the sample title in one dimensional plots
smpTitleFontColor
{color} foreground color
Font color 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
Variables
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.
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
varLabelFontColor
{color} foreground color
Font color 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
varTitleFont
{font} 
Font for the variable titles in one dimensional plots
varTitleFontColor
{color} foreground color
Font color for the variable titles in one dimensional plots
varTitleFontSize
{integer} 10
Size for the variable title in one dimensional plots
varTitleScaleFontFactor
{float} 1
Scaling factor used to increse or decrease variable font size in the canvas.
Overlays
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 classify 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
Legends
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} foreground 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 increase or decrease legend font size in the canvas.
showLegend
{boolean} true
Flag to show or not the legend in the graphs
Indicators
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
Decorations
decorationFont
{font} 
Font for the decoration in scatter plots and network graphs
decorationFontSize
{integer} 10
Font size for the decorations in scatter plots and network graphs
decorationScaleFontFactor
{float} 1
Scaling factor used to increase 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
Axis Ticks and Titles
axisTickColor
{color} foreground 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
axisTickRotate
{integer} 
Rotation for graph ticks in degrees. It could be positive or negative.
axisTickScaleFontFactor
{float} 1
Scaling factor used to increse or decrease tick font size in the canvas in one and two dimensional plots
axisTitleColor
{color} foreground 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 increase or decrease title font size in the canvas in one and two dimensional plots
Data
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 there 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
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.
showErrorBarsWidth
{integer} 2
Minimum size of the bar in pixels to determine to show or hide error bars in the graphs when available.
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.
Random
randomData
{boolean} false
Flag to create or not random data for debug and demonstration 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 percentage of missing values when creating random data
Zooming and Panning
panningGlobalX
{float} 
Cumulative number of unit to pan the network in the X dimension
panningGlobalY
{float} 
Cumulative number 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
Clustering
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
Axes
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
rAxisLabelOrientation
{option} perpendicular
Orientation to show the ticks values in circular plots.
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
One dimensional plots
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
{integer} 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
{integer} 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} false
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.
Bar Graphs
showDataValues
{boolean} false
Flag to indicate whether to show data values in the one bar graphs.
Line Graphs
coordinateLineColor
{boolean} false
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} symbol
Lines decorations in the line graphs
lineThickness
{float} 1
Thickness in pixels for the lines in the line plots.
lineType
{option} rect
Type of line used to join the points in line graphs
tension
{float} 0.3
Curvature for the splines
Dot Plots
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
Box Plots
boxPlotOutliersRatio
{integer} 8
Ratio for the size of the outliers with respect to boxplot
showBoxplotOriginalData
{boolean} false
Flag to show original data in boxplots
Area Graphs
areaIsCumulative
{boolean} false
Flag to treat area graphs as cumulative values
Scatter and One-D Plots
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
outlineByData
{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)
shapeBy
{option} false
Name of a variable annotation or a sample name or the string 'variable' to shape the variables.
shapeByData
{string} false
String that identify the object containing a two dimensional array with values used to shape data points when drawing a multidimensional Heatmap. It must be located within the data.y object (for example: data.y.data2)
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.
sizeByData
{string} false
String that identify the object containing a two dimensional array with values used to size data points when drawing a multidimensional Heatmap. It must be located within the data.y object (for example: data.y.data3)
Scatter Plots
functionIntervals
{integer} 20
Number of intervals to use when drawing functions in the decorations. In Scatter 3D is more like a factor
isSelectDataPoints
{integer} 
Number of selected data points (in the data object).
scatterType
{option} false
Type of scatter plot
selectDataMode
{option} area
Type of mode to highlight selected data points
selectDataModeDescription
{option} false
Variable label to display when highlighting selected data points that must be in the 'data.z' object
selectDataPoint
{array} []
Ids of data points (in the data object) to select.
2D Scatter Plot
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
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.
3D Scatter Plot and Networks
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} null
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
Heatmaps and Networks
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
Heatmaps
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.
varTitleLabelOverlayPosition
{option} bottom
Position for variable labels
Correlation Graphs
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
Dendrograms
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.
Venn Diagrams
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
Pie Charts
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
{boolean} 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
{boolean} true
A flag to show the values for the pie
startPieSectors
{float} 
Starting degrees for pie sectors. 0 is equivalent to 3:00 oclock
Circular Graphs
arcSegmentsSeparation
{integer} 8
Number of degrees to separate the segments in the circular plots
circularCenterProportion
{float} 0.3
Proportion of the center of the circular graph to use as void
circularConnectionsTransparency
{float} 0.5
Percentage of transparency applied to the connections in the circular graphs
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
rAxis
{string} false
Radial axis for circular plots. It must be the name of a variable
rAxisZero
{boolean} false
Flag to force the rAxis to start from zero otherwise it starts from the minimum value
ringSeparation
{integer} 9
Number of pixels to separate the rings in the circular plots
ringsType
{array} []
Array containing the types for each ring in the circular plots
ringsWeight
{array} []
Array containing the dimensions for each ring in the circular plots
showCircularConnections
{boolean} true
Flag to show connections in circular graphs
showRingLegend
{boolean} true
Flag to show legends in each ring of a circular graph
smpLabelOrientation
{option} perpendicular
Orientation to show the sample names
Candlestick 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
Network Graphs
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
overrideAnchorNodes
{boolean} false
Flag to override anchor nodes
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
Genome Browser
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
featureCoordinateHeight
{integer} 12
Default size in pixels of the coordinates height
featureCoordinateShow
{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
featureQualityHeight
{integer} 12
Default size in pixels of the quality height
featureQualityShow
{boolean} true
Flag use to show quality
featureQualityValues
{boolean} false
Flag use to show values for the quality
featureSignalToNoiseHeight
{integer} 12
Default size in pixels of the quality height
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
featureTranslateHeight
{integer} 12
Default size in pixels of the translation height
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
Debug
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.
Skins
selectedBackgroundColor
{color} 
Color for the highlight skin automatically calculated
skin
{option} grey
Skin for the application
skinProperties
{array} 'skinBackgroundColor', 'skinBorderColor', 'skinColor', 'skinShadowColor'
Properties for the skin
skinPropertiesBlue
{array} []
Values for the blue skin
skinPropertiesGrey
{array} []
Values for the grey skin
Events
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.
disableMenu
{boolean} false
Flag to disable showing the menu on right clicks
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} false
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
resizeHeightOnLayout
{boolean} false
Flag to enable resizing the height of the canvas after changing the layout
resizeWidthOnLayout
{boolean} true
Flag to enable resizing the width of the canvas after changing the layout
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.
Axis Resizer
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} false
Resizer background image
resizerDataIndex
{integer} 
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
Animation
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.
Snapshots
isAnimation
{boolean} 
Flag to indicate if there is an active animation
snapshots
{array} 
Array to hold the data used in the animation
Combination Plots
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.
Images
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)
Remote Procedures
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
Data Table/Filter
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
Data Filters
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'
Data Table
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
{integer} 
Starting column in the data table
startRow
{integer} 
Starting row in the data table

events

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.

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. I do appreciate however if you acknowlegde the use of CanvasXpress in your web site. 


/*
* CanvasXpress 7.2 - JavaScript Canvas Library
*
* Copyright (c) 2009-2012 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 .
*
* Commercial use is permitted to the extent that this source code
* do NOT become part of any other Open Source or Commercially licensed
* development library or toolkit without explicit permission.
*
* Network graphs were implemented based on the HeyGraph by Tom Martin
* .
*
* Thanks to Mingyi Liu for his contributions with the Ext-JS panel and
* network graphs and Charles Tilford for his input to the Genome Browser.
*
*/

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.

 
Copyright © 2010 canvasXpress.org | Isaac Neuhaus | Site Powered by Artician