It is currently Mon Sep 24, 2018 6:51 am Advanced search

Large Heatmap with timestamp

Technical support, bug reports and more.

Large Heatmap with timestamp

Postby marrocmau » Fri Sep 14, 2018 6:19 am

I have to create a large heatmap that represents the sensor's values in the last 24/48 hours .
I put time (timestamp) on xSerie and the hours on ySeries hours.
This is my code:
Code: Select all
 var currDate = new Date(myTIMESTAMP);           
          twodayAgo.setDate(currDate.getDate() -2);
          onedayAfter.setDate(currDate.getDate());
Highcharts.chart(chartUnit, {
            chart: {
                type: 'heatmap',
                margin: [60, 10, 80, 50]
            },
            boost: {
                useGPUTranslations: true
            },
            title: {
              text: ' ',
              align: 'left',
              x: 40
             },
            xAxis: {
                type: 'datetime',
                min: Date.UTC(twodayAgo.getFullYear(),twodayAgo.getMonth(),twodayAgo.getDate(),twodayAgo.getHours(),twodayAgo.getMinutes(),twodayAgo.getSeconds()),
                max: Date.UTC(onedayAfter.getFullYear(),onedayAfter.getMonth(),onedayAfter.getDate(),onedayAfter.getHours(),onedayAfter.getMinutes(),onedayAfter.getSeconds()),
                labels: {
                    align: 'left',
                    x: 5,
                    y: 14,
                    format: '{value:%Y-%m-%d}'
                },
                showLastLabel: false,
                tickLength: 5
            },
            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,
                reversed: true
            },

            colorAxis: {
                stops: [
                    [0, '#3060cf'],
                    [0.5, '#fffbbc'],
                    [0.9, '#c4463a'],
                    [1, '#c4463a']
                ],
                min: 0,
                max: 1000,
                startOnTick: false,
                endOnTick: false,
                labels: {
                    format: '{value}'
                }
            },

            series: [{
                boostThreshold: 100,
                borderWidth: 0,
                nullColor: '#EFEFEF',
                colsize: 24 * 3600 * 1000,//colsize: 24 * 36e5, // one day
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ?</b>'
                },
                turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release,
               
            }
          ]

        });

Like data I have is a series of [timestamp, value] (about 1200 records for 24 hours).
Using Javascript from timestamp have 2 values with milleseconds (day and hours) and created the array that use to fill the heatmap:
Screen Shot 2018-09-14 at 06.05.04.png
Screen Shot 2018-09-14 at 06.05.04.png (27.6 KiB) Viewed 68 times


But the heatmap that I have (wrong) is this:
Screen Shot 2018-09-14 at 06.08.15.png
Screen Shot 2018-09-14 at 06.08.15.png (38.57 KiB) Viewed 68 times


it's as if I'm wrong to create the hours from timestamo because it puts the values ​​only at zero.

Where am I wrong? How do I create a correct heatmap with my values?
marrocmau
 
Posts: 6
Joined: Mon Sep 10, 2018 10:25 am

Re: Large Heatmap with timestamp

Postby wojtek » Fri Sep 14, 2018 9:04 am

Hi marrocmau,

Could you provide me with a simplified online demo of your chart (jsfiddle for example) with sample data? Then I will be able to reproduce your issue and help you easier.

Kind regards.
Wojciech Chmiel
Highcharts Developer
wojtek
 
Posts: 296
Joined: Tue Jul 03, 2018 2:32 pm

Re: Large Heatmap with timestamp

Postby marrocmau » Fri Sep 14, 2018 11:14 am

marrocmau
 
Posts: 6
Joined: Mon Sep 10, 2018 10:25 am

Re: Large Heatmap with timestamp

Postby wojtek » Fri Sep 14, 2018 5:06 pm

Hi marrocmau,

I checked your example and your sample data is only from one day so I generated data from a couple of days. Firstly in your example, you missed loading data to the chart. But what's more important you have to set colsize and rowsize which are 1 by default. In datetime axis, you should set them equal your time period on a particular axis. Check the demo I posted below with generated sample data and try to implement this with your data.

Demo:
http://jsfiddle.net/wchmiel/h01f52wx/1/

Api reference:
https://api.highcharts.com/highcharts/series.heatmap.colsize
https://api.highcharts.com/highcharts/series.heatmap.rowsize

Kind regards.
Wojciech Chmiel
Highcharts Developer
wojtek
 
Posts: 296
Joined: Tue Jul 03, 2018 2:32 pm

Re: Large Heatmap with timestamp

Postby marrocmau » Tue Sep 18, 2018 12:00 pm

I appreciated your suggestion but it does not completely solve my problem.

How can I put only the hours on the X axis without 1 Jan ...2 Jan?
Screen Shot 2018-09-18 at 11.54.54.png
Screen Shot 2018-09-18 at 11.54.54.png (57.28 KiB) Viewed 20 times


And how to reduce the distance between one hour and the other (is the tick ???)? Because I can not put a chart height of 500 but max 300....
marrocmau
 
Posts: 6
Joined: Mon Sep 10, 2018 10:25 am

Re: Large Heatmap with timestamp

Postby wojtek » Tue Sep 18, 2018 4:23 pm

marrocmau,

1. To put only hours on axis you can use labels.formatter and return the format you like.

Api reference:
https://api.highcharts.com/highcharts/yAxis.labels.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat

2. You don't have to change the distance between hours, simply set the chart height to 300 and hours distance will automatically reduce.

Api reference:
https://api.highcharts.com/highcharts/chart.height

Exmaple:
http://jsfiddle.net/wchmiel/p1sfh9y4/1/
Wojciech Chmiel
Highcharts Developer
wojtek
 
Posts: 296
Joined: Tue Jul 03, 2018 2:32 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 3 guests