Highcharts Demo

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: 500px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">x,y,value
0, 0, 79.0
0, 1, 38.6
0, 2, 30.2
0, 3, 10.8
0, 4, 22.0
0, 5, 0.491
0, 6, 7.5
0, 7, 9.8
0, 8, 0.765
0, 9, 1.1
0, 10, 3.5
0, 11, 0.317
0, 12, 1.1
0, 13, 3.9
0, 14, 5.0
0, 15, 7.5
0, 16, 2.2
0, 17, 1.3
0, 18, 3.4
0, 19, 2.3
1, 0, 81.0
1, 1, 37.7
1, 2, 28.4
1, 3, 9.7
1, 4, 19.9
1, 5, 0.489
1, 6, 7.3
1, 7, 9.4
1, 8, 0.78
1, 9, 1.6
1, 10, 4.7
1, 11, 0.344
1, 12, 1.3
1, 13, 6.3
1, 14, 7.6
1, 15, 7.2
1, 16, 1.7
1, 17, 1.1
1, 18, 3.0
1, 19, 1.7
2, 0, 82.0
2, 1, 36.2
2, 2, 26.8
2, 3, 9.8
2, 4, 20.9
2, 5, 0.467
2, 6, 5.9
2, 7, 6.9
2, 8, 0.856
2, 9, 1.4
2, 10, 4.1
2, 11, 0.351
2, 12, 1.1
2, 13, 4.1
2, 14, 5.2
2, 15, 4.9
2, 16, 1.5
2, 17, 0.5
2, 18, 2.6
2, 19, 2.3
3, 0, 81.0
3, 1, 37.7
3, 2, 25.9
3, 3, 9.6
3, 4, 20.0
3, 5, 0.479
3, 6, 6.0
3, 7, 6.7
3, 8, 0.89
3, 9, 0.8
3, 10, 2.1
3, 11, 0.359
3, 12, 1.1
3, 13, 7.3
3, 14, 8.4
3, 15, 2.4
3, 16, 0.8
3, 17, 0.8
3, 18, 1.9
3, 19, 2.2
4, 0, 67.0
4, 1, 36.2
4, 2, 25.8
4, 3, 8.5
4, 4, 19.1
4, 5, 0.447
4, 6, 6.0
4, 7, 6.9
4, 8, 0.878
4, 9, 2.7
4, 10, 6.7
4, 11, 0.404
4, 12, 0.7
4, 13, 4.4
4, 14, 5.1
4, 15, 2.7
4, 16, 1.0
4, 17, 1.4
4, 18, 2.5
4, 19, 3.1
5, 0, 74.0
5, 1, 39.0
5, 2, 25.3
5, 3, 8.9
5, 4, 18.8
5, 5, 0.476
5, 6, 6.1
5, 7, 7.1
5, 8, 0.863
5, 9, 1.3
5, 10, 3.1
5, 11, 0.422
5, 12, 1.0
5, 13, 5.5
5, 14, 6.5
5, 15, 2.8
5, 16, 1.3
5, 17, 0.7
5, 18, 3.0
5, 19, 1.8
6, 0, 51.0
6, 1, 38.2
6, 2, 24.6
6, 3, 6.7
6, 4, 15.9
6, 5, 0.42
6, 6, 9.0
6, 7, 10.3
6, 8, 0.867
6, 9, 2.3
6, 10, 5.4
6, 11, 0.415
6, 12, 0.6
6, 13, 3.0
6, 14, 3.6
6, 15, 2.7
6, 16, 1.2
6,...

JavaScript

$(function () {

   
    var start;
    Highcharts.chart('container', {

        data: {
            csv: document.getElementById('csv').innerHTML,
          
        },

        chart: {
            type: 'heatmap',
            margin: [60, 10, 80, 50]
        },


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

        subtitle: {
            text: 'Temperature variation by day and hour through 2013',
            align: 'left',
            x: 40
        },

        xAxis: {
           labels: {
                format: '{value}',
                enabled: true
            },
            tickPixelInterval: 10, 
            //tickInterval: 1,
            showLastLabel: false,
            tickLength: 16,
            categories: [10, 20, 30, 40, 50],
            tickPositions: [10, 20, 30, 40, 50],
            distance: 5,
            /*formatter: function() {
            	return this.value.toString().substring(0, 6);
        		},*/
        },

        yAxis: {
            title: {
                text: null
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
            tickPositions: [0, 6, 12, 18, 24],
            tickWidth: 1,
            min: 0,
            max: 23,
            reversed: true
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a'],
                [1, '#c4463a']
            ],
            min: -15,
            max: 25,
            startOnTick: false,
            endOnTick: false,
            
        },
        plotOptions: {
            series: {
                events: {
                    click: function (event) {
                        // var str = event.point.series.yAxis.categories[event.point.y] + ',' + event.point.series.xAxis.categories[event.point.x]
                        
           ...