forked from Kilian/grafico
/
index.html
160 lines (148 loc) · 5.72 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Grafico javascript charting library</title>
<link href="http://github.com/Kilian/sencss/raw/master/source/sen.css" rel="stylesheet" type="text/css">
<style>
#wrap {
width:700px;
padding:2em;
margin:0 auto;
}
#menu {
width:150px;
position:fixed;
top:2em;
margin-left:-172px;
}
h2 {display:block;background:#ccc;padding:0.5em}
h3 {display:block;background:#eee;padding:0.5em}
h1+p {-moz-column-count:2;-webkit-column-count:3;}
.example {
width:100%;
height:150px;
}
.infoblock {
width:50%;
float:left;
}
</style>
<script src="dependencies/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="dependencies/raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="source/grafico.base.js" type="text/javascript" charset="utf-8"></script>
<script src="source/grafico.line.js" type="text/javascript" charset="utf-8"></script>
<script src="source/grafico.bar.js" type="text/javascript" charset="utf-8"></script>
<script src="source/grafico.spark.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrap">
<div id="areagraph4" class="example"></div>
<script>
Event.observe(window, 'load', function() {
var areagraph4 = new Grafico.AreaGraph($('areagraph4'),
{
workload: [8, 10, 6, 12,7, 6, 9],
your_workload: [6, 8, 4, 8, 12,6, 2],
his_workload: [2, 9, 12,7, 8, 9, 8]
},
{
markers : "value",
grid:false,
draw_axis: false,
plot_padding : 0,
show_vertical_labels : false,
show_horizontal_labels : false,
hover_text_color: "#fff",
datalabels: {
workload: "Areagraph 1",
your_workload: "Areagraph 2",
his_workload: "Areagraph 3"
}
});
});
</script>
<h1>Grafico javascript charting library</h1>
<p>Grafico is a javascript charting library based on <a href="http://raphaeljs.com">Raphaël</a>
and <a href="http://prototypejs.org">Prototype.js</a>. It is originally developed
as Ico by <a href="http://alexyoung.org/2009/01/21/ico-svg-graphs-with-prototype-and-raphael/">Alex Young</a>,
but this version was developed by <a href="http://kilianvalkhof.com">Kilian Valkhof</a>
at <a href="http://wakoopa.com">Wakoopa</a>. Grafico's basic principles are to provide <strong>good,
clean looking graphs</strong> inspired by work of Stephen Few and Edward Tufte, while still
being <strong>flexible to implement</strong> and providing <strong>numerous api options</strong>
to tweak the look of the graphs..</p>
<p>Some key things Grafico has:</p>
<ul>
<li><strong>Flexible ranges</strong> Grafico select the best range to display your data at</li>
<li><strong>Hover options</strong> display additional information such as the value when hovering over charts</li>
<li><strong>Mean lines</strong> A single line that display the mean.</li>
<li><strong>Watermarks</strong> Use an image as a watermark over your graphs</li>
</ul>
<div class="infoblock">
<h2>Downloads</h2>
<ul>
<li><a href="source/grafico.base.js">grafico.base.js</a> 31kb</li>
<li><a href="source/grafico.line.js">grafico.line.js</a> 11kb</li>
<li><a href="source/grafico.bar.js">grafico.bar.js</a> 17kb</li>
<li><a href="source/grafico.spark.js">grafico.spark.js</a> 5kb</li>
</ul>
<ul>
<li><a href="packaged/grafico.min.js">grafico.min.js</a> 36kb</li>
</ul>
</div>
<div class="infoblock">
<h2>Supported graph types</h2>
<ul>
<li>Line graphs</li>
<li>Area graphs</li>
<li>Stacked area graphs</li>
<li>Stream graphs</li>
<li>Bar graphs</li>
<li>Stacked bar graphs</li>
<li>Horizontal bar graphs</li>
<li>Sparklines</li>
<li>Sparkbars</li>
<li>Sparkareas</li>
</ul>
</div>
<div class="infoblock">
<h2>Documentation</h2>
<p>Grafico has full documentation and examples available on the <a href="documentation/index.html">documentation page</a>.
<strong>This page might be slow to load</strong> because it contains a lot of examples.</p>
</div>
<div class="infoblock">
<h2>Dependencies</h2>
<ul>
<li><a href="http://raphaeljs.com">Raphaël</a> 1.0+ (1.4+ recommended)</li>
<li><a href="http://prototypejs.org">Prototype.js</a> 1.6+</li>
</ul>
</div>
<div class="infoblock" style="clear:left">
<h2>Tested on</h2>
<ul>
<li>Internet explorer 6+</li>
<li>Firefox 3.0+</li>
<li>Chrome</li>
<li>Safari 4/ Qt-webkit</li>
<li>Opera (slow, has hover problems)</li>
</ul>
</div>
<div class="infoblock">
<h2>Notable additions</h2>
<ul>
<li><a href="http://wakoopa.com/menno">Menno van der Sman</a> provided a rake minifier script and a new normaliser</li>
<li><a href="http://janpaulposma.nl">Jan Paul Posma</a> provided Stream graphs and improvements to the drawing code</li>
<li><a href="http://github.com/suranyami">David Parry</a> provided Stacked bar charts and improvements to the grid drawing</li>
</ul>
</div>
<div class="infoblock" style="clear:left;">
<h2>License</h2>
<p>Grafico is licensed under <a href="MIT-LICENSE">MIT</a>. The project is also available on <a href="http://github.com/kilian/grafico">GitHub</a>.</p>
</div>
<div class="infoblock">
<h2>Donate</h2>
<p>If you enjoy using Grafico, please buy me a coffee or a beer :)</p>
<a href='http://www.pledgie.com/campaigns/8737'><img alt='Click here to lend your support to: grafico and make a donation at www.pledgie.com !' src='http://www.pledgie.com/campaigns/8737.png?skin_name=chrome' border='0' /></a>
</div>
</body>
</html>