CODEWITHSUNDEEP
javascriptjsonhighchartsheatmap
Czar
Czar

Reputation: 3

Highcharts: Need heatmap with month and date

I have created following heatmap using highcharts heatmap-highchart

On Y-axis it displays months but on X-axis it should display only days of month as [1,2,3,4,.......29,30,31] and heat map should be plotted accordingly.

this is the desired result

desired heat map

Here is the code

<script src="http://www.highcharts.com/lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script type="text/javascript">
    jQuery.noConflict();

    var example = 'heatmap',
        theme = 'default';

    (function ($) { // encapsulate jQuery
        $(function () {

            $('#container').highcharts({

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

                chart: {
                    type: 'heatmap',
                    inverted: false
                },


                title: {
                    text: 'Highcharts heat map [test]',
                    align: 'right'
                },

                subtitle: {
                    text: 'Temperature variation by day and hour through Nov 2015',
                    align: 'right'
                },

                yAxis: {
                    labels: {
                        format: '{value}'
                    },

                    categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],    

                    tickWidth: 1,
                    min: 1,
                    max: 12
                },

                xAxis: {

                    type: 'datetime',
                    tickPixelInterval: 1,
                    min: Date.UTC(2015, 10, 20),
                    max: Date.UTC(2015, 11, 10),
                    labels: {
                        step: 1,
                            },
                    },

                colorAxis: {
                    stops: [
            [0, '#20255A'],
            [0.5, '#4B8EE2'],
            [0.9, '#AAEBFF']  
        ],
                    min: 1,
                    max: 40
                },

                series: [{
                    borderWidth: 0,
                    colsize: 24 * 36e5, // one day
                    tooltip: {
                        headerFormat: 'Power Generated<br/>',
                        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>'
                             }
                        }],
            });
        });
    })(jQuery);
</script>


<!--[X,Y,Val]-->
                <pre id="csv" style="display: none">Date, Time, Temperature
2015-11-01,11,6.94
2015-11-02,11,14.6
2015-11-03,11,25.3
2015-11-04,11,27.2
2015-11-05,11,10.5
2015-11-06,11,4.77
2015-11-07,11,7.98
2015-11-08,11,26.9
2015-11-09,11,23.4
2015-11-10,11,2.2
2015-11-11,11,4.11
2015-11-12,11,2.82
2015-11-13,11,24.8
2015-11-14,11,24.1
2015-11-15,11,26.1
2015-11-16,11,24.9
2015-11-17,11,27.9
2015-11-18,11,15.0
2015-11-19,11,7.72
2015-11-20,11,23.3
2015-11-21,11,26.8
2015-11-22,11,3.58
2015-11-23,11,27.8
2015-11-24,11,24.7
2015-11-25,11,12.2
2015-11-26,11,17.7
2015-11-27,11,22.4
2015-11-28,11,7.59
2015-11-29,11,21.7
2015-11-30,11,18.3

2015-11-01,12,5.33
2015-11-02,12,2.55
2015-11-03,12,13.8
2015-11-04,12,24.0
2015-11-05,12,23.1
2015-11-06,12,23.1
2015-11-07,12,19.4
2015-11-08,12,16.8
2015-11-09,12,21.0
2015-11-10,12,20.5
2015-11-11,12,15.1
2015-11-12,12,18.1
2015-11-13,12,11.6
2015-11-14,12,4.71
2015-11-15,12,21.5
2015-11-16,12,14.2
2015-11-17,12,2.40
2015-11-18,12,1.95
2015-11-19,12,19.8
2015-11-20,12,22.8
2015-11-21,12,8.48
2015-11-22,12,2.45
2015-11-23,12,7.00
2015-11-24,12,7.36
2015-11-25,12,13.8
2015-11-26,12,7.97
2015-11-27,12,4.09
2015-11-28,12,16.3
2015-11-29,12,2.73
2015-11-30,12,2.67
2015-11-31,12,16.4
                </pre> 
</body>

jsfiddle Here: jsfiddle.net/zor_el/Lrejpk69/

Kidly assist me with this.

Any help is appreciated. thanks!

Upvotes: 0

Views: 2175

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

I would do this without using any datetime axes.

I would parse out the month and day number from the date, and set an array for each data point that was:

[day number, month number, data value]

Then you can set a min and max for your y axis as 0-11, and for your x axis as 1-31.

The resulting data set looks like this:

[
 [1, 10, 6.94], 
 [2, 10, 14.6], 
 [3, 10, 25.3],
 [4, 10, 27.2],
 [5, 10, 10.5],
 [6, 10, 4.77],
 [7, 10, 7.98]
 ...
]

And the resulting chart can be seen here:

enter image description here

Upvotes: 3

Satyaki Chatterjee
Satyaki Chatterjee

Reputation: 124

Check updated fiddle http://jsfiddle.net/Lrejpk69/30/

        $(function () {

            $('#container').highcharts({

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

                chart: {
                    type: 'heatmap',
                    inverted: false
                },


                title: {
                    text: 'Highcharts heat map [test]',
                    align: 'right'
                },

                subtitle: {
                    text: 'Temperature variation by day and hour through Nov 2015',
                    align: 'right'
                },

                yAxis: {
                    labels: {
                        format: '{value}'
                    },

                    categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],    

                    tickWidth: 1,
                    min: 1,
                    max: 12
                },

                xAxis: {

                    type: 'datetime',
                    tickPixelInterval: 1,
                    min: Date.UTC(2015, 10, 10),
                    max: Date.UTC(2015, 11, 10),
                     dateTimeLabelFormats: {
            day: '%e'
        },
                    labels: {
                        step: 1,
                            },
                    },

                colorAxis: {
                    stops: [
            [0, '#20255A'],
            [0.5, '#4B8EE2'],
            [0.9, '#AAEBFF']  
        ],
                    min: 1,
                    max: 40
                },

                series: [{
                    borderWidth: 0,
                    colsize: 24 * 36e5, // one day
                    tooltip: {
                        headerFormat: 'Power Generated<br/>',
                        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>'
                             }
                        }],
            });
        });

Upvotes: 0

Related Questions