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 = ["black", "white", "black"]; // use three colors
chart.gene.linearGradient = ["rgb(170, 170, 170)", "rgb(100, 100, 100"]; // use two colors to create texture

• Gene Text

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

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'

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