Skip to content
chmille4 edited this page Mar 1, 2011 · 16 revisions

Quick Start

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
this.gene.text.font = "arial";
this.gene.text.color = "red";
this.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 - color of the gene color exposes the canvase.context.fillStyle object. You can add gradients to it like any other canvas object. More Info
gene.color = "blue"; //this overrides chart.gene.color and chart.gene.linearGradient
  • Text
this.font.style = undefined; // default: 'arial'
this.font.size = undefined;  // default: '15' in pixels 
this.font.color = undefined; // default: 'black'

Track Based Charts

Background Customization

  • colors
  • curved borders
  • gradient

Gene Customization

  • Colors
  • Shape
  • Other?

Custom Gene Events

Tooltip customization

  • Background Color
  • Border Color
  • Border Width
  • Roundness
  • Font Style
  • Font Size
  • Linear Gradients
Clone this wiki locally