Plotr - Javascript Graph

About

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.
MethodDescription
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.
AttributeTypeDescription
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
    }
});