Plotr - Javascript Graph

• A very simple graphing utility using javascript and canvas
• Currently only 3d bar charts can be produced

About

• Download
• How to...
• Documentation
• Examples

topDownload

plotr.js - 14kb

Last updated - Mar 28, 2009

topHow to...

To plot graphs, include the above script somewhere in your page and create a canvas element preferably wrapped by a div.

<div id="graph">
	<div id="graph-ct">
		<canvas id="graph-canvas" width="750" height="200"></canvas>
	</div>
</div>

The top most wrapper with the id graph has a lot of padding to acommodate for the x, y labels and graph legends.

After this, the graph can be plotted by doing the following:

new Plotr('graph-canvas', GData);

Where GData is the graph data containing graph options, the actual plot, labels, legends, bar colors etc.

topDocumentation

Description

new Plotr(string canvas_id, object graph_data_options);

Parameters

Plotr

The object returned when creating an instance of a Plotr class.

Method	Description
init	Initialization function for the Plotr class. Sets up options, locates canvas element and calls function to draw graph.
draw	Initialization function for the Plotr class. Sets up options, locates canvas element and calls function to draw graph. Plotr object draw([object graph_data_options]);
clearGraph	Completely clears the graph and deletes all labels and legends. Automatically called when using the draw method. Plotr object clearGraph();
restoreBase	Restores the graph base - the y and x-axis and corresponding grids. Plotr object restoreBase();

canvas_id

This is the id for the canvas element. The width and height for the canvas should be specified with their respective attributes.

graph_data_options

An object containing all the graph options and the data values.

Attribute	Type	Description
3d	object	width height
bgColor	color	This is used to fill the canvas background. Can be a color string of either hash, rgb or hsl type.
opacity	number	A value between 0 and 1 specifying the opacity of the bars.
outline	boolean	If true draws an outline around the bars.
xAxis	object	color: X axis color. gridColor: Vertical grid color. gridWidth: Vertical grid thickness. height: Height of the x axis. labels: [optional] An array containing all the labels for the x axis.
yAxis	object	color: Y axis color. gridColor: Vertical grid color. gridWidth: Vertical grid thickness. max: Maximum value for the y axis. min: Minimum value for the y axis. steps: Number of steps in the y axis. width: Y axis thickness.
elements	array	An array of objects containing data set and options for that particular data set. Each element object has the following properties: color: Bar color for this data set. label: Label for this data set. This is also the legend. values: And array of values.

Html Elements

The axes labels, legends and bar values are created/injected using html.

The plot legends are given the following class name: __graph-legend

The axes labels are given the following class name: __graph-x-label and __graph-y-label

The plot values are given the following class name: __graph-value

The examples on this page uses the following css rules for the graphs:

.graph{
	padding: 50px; /*give the legends and labels enough space*/
	padding-right: 0;
	position: relative;
}

.graph-ct{
	position: relative; /*important*/
}

.graph-ct canvas{
	display: block;
}

.graph-ct .__graph-legend{
	font-weight: bold;
	margin-top: -20px;
	position: absolute; /*important*/
}

.graph-ct .__graph-legend b{ /*the dash before the legend label*/
	font-size: medium;
	font-weight: bold;
}

.graph-ct .__graph-x-label,
.graph-ct .__graph-y-label,
.graph-ct .__graph-value{
	color: #666;
	font-size: x-small;
	position: absolute; /*important*/
}

.graph-ct .__graph-y-label{
	margin-left: -6px;
}

.graph-ct .__graph-value{
	-moz-border-radius: 1px;
	color: #000;
	font-weight: bold;
	margin-top: -6px;
	padding: 0 3px;
	visibility: hidden;
}

.graph:hover .__graph-value{
	visibility: visible;
}

.graph-ct .__graph-value:hover{
	background: #edebe1;
	cursor: none;
	display: inherit;
	font-size: large;
	margin-left: -0.5em;
	margin-top: -0.5em;
	z-index: 1000;
}

topExample

new Plotr('graph-canvas',
{
    elements:
    [
        {
            label: 'Green',
            values: [27, 262, 194, 278, 25],
            color: '#69907f'
        },
        {
            label: 'Brown',
            values: [163, 172, 118, 249, 18],
            color: '#5f411e'
        },
        {
            label: 'Blue',
            values: [267, 268, 193, 152, 173],
            color: '#2e567d'
        }
    ],
    xAxis:
    {
        labels: ['Mar 21, 2009', 'Mar 22, 2009', 'Mar 23, 2009', 'Mar 24, 2009', 'Mar 25, 2009']
    },
    yAxis:
    {
        min: 0,
        max: 300,
        steps: 3
    }
});