Documentation

Quick Start - Create a simple chart

// Get Canvas and Create Chart
var canvas = document.getElementById(canvasName);  		
// Create Chart
var chart = new Scribl(canvas, 500);
// Add Gene      position, length, orientation
var gene = chart.addGene( 900,    750 , '-');
// Draw Chart
chart.draw();

Terms

• track - a horizontal lane that genes can be added two.

Chart Level Options

These options are applied to all genes

• Track Size - height of each track

chart.trackSize = 15 // in pixels

• Roundness - how round the gene will be

chart.gene.roundness = "0"; // make genes sharp
chart.gene.roundness = "10"; // in pixels, make genes more round

• Gene Color - color of all genes

// solid color
chart.gene.color = "black"; // this overrides linearGradient
chart.gene.color = "rgb(120, 60, 80)"; // can use RGB
// gradient
chart.gene.linearGradient = ["rgb(170, 170, 170)", "rgb(100, 100, 100"]; // use two colors to create texture
chart.gene.linearGradient = ["black", "white", "black"]; // use three or more!

• Gene Text

chart.gene.text.font = "arial";
chart.gene.text.color = "red";
chart.gene.text.size = "15"; // in pixels
chart.gene.text.align = "left";

Gene Level Options

Genes can also be individually changed, which will override the chart level options

• roundness - roundness of the gene

gene.roundness = 0;  // create a sharp gene

• Color

gene.color = "blue"; //this overrides chart.gene.color and chart.gene.linearGradient

• Text

gene.font.style = undefined; // default: 'arial'
gene.font.size = undefined;  // default: '15' in pixels 
gene.font.color = undefined; // default: 'black'

Gene Name Alignment

Text can be aligned in the gene on the chart and gene level in the following ways

// absolute positioning
chart.gene.text.align = 'left'; // aligns to the left side of the gene
chart.gene.text.align = 'center'; // aligns in the center
chart.gene.text.align = 'center'; // align to the right side

// relative positioning - based on the strand the gene in on
chart.gene.text.align = 'start'; // aligned at the start of the gene - left for '+' strand genes and right for '-' strand genes
chart.gene.text.align = 'end'; // aligned at the end of the gene - opposite of start 

Managing Tracks

For most cases it's easier to let Scribl automatically manage your tracks by adding genes to the chart itself as in the Quick Start example. However, you may find it necessary to manually manage your.

// create tracks
var geneTrack = chart.addTrack();
var proteinTrack = chart.addTrack();
// add genes
var gene1 = geneTrack.addGene(0, 1000, '+');
// add proteins
var protein1 = proteinTrack.addGene(10, 480, '+');
var protein2 = proteinTrack.addGene(500, 480, '+');

Background Customization

• colors
• curved borders
• gradient

Gene Customization

• Colors
• Shape
• Other?

Scale

• Manually Set Scale

Tooltip customization

• Background Color
• Border Color
• Border Width
• Roundness
• Font Style
• Font Size
• Linear Gradients