How to format Highcharts columnRange to get json data for temperature Min and Max

Question

I'm trying to display information on Highcharts from the forecast.io api. With the help of others on this site, I have figured out how to call the data using a simple line or area chart; however, I can't figure out how to with the columnRange chart. I want to display the daily min and max temperature forecast. So the top column would display today's min and max temp, and the next column would be tomorrows, and so on.

To call the min and max for today from forecast.io:

• data.daily.data[0].temperatureMin
• data.daily.data[0].temperatureMax

Tomorrows would have a "1" instead of a 0. The day after would have a "2".

I haven't been able to figure out how to make a function that does this for each day. I have a jsfiddile which includes my forecast.io API key. This is needed to call from the source.

Anyways, any help would be much appreciated! http://jsfiddle.net/nn51895/gjw9m1qo/2/

(my x axis labels are really messed up as you will see..)

$(function () {

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true
    },

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    xAxis: {

    },

    yAxis: {
        title: {
            text: ''
        }
    },

    tooltip: {
        valueSuffix: '°F'
    },

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.y + '°F';
                }
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Daily Min and Max',
        data: 'ChartData',
        pointStart: new Date().getTime(),
       pointInterval:90000000,

    }]

  });

});

$.ajax({
 url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
 jsonp: "callback",
 dataType: "jsonp",
 success: function(chart) {

  var dataArr = new Array();
   var height = chart.xAxis[0].height;
  var pointRange = chart.daily.data[0].temperatureMax - chart.daily.data[0].temperatureMin;
   var max = chart.daily.data[0].temperatureMax;
   var min = chart.daily.data[0].temperatureMin;
   var pointCount = (max - min) / pointRange;
    var timeint = chart.daily.data[0].time; 
 for(var i=0; i<chart.daily.data.length; i++)
  dataArr.push(chart.daily.data[i].temperatureMin);

 plotChart(dataArr, timeint)


 }
 });

Answer 1

First of all, as said in the comment:

success: function (chart) {
    ...
    var height = chart.xAxis[0].height;
}

You are trying to get for some unknown reason height of xAxis from the chart. Meanwhile you chart variable is referring to the data from AJAX call. I hope that's clear, so remove that line or change to:

success: function (chart) {

    var myChart = $('#container').highcharts();
    var dataArr = new Array();
    var height = myChart.xAxis[0].height;
}

Second thing, that option:

        data: 'ChartData',

Is wrong, there should be an empty array, since Highcharts requires array for data, not some string:

        data: [],

Now, after fixing these bugs, you should go to this demo and create the same data format. That's example for required format for Highcharts.

More about series.data can be found in API reference - you need to read this.