heatmap grid on top - Javascript highcharts

Javascript examples for highcharts:Heatmap Chart

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

Description

heatmap grid on top

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.jquery.com/jquery-git.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/data.js"></script> 
      <script src="https://code.highcharts.com/modules/boost-canvas.js"></script> 
      <script src="https://code.highcharts.com/modules/boost.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
$.get('http://www.json-generator.com/api/json/get/bVAUOYjveG?indent=2', function(json) {
  Highcharts.chart('container', {
    chart: {/*w  w w.  j a v  a 2 s  . c  o m*/
      type: 'heatmap',
      plotBorderWidth: 0
    },
    title: {
      text: null,
      align: 'left',
      x: 80
    },
    legend: {
      enabled: false
    },
    boost: {
      seriesThreshold: 1,
      useGPUTranslations: true
    },
    subtitle: {
      text: null,
      align: 'left',
      x: 80
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      type: 'category',
      categories: json.xAxis,
      labels: {
        style: {
          fontSize: '8px'
        }
      },
      tickInterval: 1,
      gridLineWidth: 1,
      tickLength: 0,
      lineWidth: 0
    },
    yAxis: {
      categories: json.yAxis,
      tickInterval: 1,
      title: {
        text: null
      },
      labels: {
        style: {
          fontSize: '7px'
        }
      },
      minPadding: 0,
      maxPadding: 0,
      startOnTick: false,
      endOnTick: false,
      tickLength: 0,
      lineWidth: 0
    },
    colorAxis: {
      stops: [
        [0, '#e2f7ff'],
        [.25, '#00ff11'],
        [.5, '#fffa00'],
        [1, '#ff0000']
      ],
      min: 0,
      max: 375,
      minColor: '#00e1ff',
      maxColor: '#ff0000',
      startOnTick: false,
      endOnTick: false
    },
    tooltip: {
      formatter: function() {
        return this.series.xAxis.categories[this.point.x] + '<br>' +
          this.series.yAxis.categories[this.point.y] + '<br>' + this.point.value + ' translations<br>';
      }
    },
    plotOptions: {
      series: {
        turboThreshold: 0
      }
    },
    series: [{
      data: json.data
    }]
  });
});

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

Related Tutorials