277 lines
13 KiB
HTML
277 lines
13 KiB
HTML
|
<!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>
|