RaphaGraph is a graphing library built on the RaphaelJs library. As of now, it includes a number of options for different bar and pie charts, as well as increased variable depth using animated frames. The example below demonstrates its capabilities:
Below is a list of options as well as methods related to frames. Also, please support this project on Stackoverflow by voting on it for Open Source Advertising. Thanks.

Options

Basic

aData

An Array of numbers or Arrays that defines the data to be represented. If groups set to true, there can be up to three depth levels of data. Otherwise, there can be only two. Groups will be the first level, categories will be the second level, and variables will be the third level. aData can thus be passed as [[[1,2,3], [4,5,6], [7,8,9], [10,11,12]], [[1,2,3], [4,5,6], [7,8,9], [10,11,12]]]. In this example there are two groups, four categories, and three variables.
Defaultundefined

container

The id of the html element where the Raphael svg paper will be inserted.
Defaultundefined

h

The height in pixels of the Raphael paper to be created for the graph.
Default.75*options.w

names

An object with group, cat, and var properties, each with an Array of names for the given data levels. For the example for aData above, we could pass {group:['Dogs', 'Cats'], cat:['brown', 'white', 'black', 'mixed'], var:['big', 'medium', 'small']}. Required attributes depend on depth of aData, groups setting, and type of graph.
Default{}

w

The width in pixels of the Raphael paper to be created for the graph.
Defaultthe width of your HTML container element

Title Options

subtitle

Gives chart sub-title. Omit or pass false for no sub-title.
Defaultfalse

subTitleAttr

Gives chart sub-title. Omit or pass false for no sub-title.
Default{}

title

Gives chart title. Omit or pass false for no title.
Defaultfalse

titleAttr

Attribute object passed into the attribute method of the title's Raphael text element.
Default{'font-size':16}

xLabelTitle

Relevant only to bar charts. Attribute object for x-axis title. Extends textAttr.
Default{'font-size':16}

yLabelTitle

Relevant only to bar charts. Attribute object for x-axis title. Extends textAttr.
Default{'font-size':16}

Chart Styles

additive

Determines how category totals are calculated. If set to true, category totals are the sum of the category array. Otherwise, the first value in the array is assumed as the total. This impacts chart rendering in the following ways:
Defaultfalse

animate

If set to true it will animate the data sets in a pre-determined way. It uses Raphael's Element.animate to execute the animations. This option is changed to false for graphs with frames not set to false or minMax set to true.
Defaulttrue

animationLength

The number of milliseconds it takes for the each animation to take place.
Default1000

categories

Only relevant for radial-variable pie charts. Determines whether categories are rendered as concentric rings or sub-divided into smaller wedges.
Default'wedges'

groups

Changes position of variables on charts. On a bar chart this will create separate labels along the x-axis for each array of first level data. On a pie chart, this will actually create an individual pie chart of each array of first level data. See aData for more.
Defaulttrue

minMax

Currently, only relevant for bar charts with additive set to false. If minMax set to true, variables are represented as arrays [min, max] where min and max are both numbers. Bars will then be rendered as solid up to the min value and fade to white at the max value. animate and additive both must be set to false if minMax is set to true.
Defaultfalse

type

Defines the general graph type for the data.
Default'bar'

variables

Only relevant for pie charts. Determines whether variables divide each category concentrically or radially.
Default'radial'

Data Colors

aColors

An array of colors applied according to color-scope. Used only if oColors is not passed.
Default [ 'rgb(255,189,35)', 'rgb(61,147,33)', 'rgb(0,128,166)', 'rgb(120,64,176)', 'rgb(236,48,48)', 'rgb(6,28,124)' ]

color-scope

Determines how color values are assigned based on aColors or oColors. The names of the assigned scope will show up in the legend with their associated color. For a bar graph with groups set to true and only first level aData depth, this automatically changes to groups.
Default'category'

gradient

Analogous to color-scope. Once a color has been determined, it will whiten the color based on the index of the gradient scope.
Default'var'

oColors

