Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

Commit

Permalink
docs merged with master
Browse files Browse the repository at this point in the history
  • Loading branch information
@karolk
karolk committed Aug 16, 2012
2 parents e2f506b + 600eef6 commit 0d20ba2
Show file tree
Hide file tree
Showing 7 changed files with 797 additions and 45 deletions.
425 changes: 406 additions & 19 deletions docs/reference.html
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions docs/reference.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,12 @@ Raphael(function () {
prepare("Paper.label-extra").label(50, 50, "$9.99");
prepare("Paper.blob-extra").blob(50, 50, "Hello", 60);

prepare("Paper.dotchart-extra").dotchart(0, 0, 99, 99, [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], {max: 7, heat: true, gutter: 1, axisxstep: 4});
prepare("Paper.linechart-extra").linechart(0, 0, 99, 99, [1,2,3,4,5], [[1,2,3,4,5], [1,3,9,16,25], [100,50,25,12,6]], {smooth: true, colors: ['#F00', '#0F0', '#FF0'], symbol: 'circle', width: 1});

prepare("Element.lighter-extra").circle(50, 50, 20).attr(fill).lighter(6);
prepare("Element.darker-extra").circle(50, 50, 20).attr(fill).darker(6);
prepare("Element.resetBrightness-extra").circle(50, 50, 20).attr(fill).lighter(6).resetBrightness();


});
83 changes: 68 additions & 15 deletions g.bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,35 @@
}
}

/*
* Vertical Barchart
*/
/*\
* Paper.vbarchart
[ method ]
**
* Creates a vertical bar chart
**
> Parameters
**
- x (number) x coordinate of the chart
- y (number) y coordinate of the chart
- width (number) width of the chart (respected by all elements in the set)
- height (number) height of the chart (respected by all elements in the set)
- values (array) values
- opts (object) options for the chart
o {
o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
o vgutter (number)
o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
o stacked (boolean) whether or not to tread values as in a stacked bar chart
o to
o stretch (boolean)
o }
**
= (object) path element of the popup
> Usage
| r.vbarchart(0, 0, 620, 260, [76, 70, 67, 71, 69], {})
\*/

function VBarchart(paper, x, y, width, height, values, opts) {
opts = opts || {};

Expand Down Expand Up @@ -387,10 +413,45 @@
chart.covers = covers;
return chart;
};

/**
* Horizontal Barchart
*/

//inheritance
var F = function() {};
F.prototype = Raphael.g;
HBarchart.prototype = VBarchart.prototype = new F; //prototype reused by hbarchart

Raphael.fn.barchart = function(x, y, width, height, values, opts) {
return new VBarchart(this, x, y, width, height, values, opts);
};

/*\
* Paper.barchart
[ method ]
**
* Creates a horizontal bar chart
**
> Parameters
**
- x (number) x coordinate of the chart
- y (number) y coordinate of the chart
- width (number) width of the chart (respected by all elements in the set)
- height (number) height of the chart (respected by all elements in the set)
- values (array) values
- opts (object) options for the chart
o {
o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
o vgutter (number)
o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
o stacked (boolean) whether or not to tread values as in a stacked bar chart
o to
o stretch (boolean)
o }
**
= (object) path element of the popup
> Usage
| r.barchart(0, 0, 620, 260, [76, 70, 67, 71, 69], {})
\*/

function HBarchart(paper, x, y, width, height, values, opts) {
opts = opts || {};

Expand Down Expand Up @@ -606,16 +667,8 @@
return chart;
};

//inheritance
var F = function() {};
F.prototype = Raphael.g;
HBarchart.prototype = VBarchart.prototype = new F;

Raphael.fn.hbarchart = function(x, y, width, height, values, opts) {
return new HBarchart(this, x, y, width, height, values, opts);
};

Raphael.fn.barchart = function(x, y, width, height, values, opts) {
return new VBarchart(this, x, y, width, height, values, opts);
};
})();
112 changes: 107 additions & 5 deletions g.dot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,25 @@
* Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/

