Heatmap CSV Data

Nayana Das

by watti

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">
Ticker,1612BTWUSA.NGM,247.NGM,2CUREX.ST,3KR.ST,A1M.ST
1612BTWUSA.NGM,1.0,0.9945019716862775,0.9989945605258809,0.9999998037083547,0.9719783781384334
247.NGM,0.9945019716862775,1.0,0.9981967239076305,0.9944361892903166,0.9912504670679436
2CUREX.ST,0.9989945605258809,0.9981967239076305,1.0,0.9989662854119657,0.9815396777247561
3KR.ST,0.9999998037083547,0.9944361892903166,0.9989662854119657,1.0,0.9718309571784056
A1M.ST,0.9719783781384334,0.9912504670679436,0.9815396777247561,0.9718309571784056,1.0

</pre>

JavaScript

$('#container').highcharts({
		
		 data: {
            csv: $('#csv1').html()
          // 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, '#ba7609'],
                [0.8, '#89590c'],
                [0.9,...