Large Heatmap with timestamp

[marrocmau]

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 (27.6 KiB) Viewed 3016 times

But the heatmap that I have (wrong) is this:

Screen Shot 2018-09-14 at 06.08.15.png (38.57 KiB) Viewed 3016 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?

[wojtek]

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.

[marrocmau]

https://jsfiddle.net/marrocmau/uscw2db4

[wojtek]

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/s ... ap.colsize
https://api.highcharts.com/highcharts/s ... ap.rowsize

Kind regards.

[marrocmau]

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 (57.28 KiB) Viewed 2968 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....

[wojtek]

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/y ... .formatter
https://api.highcharts.com/class-refere ... 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/