(function () {
var colorValue = function (value, total, s, b) {
return 'hsb(' + [Math.min((1 - value / total) * .4, 1), s || .75, b || .75] + ')';
};

function Dotchart(paper, x, y, width, height, valuesx, valuesy, size, opts) {

var chartinst = this;

function drawAxis(ax) {
+ax[0] && (ax[0] = chartinst.axis(x + gutter, y + gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 2, opts.axisxlabels || null, opts.axisxtype || "t", null, paper));
+ax[1] && (ax[1] = chartinst.axis(x + width - gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 3, opts.axisylabels || null, opts.axisytype || "t", null, paper));
+ax[2] && (ax[2] = chartinst.axis(x + gutter, y + height - gutter + maxR, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 0, opts.axisxlabels || null, opts.axisxtype || "t", null, paper));
+ax[3] && (ax[3] = chartinst.axis(x + gutter - maxR, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 1, opts.axisylabels || null, opts.axisytype || "t", null, paper));
}


//providing defaults

opts = opts || {};
var chartinst = this;
var xdim = chartinst.snapEnds(Math.min.apply(Math, valuesx), Math.max.apply(Math, valuesx), valuesx.length - 1),
minx = xdim.from,
maxx = xdim.to,
Expand All @@ -43,6 +45,13 @@

gutter = Math.max.apply(Math, R.concat(gutter));

/*\
* dotchart.axis
[ object ]
**
* Set containing Elements of the chart axis. Only exists if `'axis'` definition string was passed to @Paper.dotchart
**
\*/
var axis = paper.set(),
maxR = Math.max.apply(Math, R);

Expand Down Expand Up @@ -104,20 +113,65 @@
covers[i].dot = series[i];
}

/*\
* dotchart.covers
[ object ]
**
* Set of Elements positioned above the symbols and mirroring them in size and shape. Covers are used as a surface for events capturing. Each cover has a property `'dot'` being a reference to the actual data-representing symbol.
**
**
\*/
res.covers = covers;
/*\
* dotchart.series
[ object ]
**
* Set of Elements containing the actual data-representing symbols.
**
**
\*/
res.series = series;
res.push(series, axis, covers);

/*\
* dotchart.hover
[ method ]
> Parameters
- mouseover handler (function) handler for the event
- mouseout handler (function) handler for the event
* Conveniece method to set up hover-in and hover-out event handlers
= (object) @dotchart object
**
\*/
res.hover = function (fin, fout) {
covers.mouseover(fin).mouseout(fout);
return this;
};

/*\
* dotchart.click
[ method ]
> Parameters
- click handler (function) handler for the event
* Conveniece method to set up click event handler
= (object) @dotchart object
**
\*/
res.click = function (f) {
covers.click(f);
return this;
};

/*\
* dotchart.each
[ method ]
> Parameters
- callback (function) called for every item in @dotchart.covers.
- this (object) callback is executed in a context of a cover element object
* Conveniece method iterating on every symbol in the chart
= (object) @dotchart object
**
\*/
res.each = function (f) {
if (!paper.raphael.is(f, "function")) {
return this;
Expand All @@ -130,6 +184,15 @@
return this;
};

/*\
* dotchart.href
[ method ]
> Parameters
- map (array) Array of objects `{x: 1, y: 20, value: 15, href: "http://www.raphaeljs.com"}`
* Iterates on all @dotchart.covers elements. If x, y and value on the object are the same as on the cover it sets up a link on a symbol using the passef `href`.
= (object) @dotchart object
**
\*/
res.href = function (map) {
var cover;

Expand All @@ -149,7 +212,46 @@
F.prototype = Raphael.g
Dotchart.prototype = new F;

//public
/*
* dotchart method on paper
*/
/*\
* Paper.dotchart
[ method ]
**
* Plots a dot chart
**
> Parameters
- x (number) x coordinate of the chart
- y (number) y coordinate of the chart
- width (number) width of the chart (respected by all elements in the set)
- height (number) height of the chart (respected by all elements in the set)
- valuesx (array) values used to plot x asis
- valuesy (array) values used to plot y asis
- size (array) values used as data
- opts (object) options for the chart
> Possible options
o {
o max (number) maximum diameter of a dot [default: 100]
o symbol (string) symbol used for rendering on the chart. The only possible option is `'circle'` [default]
o gutter (number) distance between symbols on the chart [default: 10]
o heat (boolean) whether or not to enable coloring higher value symbols with warmer hue [default: false]
o opacity (number) opacity of the symbols [default: 1]
o href (array) array of URLs to set up click-throughs on the symbols
o axis (string) Which axes should be renedered. String of four values evaluated in order `'top right bottom left'` e.g. `'0 0 1 1'`.
o axisxstep (number) the number of steps to plot on the axis X
o axisystep (number) the number of steps to plot on the axis Y
o axisxlabels (array) labels to be rendered instead of numeric values on axis X
o axisylabels (array) labels to be rendered instead of numeric values on axis Y
o axisxtype (string) Possible values: `'t'` [default], `'|'`, `' '`, `'-'`, `'+'`
o axisytype (string) Possible values: `'t'` [default], `'|'`, `' '`, `'-'`, `'+'`
o }
**
= (object) @dotchart object
> Usage
| //life, expectancy, country and spending per capita (fictional data)
| r.dotchart(0, 0, 620, 260, [76, 70, 67, 71, 69], [0, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 10, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: true, axis: '0 0 1 1'})
\*/
Raphael.fn.dotchart = function(x, y, width, height, valuesx, valuesy, size, opts) {
return new Dotchart(this, x, y, width, height, valuesx, valuesy, size, opts);
}
Expand Down
Loading

0 comments on commit 0d20ba2

Please sign in to comment.