A lightweight JavaScript library that generates customizable heat maps, charts, and statistics to visualize date-based activity and trends.

Version: 4.2.1

What is Heat.js?

Heat.js is a powerful and flexible JavaScript library designed to help you visualize data in the form of heat maps, charts, and statistics. With a variety of features that cater to both developers and end-users alike, this tool is perfect for presenting complex data simply and effectively.

Features of Heat.js

• Zero-dependencies and extremely lightweight!
• Written in TypeScript, allowing greater support for React, Angular, and other libraries!
• Full API available via public functions.
• Fully styled in CSS/SASS, responsive, and compatible with Bootstrap.
• Full CSS theme support using :root variables.
• Supports four views: Map, Chart, Days, and Statistics!
• Configuration dialog support per view.
• Fully configurable per DOM element.
• Toggling colors on/off support.
• Export all data to CSV, JSON, XML, and TXT formats.
• Import data from JSON, TXT, and CSV.
• 51 language translations available!
• Trend types allow data to be split up and viewed separately.
• Customizable tooltips.
• 12 additional themes available for dark and light modes.
• Data pulling (does not support trend types).
• Color ranges support different colors per view.

Where to Find the Documentation

All comprehensive documentation is available here.

Supported Browsers

Heat.js is fully supported in all modern browsers, such as Google Chrome, Firefox, and Opera.

Supported Languages

• Afrikaans
• Arabic
• Armenian
• Belarusian
• Bengali
• Bulgarian
• Catalan
• Chinese (simplified)
• Danish
• Dutch
• English (default)
• Esperanto
• Estonian
• Farsi
• Finnish
• French
• Frisian
• Galician
• Georgian
• German
• Greek
• Hebrew
• Hindi
• Hungarian
• Icelandic
• Indonesian
• Irish
• Italian
• Japanese
• Korean
• Latvian
• Lithuanian
• Luxembourgish
• Malay
• Nepali
• Norwegian
• Polish
• Portuguese
• Romanian
• Sinhalese
• Slovak
• Slovenian
• Spanish
• Swedish
• Tagalog
• Tamil
• Taiwanese
• Telugu
• Thai
• Turkish
• Ukrainian

Recent Changes

For information on the latest updates, click here.

How to Install Heat.js

• You can easily install the library using npm in your local modules directory with the command:

npm install jheat.js

• You can also download the latest zipped version here.
• Or, you can use the following CDN links:

https://cdn.jsdelivr.net/gh/williamtroup/Heat.js@4.2.1/dist/heat.min.js
https://cdn.jsdelivr.net/gh/williamtroup/Heat.js@4.2.1/dist/heat.js.min.css

Getting Started with Heat.js

Follow these simple steps to start using Heat.js.

### 1. Prerequisites:

Ensure that you include the DOCTYPE HTML tag at the top of your HTML document:

!DOCTYPE html

### 2. Include Files:

Add the necessary styles and scripts to your HTML:

<link rel="stylesheet" href="dist/heat.js.css">
<script src="dist/heat.js"></script>

### 3. DOM Element Binding:

Bind Heat.js to a DOM element:

<div id="heat-map" data-heat-js='{ "views": "map", "showDayNames": true }' ></div>

Refer to the binding options here.

### 4. Adding Dates:

Update your heat map dynamically:

var newDateObject = new Date();
$heat.addDate('heat-map', newDateObject, 'Trend Type 1', true);
$heat.removeDate('heat-map', newDateObject, 'Trend Type 1', true);

### 5. Finishing Up:

That’s it! Simple and effective. You can refer to the code for more detailed help.

Customizing Heat.js

To make Heat.js truly yours, explore the various customization options:

### 1. Public Functions:

A comprehensive list of public functions is available here.

### 2. Configuration:

Customize the configuration settings by setting them like so:

$heat.setConfiguration({
    safeMode: false
});

For detailed configuration options, click here.

Troubleshooting

If you encounter any issues while using Heat.js, here are some troubleshooting tips:

• Ensure all necessary files are correctly linked in your HTML document.
• Check for any typos in your JavaScript that might cause errors.
• Make sure your DOM elements are properly set up and the IDs match.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.