Highcharts heatmap

flowingdata.com dataset

by Nayana Das

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

<pre id="csv" style="display:none">x, y, value
0, 0, 10, 
0, 1, 19, 
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</pre>

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 40,
      zoomType:"xy"
    },


    title: {
      text: 'Dataset from flowingdata.com'
    },

    xAxis: {
      categories: ["Dwyane Wade", "LeBron James ", "Kobe Bryant ", "Dirk Nowitzki", "Danny Granger", "Kevin Durant", "Kevin Martin", "Al Jefferson", "Chris Paul", "Carmelo Anthony", "Chris Bosh", "Brandon Roy", "Antawn Jamison", "Tony Parker", "Amare Stoudemire", "Joe Johnson", "Devin Harris", "Michael Redd", "David West", "Zachary Randolph", "Caron Butler", "Vince Carter", "Stephen Jackson", "Ben Gordon", "Dwight Howard", "Paul Pierce", "Al Harrington", "Jamal Crawford", "Yao Ming", "Richard Jefferson", "Jason Terry", "Deron Williams", "Tim Duncan", "Monta Ellis", "Rudy Gay", "Pau Gasol", "Andre Iguodala", "Corey Maggette", "O.J. Mayo", "John Salmons", "Richard Hamilton", "Ray Allen", "LaMarcus Aldridge", "Josh Howard", "Maurice Williams", "Shaquille O'neal", "Rashard Lewis", "Chauncey Billups", "Allen Iverson", "Nate Robinson"]
    },

    yAxis: {
      categories: ["G", "MIN", "PTS", "FGM", "FGA", "FGP", "FTM", "FTA", "FTP", "3PM", "3PA", "3PP", "ORB", "DRB", "TRB", "AST", "STL", "BLK", "TO", "PF"],
      title: null
    },

    colorAxis: {
    
      /*min: 0,
      minColor: '#fffbbc',
      maxColor: Highcharts.getOptions().colors[0]*/
      stops: [
                [0, '#435787'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a'],
                [1, '#c4463a']
            ],
            min: 0,
            max: 100,
            startOnTick: false,
            endOnTick: false
    },

    legend: {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 320
    },

    tooltip: {
      formatter: function() {
        return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> : <br><b>' +this.series.yAxis.categories[this.point.y]
  ...