forked from pa7/heatmap.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (263 loc) · 12.9 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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>heatmap.js Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/commons.css" />
<link rel="stylesheet" href="assets/css/docs.css" />
<link rel="stylesheet" href="assets/css/prism.css" />
</head>
<body>
<div class="wrapper">
<h1>heatmap.js Documentation</h1>
<ol class="breadcrumb-trail">
<li><a href="//www.patrick-wied.at/static/heatmapjs/" title="heatmap.js dynamic heatmaps for the web">heatmap.js</a></li>
<li>Documentation</li>
</ol>
<div id="message">
<h3 id="activate-msg">What is it about the colors in the overview?</h3>
<div id="msg-content">
<div class="msg">
<u style="font-weight:bold;">The colors in the overview is a prioritization of API functions:</u> <br /><strong class="hot-doc highlight"><u>red</u> **hot docs**</strong> : most commonly used functions ;-)<br /><strong class="avg-doc highlight"><u>green</u></strong> : used for customized implementations<br /><strong class="cold-doc highlight"><u>blue</u></strong> : rarely used functionality
</div>
<div id="btn-confirm">got it, thank you</div>
</div>
</div>
<section id="index">
<div id="index-h337">
<h2>h337</h2>
<ul>
<li class="hot-doc"><a href="#h337-create">create(configObject)</a></li>
<li class="avg-doc"><a href="#h337-register">register(pluginKey, plugin)</a></li>
</ul>
</div>
<div id="index-heatmapInstance">
<h2>heatmapInstance</h2>
<ul>
<li class="hot-doc"><a href="#heatmap-addData">addData(object|array)</a></li>
<li class="hot-doc"><a href="#heatmap-setData">setData(object)</a></li>
<li class="cold-doc"><a href="#heatmap-setDataMax">setDataMax(number)</a></li>
<li class="cold-doc"><a href="#heatmap-setDataMin">setDataMin(number)</a></li>
<li class="avg-doc"> <a href="#heatmap-configure">configure(configObject)</a></li>
<li class="avg-doc"> <a href="#heatmap-getValueAt">getValueAt(object)</a></li>
<li class="hot-doc"> <a href="#heatmap-getData">getData()</a></li>
<li class="avg-doc"> <a href="#heatmap-getDataURL">getDataURL()</a></li>
<li class="cold-doc"><a href="#heatmap-repaint">repaint()</a></li>
</ul>
</div>
</section>
<section>
<h2>h337</h2>
<div class="description">
"h337" is the name of the global object registered by heatmap.js. You can use it to create heatmap instances
</div>
<div class="functions">
<div class="fn">
<h3 id="h337-create">h337.create(configObject)</h3>
<div class="description">
Returns a <strong>heatmapInstance</strong>.<br /><br />
Use h337.create to create heatmap instances. A Heatmap can be customized with the configObject. <br />The configObject parameter is required. <br /><br/><strong><u>Possible configuration properties:</u></strong><br />
<ul>
<li><strong>container</strong> (DOMNode) *required* <br /> A DOM node where the heatmap canvas should be appended (heatmap will adapt to the node's size)</li>
<li><strong>backgroundColor</strong> (string) *optional*<br />
A background color string in form of hexcode, color name, or rgb(a)</li>
<li><strong>gradient</strong> (object) *optional*<br />
An object that represents the gradient (syntax: number string [0,1] : color string), check out the example </li>
<li><strong>radius</strong> (number) *optional*<br />The radius each datapoint will have (if not specified on the datapoint itself)</li>
<li><strong>opacity</strong> (number) [0,1] *optional* default = .6<br />A global opacity for the whole heatmap. This overrides maxOpacity and minOpacity if set!</li>
<li><strong>maxOpacity</strong> (number) [0,1] *optional*<br />The maximal opacity the highest value in the heatmap will have. (will be overridden if opacity set)</li>
<li><strong>minOpacity</strong>(number) [0,1] *optional*<br />The minimum opacity the lowest value in the heatmap will have (will be overridden if opacity set)</li>
<li><strong>onExtremaChange</strong> function callback<br />Pass a callback to receive extrema change updates. Useful for DOM legends.</li>
<li><strong>blur</strong> (number) [0,1] *optional* default = 0.85<br />The blur factor that will be applied to all datapoints. The higher the blur factor is, the smoother the gradients will be</li>
<li><strong>xField</strong> (string) *optional* default = "x"<br />The property name of your x coordinate in a datapoint</li>
<li><strong>yField</strong> (string) *optional* default = "y"<br />The property name of your y coordinate in a datapoint</li>
<li><strong>valueField</strong> (string) *optional* default = "value"<br />The property name of your y coordinate in a datapoint</li>
</ul>
<h4>Example configurations</h4>
Simple configuration with standard gradient
<pre><code class="language-javascript">// create configuration object
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);</code></pre>
Custom gradient configuration
<pre><code class="language-javascript">// create configuration object
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.5': 'blue',
'.8': 'red',
'.95': 'white'
}
};
var heatmapInstance = h337.create(config);</code></pre>
</div>
</div>
<!-- <div class="fn">
<h3 id="h337-register">h337.register(pluginKey, plugin)</h3>
<div class="description">
to be written
</div>
</div> -->
</div>
</section>
<section>
<h2>heatmapInstance</h2>
<div class="description">
Heatmap instances are returned by h337.create. A heatmap instance has its own internal datastore and renderer where you can manipulate data. As a result the heatmap gets updated (either partially or completely, depending on whether it's necessary).
</div>
<div class="functions">
<div class="fn">
<h3 id="heatmap-addData">heatmapInstance.addData(object|array)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Use this functionality only for adding datapoints on the fly, not for data initialization! heatmapInstance.addData adds a single or multiple datapoints to the heatmaps' datastore.
<pre><code class="language-javascript">// a single datapoint
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);
// multiple datapoints (for data initialization use setData!!)
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-setData">heatmapInstance.setData(object)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Initializes a heatmap instance with a dataset. <strong>"min"</strong>, <strong>"max"</strong>, and <strong>"data"</strong> properties are required.<br />setData removes all previously existing points from the heatmap instance and re-initializes the datastore.
<pre><code class="language-javascript">var data = {
max: 100,
min: 0,
data: [
dataPoint, dataPoint, dataPoint, dataPoint
]
};
heatmapInstance.setData(data);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-setDataMax">heatmapInstance.setDataMax(number)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Changes the upper bound of your dataset and triggers a complete rerendering.
<pre><code class="language-javascript">heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-setDataMin">heatmapInstance.setDataMin(number)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Changes the lower bound of your dataset and triggers a complete rerendering.
<pre><code class="language-javascript">heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-configure">heatmapInstance.configure(configObject)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Reconfigures a heatmap instance after it has been initialized. Triggers a complete rerendering.
<pre><code class="language-javascript">var nuConfig = {
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
heatmapInstance.configure(nuConfig);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-getValueAt">heatmapInstance.getValueAt(object)</h3>
<div class="description">
Returns <strong>value at datapoint position</strong><br /><br />
Note: The returned value is an interpolated value based on the gradient blending if point is not in store
<pre><code class="language-javascript">heatmapInstance.addData({ x: 10, y: 10, value: 100});
// get the value at x=10, y=10
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-getData">heatmapInstance.getData()</h3>
<div class="description">
Returns <strong>a persistable and reimportable (with setData) JSON object</strong><br /><br />
<pre><code class="language-javascript">var currentData = heatmapInstance.getData();
// now let's create a new instance and set the data
var heatmap2 = h337.create(config);
heatmap2.setData(currentData); // now both heatmap instances have the same content</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-getDataURL">heatmapInstance.getDataURL()</h3>
<div class="description">
Returns <strong>dataURL string</strong><br /><br />
The returned value is the base64 encoded dataURL of the heatmap instance.
<pre><code class="language-javascript">heatmapInstance.getDataURL(); // data:image/png;base64...
// ready for saving locally or on the server</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-repaint">heatmapInstance.repaint()</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Repaints the whole heatmap canvas
</div>
</div>
</div>
</section>
</div>
<script src="assets/js/prism.js"></script>
<script>
var docs = (function() {
//delete localStorage['readTheDocs'];
function $(id) {
return document.getElementById(id);
};
function initializeDocs () {
var showMessage = false;
if (!localStorage['readTheDocs']) {
showMessage = true;
}
$('btn-confirm').onclick = function() {
localStorage['readTheDocs'] = true;
$('msg-content').classList.add('animate');
$('msg-content').classList.add('hide');
};
if (!showMessage) {
$('msg-content').classList.add('hide');
// dirty hack ;-)
setTimeout(function() { $('msg-content').classList.add('animate'); }, 100);
}
$('activate-msg').onclick = function() {
$('msg-content').classList.remove('hide');
}
// initialize and add feedback buttons
};
return {
init: initializeDocs
}
}());
window.onload = function() {
docs.init();
};
</script>
</body>
</html>