Home > Web Front-end > JS Tutorial > How to create a heatmap using Highcharts

How to create a heatmap using Highcharts

PHPz
Release: 2023-12-17 10:03:23
Original
1290 people have browsed it

How to create a heatmap using Highcharts

Highcharts is a very popular JavaScript charting library that can be used to create various types of charts, including heat maps. Heat maps are a type of chart that represents data density and are widely used in data visualization. This article will introduce how to use Highcharts to create heat maps and provide specific code examples.

  1. Prepare data

First, we need to prepare some data to create a heat map. Heatmaps are based on two-dimensional data, where each data point has an X and Y coordinate, and a value that represents the density of that point. The data is usually provided in JSON format, for example:

var data = [
  [0, 0, 10],
  [0, 1, 19],
  [0, 2, 8],
  [0, 3, 24],
  [0, 4, 67],
  ...
];
Copy after login

where the first column represents the X-axis coordinate, the second column represents the Y-axis coordinate, and the third column represents the density value.

We also need to determine the labels for the X-axis and Y-axis, as well as the title of the heat map.

  1. Create Chart Container

Next, we need to create a container within the HTML document to place our heat map. This can be done using a div element:

<div id="container"></div>
Copy after login
  1. Introducing the Highcharts library

We need to introduce the Highcharts library into the HTML document, which can be achieved in the following ways:

<script src="https://code.highcharts.com/highcharts.js"></script>
Copy after login

If we want to use the Heatmap module to create heat maps, we also need to introduce the Heatmap module:

<script src="https://code.highcharts.com/modules/heatmap.js"></script>
Copy after login
  1. Configuring chart options

Next, we need to configure the Highcharts object options in to tell it how to render our heatmap. These options are defined as a JavaScript object called an "options object". The following is a basic options object:

var options = {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  title: {
    text: 'My Heatmap'
  },
  xAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'X Axis'
    }
  },
  yAxis: {
    categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
    title: {
      text: 'Y Axis'
    }
  },
  colorAxis: {
    min: 0,
    max: 100,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  series: [{
    name: 'My Data',
    borderWidth: 1,
    data: data,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
};
Copy after login

Some key options in the above option object are explained as follows:

  • chart: This option tells Highcharts that we want to create a heatmap and specify The heatmap's border width and margins.
  • title: This option specifies the title of the heat map.
  • xAxis and yAxis: These options define the labels for the X-axis and Y-axis.
  • colorAxis: This option defines the range and color of the color axis.
  • series: This option defines the data for the heat map.
  1. Create Chart

Now, we can use the chart() method in the Highcharts object to create a heat map. This method requires two parameters: the ID of the container and the options object. The following is a code example:

var chart = Highcharts.chart('container', options);
Copy after login
  1. Drawing the heat map

Finally, we need to call the redraw() method of the chart object to draw the heat map, as shown below:

chart.redraw();
Copy after login

So far, we have completed the process of creating heat maps using Highcharts.

The complete sample code is as follows:

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<script>
  var data = [
    [0, 0, 10],
    [0, 1, 19],
    [0, 2, 8],
    [0, 3, 24],
    [0, 4, 67],
    ...
  ];

  var options = {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    title: {
      text: 'My Heatmap'
    },
    xAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'X Axis'
      }
    },
    yAxis: {
      categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5'],
      title: {
        text: 'Y Axis'
      }
    },
    colorAxis: {
      min: 0,
      max: 100,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
      name: 'My Data',
      borderWidth: 1,
      data: data,
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  };

  var chart = Highcharts.chart('container', options);
  chart.redraw();
</script>
Copy after login

The above is the detailed content of How to create a heatmap using Highcharts. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template