Add Extra info like Data attribute or id in heat map charts - Javascript highcharts

Javascript examples for highcharts:Heatmap Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Heatmap Chart

Description

Add Extra info like Data attribute or id in heat map charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/heatmap.js"></script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {//from w ww  . j a v  a  2  s .c  om
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },
    title: {
        text: 'Sales per employee per weekday'
    },
    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },
    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },
      plotOptions: {
         series: {
            events: {
               click: function (event) {
             console.log(event);
                  var str = event.point.series.yAxis.categories[event.point.y] + ',' +
                    event.point.series.xAxis.categories[event.point.x] + ',' + event.point.customAttrib + ',' + event.point.customNumber
                  console.log(str);
               }
            }
         }
      },
    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
        }
    },
    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [{x: 0, y: 0, value: 10, customAttrib: 'Look at me go', customNumber: 144}, {x: 0, y: 1, value: 19, customAttrib: 'Look at me go', customNumber: 151}, [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]
});

      </script>  
   </body>
</html>

Related Tutorials