moochart - charts for mootools

Overview

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

It was originally developed for an EU-Project on the Adobe AIR platform.

Browser / Platform support

Adobe AIR 1.0+
Safari 2+
Firefox 2+
Opera 9+
Internet Explorer

Internet Explorer might work using Google's excanvas. But since time is short and i'm on a mac i havnt been able to test it. If you do please e-mail me!

moochart is released as Open Source under the MIT license.

If you like this script buy yourself a beer from me. Cheers!

Demo

Try adding some bubbles using the sliders or buttons below the graph.

color

#ff0000

tip

Add random bubbles ranging to -

The chart has a method.

And why not a ?

Usage

Simple chart example.

var myChart = new Chart.Bubble('myChartContainer', {
	width: 300,
	height: 200,
	bubbleSize: 20
});

myChart.addBubble(10, 20, 30, '#fff', 'Bubble 1');
myChart.addBubble(0, 40, 20, '#000', 'Bubble 2');

myChart.redraw();

Documentation

Constructor

Syntax

var myChart = new Chart.Bubble(container [, options]);

Arguments

container - (mixed) A string containing the id of the DOM element that should contain the chart or a reference to an actual DOM element.
options - (object, optional) Chart options, see below.

Options

width - (number: defaults to 600) Width of the chart.
height - (number: defaults to 400) Height of the chart.
xmin - (number: defaults to 100) Initial minimum value of x.
xmax - (number: defaults to 100) Initial maximum value of x.
ymin - (number: defaults to 100) Initial minimum value of y.
ymax - (number: defaults to 100) Initial maximum value of y.
zmin - (number: defaults to 100) Initial minimum value of z.
zmax - (number: defaults to 100) Initial maximum value of z.
xsteps - (number: defaults to 5) Label steps for the x-axis.
ysteps - (number: defaults to 5) Label steps for the y-axis.
xlabel - (string: defaults to '') Label/Legend for the x-axis.
ylabel - (string: defaults to '') Label/Legend for the y-axis.
bubbleSize - (number: defaults to 30) Maximum bubble size in pixels.
lineColor - (mixed: defaults to '#000') Color for the lines and labels.

Method - addBubble

Add a bubble to the chart

Syntax

myChart.addBubble(x, y, z, color, tooltip)

Arguments

x - (number) X-value.
y - (number) Y-value.
z - (number) Z-value.
color - (mixed) Bubble color as css color or array [r, g, b].
tooltip - (string) Tooltip for the graph.

Method - redraw

Redraws bubbles, needs to be called after addBubble for changes to show.

Syntax

myChart.redraw()

Method - empty

Removes all bubbles from graph.

Syntax

myChart.empty()

Download

Dependencies: MooTools 1.2 Core

moochart-0.1b1.js - yui compressed

moochart-0.1b1-nc.js - no compression

Please don't link directly, download and host your own copy.

Changelog

2008-06-25 - 0.1b1
------------------------------------------
Initial Public Release

Contact

If you have any questions, suggestions or whatever send them to johan@coneri.se