heatmap zoom

Nayana Das

by Nayana Das

HTML

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


<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv1" style="display: none">
Name,G,MIN,PTS,FGM,FGA,FGP,FTM,FTA,FTP,3PM,3PA,3PP,ORB,DRB,TRB,AST,STL,BLK,TO,PF
Dwyane Wade ,79,38.6,30.2,10.8,22,0.491,7.5,9.8,0.765,1.1,3.5,0.317,1.1,3.9,5,7.5,2.2,1.3,3.4,2.3
LeBron James ,81,37.7,28.4,9.7,19.9,0.489,7.3,9.4,0.78,1.6,4.7,0.344,1.3,6.3,7.6,7.2,1.7,1.1,3,1.7
Kobe Bryant ,82,36.2,26.8,9.8,20.9,0.467,5.9,6.9,0.856,1.4,4.1,0.351,1.1,4.1,5.2,4.9,1.5,0.5,2.6,2.3
Dirk Nowitzki ,81,37.7,25.9,9.6,20,0.479,6,6.7,0.89,0.8,2.1,0.359,1.1,7.3,8.4,2.4,0.8,0.8,1.9,2.2
Danny Granger ,67,36.2,25.8,8.5,19.1,0.447,6,6.9,0.878,2.7,6.7,0.404,0.7,4.4,5.1,2.7,1,1.4,2.5,3.1
Kevin Durant ,74,39,25.3,8.9,18.8,0.476,6.1,7.1,0.863,1.3,3.1,0.422,1,5.5,6.5,2.8,1.3,0.7,3,1.8
Kevin Martin ,51,38.2,24.6,6.7,15.9,0.42,9,10.3,0.867,2.3,5.4,0.415,0.6,3,3.6,2.7,1.2,0.2,2.9,2.3
Al Jefferson ,50,36.6,23.1,9.7,19.5,0.497,3.7,5,0.738,0,0.1,0,3.4,7.5,11,1.6,0.8,1.7,1.8,2.8
Chris Paul ,78,38.5,22.8,8.1,16.1,0.503,5.8,6.7,0.868,0.8,2.3,0.364,0.9,4.7,5.5,11,2.8,0.1,3,2.7
Carmelo Anthony ,66,34.5,22.8,8.1,18.3,0.443,5.6,7.1,0.793,1,2.6,0.371,1.6,5.2,6.8,3.4,1.1,0.4,3,3
Chris Bosh ,77,38.1,22.7,8,16.4,0.487,6.5,8,0.817,0.2,0.6,0.245,2.8,7.2,10,2.5,0.9,1,2.3,2.5
Brandon Roy ,78,37.2,22.6,8.1,16.9,0.48,5.3,6.5,0.824,1.1,2.8,0.377,1.3,3.4,4.7,5.1,1.1,0.3,1.9,1.6
Antawn Jamison ,81,38.2,22.2,8.3,17.8,0.468,4.2,5.6,0.754,1.4,3.9,0.351,2.4,6.5,8.9,1.9,1.2,0.3,1.5,2.7
Tony Parker ,72,34.1,22,8.9,17.5,0.506,3.9,5,0.782,0.3,0.9,0.292,0.4,2.7,3.1,6.9,0.9,0.1,2.6,1.5
Amare Stoudemire...

JavaScript

$(function () {
 drawchart();

function drawchart() {

    $('#container').highcharts({
		
		 data: {
            csv: document.getElementById('csv1').innerHTML
          // csv: data
        },

        chart: {
            type: 'heatmap',
            inverted: true ,
		zoomType: 'xy'
           /* events: {
        		drilldown: function(e) {
          			if (!e.seriesOptions) {
          			console.log(e);
          			} } } */
        },


        title: {
            text: 'Highcharts heat map',
            align: 'left'
        },

        subtitle: {
            text: '',
            align: 'left'
        },

        xAxis: {
            tickPixelInterval: 50
           // min: Date.UTC(2015, 4, 1),
           // max: Date.UTC(2015, 4, 30)
        },

        yAxis: {
            title: {
                text: null
            },
            labels: {
               // format: '{value}:00'
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
           // tickPositions: [0, 6, 12, 18, 24],
            tickWidth: 1,
           // min: 0,
            //max: 23
        },
        
        plotOptions: {
            series: {
                events: {
                    click: function (event) {
                        // var str = event.point.series.yAxis.categories[event.point.y] + ',' + event.point.series.xAxis.categories[event.point.x]
                        
                        //var str = event.point;
                        var str =  event.point.x+' : '+event.point.y+' : '+event.point.value;
                        console.log(str);
                    }
                }
            },
            turboThreshold: 0
        }, 

        colorAxis: {
            stops: [
                [0, '#3060cf'],
		[0.1, '#e5b5c2'],
		[0.2, '#cc889a'],
		[0.3, '#e88688'],
		[0.4, '#d85254'],
                [0.5, '#bc3235'],
                [0.6, '#ed9e21'],
                [0.7,...