Simple Heat Map Generator with JavaScript and Canvas – Simpleheat

Category: Chart & Graph , Javascript , Recommended | July 30, 2018
Author: mourner
Views Total: 6,003
Official Page: Go to website
Last Update: July 30, 2018
License: BSD 2-Clause

Preview:

Simple Heat Map Generator with JavaScript and Canvas – Simpleheat

Description:

Simpleheat is a simple and fast heat map visualization library which allows you to draw Html5 canvas based heat maps with ease.

Basic usage:

Load the needed simpleheat.js library in your document.

<script src="simpleheat.js"></script>

Create an Html5 canvas element on where you want to render a custom heat map.

<canvas id="canvas" width="1000" height="600"></canvas>

prepare your data.

var data = [[38,20,2],[38,690,3],[48,30,1],...];

Data operation.

// set data of [[x, y, value], ...] format
heat.data(data);

// set max data value (1 by default)
heat.max(max);

// add a data point
heat.add(point);

// clear data
heat.clear();

Draw the heatmap.

// create a simpleheat object given an id or canvas reference
var heat = simpleheat(canvas);

// draw the heatmap with optional minimum point opacity (0.05 by default)
heat.draw(minOpacity);

Appearance Options.

// set point radius and blur radius (25 and 15 by default)
heat.radius(r, r2);

// set gradient colors as {<stop>: '<color>'}, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
heat.gradient(grad);

Changelog:

07/30/2018

  • Fixed demo & download

You Might Be Interested In:


Leave a Reply