An object that assigns a color based on group, category, or variable names (as determined by color-scope).
Defaultfalse

Labels and Styles

boxAttr

Raphael text attribute for hover box (see fnS).
Defaulttrue

legend

Determines whether a legend will be created for the specific RaphaGraph.
Defaulttrue

legendAttr

Extends textAttr and passed to text elements in the legend.
Default{'font-size':16, cursor:'pointer'}

legendBoxAttr

Attribute object for the legend outline.
Default{'stroke-width':1, color:'black'}

originAttr

Relevant only to bar charts. Attribute object for grid line at y=0.
Default{'stroke-width':2, stroke:'black'}

sigFigs

This sets the number of significant figures that will shown in hover boxes and in subtitles for grouped pie charts.
Defaultundefined

textAttr

The bottom level text attribute assigned to all Raphael text elements. Any more specific text option will take precedence over values in this object (the objects are combined through jQuery extend).
Default { 'font-family': '"Trebuchet MS", Helvetica, sans-serif', 'font-size':14 }

units

Sets the units for a graph. They will be used in the default function for the hover box.
Default''

xLabels

Relevant only to bar charts. Attribute object for x-axis labels. Extends textAttr.
Default{'font-size':14}

yLabels

Relevant only to bar charts. Attribute object for y-axis labels. Extends textAttr.
Default{'font-size':14}

Chart Event Callbacks

fnClick

This event fires when a data path element (ie a wedge, crust, bar, circle, or ring) is clicked. The context will be the Raphael element, which includes Element.data for color, val, group, cat, and var data as relevent.
Defaultfunction(){}

fnHoverIn

This event fires when the mouse enters a data path element (ie a wedge, crust, bar, circle, or ring). The context will be the Raphael element, which includes Element.data for color, val, group, cat, and var data as relevent.
DefaultSee source.

fnHoverOut

This event fires when the mouse leaves a data path element (ie a wedge, crust, bar, circle, or ring). The context will be the Raphael element, which includes Element.data for color, val, group, cat, and var data as relevent.
DefaultSee source.

fnS

This function is used by the default fnHoverIn to create a string for the hover box. The context will be the Raphael element, which includes Element.data for color, val, group, cat, and var data as relevent. Supports bold and italic html tags.
DefaultSee source.

Framing

frameInterval

The number of milliseconds between frame changes.
Default4000

frames

The frames option is passed an object with additional options for displaying different sets of data on the same graph with animation. Before any graph is displayed, frames.aData is iterated and category totals, min and maxes are calculated. These numbers are used to determine scale, axes mins and maxes (bar), and outer dashed rings (pie). Each array within frames.aData is then rendered at the frameInterval. To control the frames, you can call rg.pause(), rg.stop(), or rg.resume() (where rg is an instance of RaphaGraph).
Defaultfalse

frames.aData

An array of data sets to iterate through at frameInterval. Each data set will be used to render graphs on the same set of axes.
Defaultundefined

frames.fnPre

A function to be called before the frame changes. The context will be an Array of graph objects for the frame before the change. The graph objects will have title and total attributes.
Defaultfunction(){}

frames.fnPost

A function to be called just after the frame changes. The context will be an Array of graph objects for the frame after the change. The graph objects will have title and total attributes.
Defaultfunction(){}

Methods

The following methods are relevant only for graphs with multiple frames. Internally, framing uses a Javascript setInterval to change the rendered data. The methods below will bypass or resume the setInterval callback and are useful for building a control interface for the frames. rg below indicates an instance of RaphaGraph.

rg.pause

After this called, the setInterval will continue, however, its callback will not be executed. The rendered data will remain unchanged. This method can be followed up for a rg.resume when ready. If passed an integer, it will jump to the data set in frames.aData Array and pause once it is rendered.

rg.resume

Once this is called, the setInterval callback will begin execution again. It may take another frameInterval to jump to the next frame. This method excepts no parameters.

rg.stop

When this method is called, the setInterval that changes the rendered data rendered from frames.aData is cleared. The frames will not resume and they will be stopped permanently at the current frame.