summaryrefslogtreecommitdiff
path: root/test/g.raphael/docs/bar.markdown
blob: 150e7dcf2e98b8751867f08a78d5f933c8cc9f3b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
# g.bar.js #

## Requirements ##

 + raphael.js
 + g.raphael.js
 + g.bar.js
 
## Overview ##

Creates a bar chart.

## Parameters ##

**1. x** number **X coordinate of the centre**

**2. y** number **Y coordinate of the centre**

**3. width** number **width**

**4. height** number **height**

**5. values** array of numbers **Values for your bars.**

**5. opts** object **Options (more info soon.)**

_opts_

**type**

Values are,

    + "round"
    + "sharp"
    + "soft"
    + "square"
    
Defaults to "square" if type is not specified.

**stacked**

Values are,

    + true
    + false
    
Defaults to false. Use this to stack your bars instead of displaying them side by side.

**gutter**

Values given as a string, denoting %. E.g. "40%"

Defaults to "20%". For horizontal barcharts, this is calculated as,

    bargutter = Math.floor(barheight * gutter / 100)
    
e.g. if my height was 220, and I had 4 bars, then my barheight is calculated as,

    Math.floor(height / (len * (100 + gutter) + gutter) * 100); // where len is 4 and height is 220, and if not specified, gutter is 20
    
then according to the above, my bargutter = 8px.
    
    
## Methods ##

**1. .hover(fin, fout)** - fin/fout: **callbacks to trigger when mouse hovers in and out respectively over the bars.**

## Usage ##

Create a bar chart,


    // bare bones
    var barchart = r.g.barchart(_params);
    // example
    var barchart = r.g.barchart(10, 10, 300, 220, [[30, 20, 10]]);
    // horizontal barchart 
    var hbarchart = r.g.hbarchart(10, 10, 300, 220, [[30, 20, 10]]);
    
    
Create a stacked bar chart,


    // example
    var barchart = r.g.barchart(10, 10, 300, 220, [[30, 20, 10], [44, 66, 88]], {stacked:true});
    
    
Attach hover event to piechart,


    // example
    r.g.barchart.hover(function() {
        this.bar.attr({fill: "#333"}); 
    }, function() {
        this.bar.attr({fill: "#666"});
    });

## Others ##

N/A

## Written by ##

Kenny Shen, www.northpole.sg.