CODEWITHSUNDEEP
highcharts
peter0601
peter0601

Reputation: 75

HighChart Heatmap with JSON data

I am trying to integrate JSON specific data into a heatmap offered by highmaps/highcharts.

The example on

Link to HeatMap Demo

shows how to use CSV approach to load the data. But I was not able to get it running with a JSON array. Can anyone provide an equivalent to the CSV from the example to get the same heatmap chart, or show me the way to another example based on JSON?

Thx in advance.

Cheers Peter

Upvotes: 7

Views: 8075

Answers (1)

wergeld
wergeld

Reputation: 14442

You need to convert that to the col/row point instead of date string. You are going to have 2 category axis: x and y. Then the index of x/y axis becomes the [x, y, value]. So, if your data starts on "2013-04-01" then it is your first index such that [ ["2013-04-01",0,-0.7], ["2013-04-02",0,-3.4], ["2013-04-03",0,-1.1] ] becomes:

[ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]

Note that this is just one row's worth of data. What is your y component?

EDIT: If your yAxis component will be the hour of the day then you would set up your axii like so:

xAxis: {
    categories: ['2013-04-01', '2013-04-02', '2013-04-03'],
    labels: {
        rotation: 90
    }
},
yAxis: {
    title: {
        text: null
    },
    labels: {
        enabled: false
    },
    categories: ['Midnight', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm'],
    min: 0,
    max: 23,
    reversed: true
},

Then you series would look something like:

series: [{
    borderWidth: 0,
    nullColor: '#EFEFEF',
    data: [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]
}]

Live demo.

There are other items I added there that I will let you figure out (why do I set reversed: true, what is the colorAxis, etc). The important thing to note is that the series.data format is different from any other highchart setup.

Upvotes: 4

Related Questions