forked from xaviershay/tufte-graph
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
195 lines (173 loc) · 8.59 KB
/
index.html
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<title>TufteGraph: beautiful charts with jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="jquery.enumerable.js"></script>
<script type="text/javascript" src="jquery.tufte-graph.js"></script>
<link rel="stylesheet" href="tufte-graph.css" type="text/css" media="screen" charset="utf-8" />
<style>
body { font-family: georgia; font-size: 14px }
#container {
margin: 0 auto;
width: 730px;
}
.download {
float: right;
font-size: 1.5em;
}
.footer {
width: 100%;
text-align: center;
color: #999999;
font-size: 0.8em;
margin-top: 30px;
}
.intro { font-size: 1.4em; }
.differences { clear: both; }
span.doc { color: green; font-weight: bold; }
a { color: black; }
a:visited { color: gray; }
.example { float: left; }
h2 { clear: both; }
.awesome .graph-header { width: 370px; }
.sales .graph-header { width: 310px; }
.sales { margin-left: 20px; }
li { margin-bottom: 3px; }
</style>
<script type="text/javascript">
$(document).ready(function () {
jQuery('#awesome-graph').tufteBar({
data: [
[1.0, {label: 'Dog'}],
[1.3, {label: 'Raccoon'}],
[3.6, {label: 'Albatross'}],
[4.0, {label: 'Panda'}],
[5.2, {label: 'Tiger'}],
[7.0, {label: 'Raptor'}]
],
barWidth: 0.8,
barLabel: function(index) { return this[0] + 'x' },
axisLabel: function(index) { return this[1].label },
color: function(index) { return ['#E57536', '#82293B'][index % 2] }
});
jQuery('#stacked-graph').tufteBar({
data: [
[[1.5, 1.0, 0.51], {label: '2005'}],
[[2.0, 1.03, 0.6], {label: '2006'}],
[[2.4, 0.9, 2.0], {label: '2007'}],
[[1.5, 2.6, 0.45], {label: '2008'}]
],
barLabel: function(index) {
amount = ($(this[0]).sum() * 10000).toFixed(0);
return '$' + $.tufteBar.formatNumber(amount);
},
axisLabel: function(index) { return this[1].label },
legend: {
data: ["North", "East", "West"]
}
});
});
</script>
</head>
<body>
<div id="container">
<div class="download">
Download (<a href="http://github.com/xaviershay/tufte-graph/tarball/master">tarball</a> | <a href="http://github.com/xaviershay/tufte-graph/zipball/master">zip</a>)
</div>
<h1>TufteGraph</h1>
<p class='intro'><strong>Make pretty graphs with javascript</strong>, using <a href="http://jquery.com">jQuery</a></p>
<div class='example awesome'>
<div class='graph-header'>
<h3>Animal awesomeness</h3>
<p>Measured by standard combo multiplier</p>
</div>
<div id='awesome-graph' class='graph' style='width: 370px; height: 200px;'></div>
</div>
<div class='example sales'>
<div class='graph-header'>
<h3>Sales by region</h3>
<p>Total revenue per year</p>
</div>
<div id='stacked-graph' class='graph' style='width: 270px; height: 200px;'></div>
</div>
<p class='differences'>It is different from other javascript charting libraries because:</p>
<ul>
<li>Configuration is by dynamic functions, allowing for a really compact API (very few options)</li>
<li>Non-core layout is done via CSS rather than code</li>
</ul>
<h2>Introduction</h2>
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2655244&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2655244&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><br />(<a href="http://vimeo.com/2655244">Introduction to TufteGraph</a> - if your eyes aren't that good, here's a <a href="http://vimeo.com/download/video:86941519?e=1230521577&h=294ad6507b3e20c0bf7580fae7fa1d3e&uh=e356ab5ee762da2d68e3e494b2631364">high-res version</a>)
<h2>API</h2>
<pre><code>jQuery(document).ready(function () {
jQuery('#awesome-graph').tufteBar({
data: [
<span class="doc">// First element is the y-value
// Other elements are arbitary - they are not used by the lib
// but are passed back into callback functions</span>
[1.0, {label: 'Dog'}],
[1.3, {label: 'Raccoon'}],
// etc...
<span class="doc">// For stacked graphs, pass an array of non-cumulative y values</span>
[[1.5, 1.0, 0.51], {label: '2005'}]
],
<span class="doc">// Any of the following properties can be either static values
// or a function that will be called for each data point.
// For functions, 'this' will be set to the current data element,
// just like jQuery's $.each
// Bar width in arbitrary units, 1.0 means the bars will be snuggled
// up next to each other</span>
barWidth: 0.8,
<span class="doc">// The label on top of the bar - can contain HTML
// formatNumber inserts commas as thousands separators in a number</span>
barLabel: function(index) {
return $.tufteBar.formatNumber(this[0]) + 'x'
},
<span class="doc">// The label on the x-axis - can contain HTML</span>
axisLabel: function(index) { return this[1].label },
<span class="doc">// The color of the bar</span>
color: function(index) {
return ['#E57536', '#82293B'][index % 2]
},
<span class="doc">// Stacked graphs also pass a stackedIndex parameter</span>
color: function(index, stackedIndex) {
return ['#E57536', '#82293B'][stackedIndex % 2]
},
<span class="doc">// Alternatively, you can just override the default colors and keep
// the built in color functions</span>
colors: ['#82293B', '#E57536', '#FFBE33'],
<span class="doc">// Legend is optional</span>
legend: {
<span class="doc">// Data can be an array of any type of object, but the default
// formatter works with strings</span>
data: ["North", "East", "West"],
<span class="doc">// By default, the colors of the graph are used</span>
color: function(index) {
return ['#E57536', '#82293B'][index % 2]
},
<span class="doc">// You can customize the element label - can contain HTML</span>
label: function(index) { return this }
}
});
});
</code></pre>
<p>That's it. Have a look at the <a href='test/integration.html'>integration tests</a> for a few combinations.</p>
<h2>Hot Tips</h2>
<ul>
<li>You need to be using <code><a href="http://jquery.com">jQuery</a></code> and also the jQuery enumerable plugin (included). View source on this page if you don't quite get it.</li>
<li>By default your graph won't be that pretty because it needs to be styled. I recommend <code>tufte-graph.css</code> as a good starting point.</li>
<li>Find beautiful colors for your graphs at <a href="http://www.colourlovers.com/">ColourLovers</a></li>
<li>I have tested this in Firefox 3 and Safari 3 and nothing else. Buyer beware.</li>
<li>Read Tufte's <a href="http://books.google.com.au/books?id=JNoBAAAACAAJ">The Visual Display of Quantitative Information</a>, it'll blow your mind. Your graphs will never be the same again.</li>
<li><a href="mailto:contact@rhnh.net">Email me</a> the cool graphs you make, I really dig graphs.</li>
<li>If you're going to make changes to this library, please <a href="http://github.com/xaviershay/tufte-graph">fork on github</a> and share the love.</li>
</ul>
<div class="footer">
<p>TufteGraph by <a href="http://rhnh.net">Xavier Shay</a> - MIT License</p>
</div>
</div>
<a href="http://github.com/xaviershay/tufte-graph"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub" /></a>
</body>
</html>