3

I'm trying to create a highcharts heatmap using data in datetime format. The data is hourly, extending for several days. I don't want the chart to wrap around for each day, but want all the data on one line.

Specifically, it's for showing the percentage of cloud cover for each hour, so each heatmap cell would be colored based on the cloud conditions (blue for sunny with a color gradient to dark grey for cloudy).

I want to take this example http://www.highcharts.com/maps/demo/heatmap and unwrap it into one long line.

Is this possible?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
WxGuy
  • 371
  • 2
  • 6
  • What do you mean... Would you only want one "pixel" for each x-value? That is, the color of the sky? No height on the y-axis? – Halvor Holsten Strand Aug 10 '14 at 19:10
  • The yAxis would still have a height in pixels, but only 1 'cell' high. It would be like this example, http://www.highcharts.com/demo/heatmap/. Except instead of a categorical xAxis I'd like datetime, and instead of multiple rows, just one long row with hourly data spanning several days. – WxGuy Aug 11 '14 at 01:11
  • 1
    I know this could be created by simulating a datetime axis using the date/time as xAxis categories, but it will be plotted on a secondary highstock yAxis below another datetime chart, sharing the xAxis. – WxGuy Aug 11 '14 at 01:25
  • Okay. Is there anything specific stopping you? This is perfectly possible. – Halvor Holsten Strand Aug 11 '14 at 03:08
  • Do you mean something like this: http://jsfiddle.net/sbochan/gh5c64w3/? – Sebastian Bochan Aug 11 '14 at 11:26
  • Have you tried? The multiple rows is a result of setting multiple x values, as you can see in the data for that example. If you give all of your data points the same x value, they should all be in the same row. – jlbriggs Aug 11 '14 at 15:56
  • Sebastian - Thanks. I had tried that but for some reason it was plotting diagonally, not horizontally. But I want a date value for the first item in the data array. Like this: http://jsfiddle.net/gdhjsfiddle/gh5c64w3/1/ As you see the colors dissapear. Have to leave, will work on that later today. Thanks. – WxGuy Aug 11 '14 at 17:56
  • http://jsfiddle.net/gdhjsfiddle/gh5c64w3/2/ Got it. Thanks for your responses. I had forgot to set colSize, so things weren't appearing. – WxGuy Aug 11 '14 at 21:16

1 Answers1

0

New to stackoverflow. Not sure if I'm supposed to leave this question unanswered, or answer it myself.

My problem was self-induced - I had forgot to set colSize, so the cells weren't appearing properly. Thanks for those who commented.

WxGuy
  • 371
  • 2
  • 6