heatmap.js
Version:
Dynamic JavaScript Heatmaps for the Web
277 lines (263 loc) • 13.2 kB
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>