{"id":9644,"date":"2020-02-26T16:54:50","date_gmt":"2020-02-26T16:54:50","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=9644"},"modified":"2022-08-13T10:20:45","modified_gmt":"2022-08-13T10:20:45","slug":"heat-map-chart-create-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2020\/02\/26\/heat-map-chart-create-javascript\/","title":{"rendered":"Creating Heat Map Chart Using JavaScript"},"content":{"rendered":"

\"CreatingWant to learn how to quickly create an interactive heat map chart using JavaScript? This data visualization tutorial will guide you through the coding process step by step. Basic knowledge of HTML (HTML5) and some understanding of programming are more than enough to master this charting technique.<\/p>\n

A heat map (or heatmap chart<\/a>) is a two-dimensional, matrix-based data visualization in which colors represent values. It is often used to facilitate the analysis of complex data sets, revealing patterns in how variables change, correlate, and more.<\/p>\n

Read this JS charting tutorial to the end and you will have no more problems with getting compelling heat maps up and running on your web sites and in your apps.<\/p>\n

<\/p>\n

How to\u00a0Make JavaScript Heat Map Chart<\/h2>\n

Building any type of JS chart only takes the following four general steps:<\/p>\n

    \n
  1. Create\u00a0an HTML page where\u00a0a chart will be displayed.<\/li>\n
  2. Include all necessary JavaScript files.<\/li>\n
  3. Load the data.<\/li>\n
  4. Write the JavaScript code for the chart.<\/li>\n<\/ol>\n

    Let’s see each of them in detail.<\/p>\n

    Step 1: Create an HTML page<\/h3>\n

    The first thing you need to do is to create a basic HTML page where you will put a relevant title and an HTML block element (e.g. <div><\/code>) to place the chart. Here, the id has the value container<\/code>, but feel free to use whatever makes sense to you. The page should look like this:<\/p>\n

    <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Basic JavaScript Heat Map Chart<\/title>\r\n    <style>\r\n      html, body, #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    The width<\/code> and height<\/code> parameters inside the <style><\/code> block\u00a0define the space the chart will occupy and you can change these according to your needs. The way they are set here makes the heat map occupy the entire space.<\/p>\n
    Step 2: Include all necessary files<\/h3>\n
    Next, inside the <head><\/code> section of the HTML page, you should reference all the necessary script files.<\/p>\n
    There are multiple JavaScript libraries out there, providing pre-written JS code that enables developers to visualize data in a more\u00a0or less straightforward way. To build heat map charts\u00a0along this tutorial, I will be using the AnyChart<\/a> JS charting library. It is flexible, yet easy to get started with and integrate.<\/p>\n
    When using AnyChart, you have two options of how you can get the necessary scripts:<\/p>\n