How to format Highcharts to get specific json data?

Question

I have been spending some time trying to figure this out. I normally research instead of asking questions, but I am completely stumped. I am trying to create a Highchart with data from the forecast.io api. Specifically, the hourly temperature and minutely precipitation.

For those who don't know. To call forecast.io you need your own API key. I don't mind sharing mine right now, because you can automatically change it whenever you want. Here is a link to the json that results from calling a specific location (the actual json list would take up too much space and cause clutter for my question)

https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/34.6507,-82.8612

To call the hourly temperature:

• data.hourly.data[0].temperature (current hour)
• data.hourly.data[2].temperature ( two hours form now, you get the point..)

I just have no clue how to include this with the highcharts javascript. Here is a sample line chart from Highcharts that I slightly modified but don't know where to go from here. I have tried so many different ways.

$(function () {
$('#container').highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Temp'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        min: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [{ // Light air
            from: 0.3,
            to: 1.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Light breeze
            from: 1.5,
            to: 3.3,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Gentle breeze
            from: 3.3,
            to: 5.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Moderate breeze
            from: 5.5,
            to: 8,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Fresh breeze
            from: 8,
            to: 11,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Strong breeze
            from: 11,
            to: 14,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // High wind
            from: 14,
            to: 15,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }]
    },
    tooltip: {
        valueSuffix: ' m/s'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            tickInterval: 3600000, // one hour

        }
    },
    series: [{
        name: 'Temperature',
        data: []

    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});
 $.ajax({
  url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
  jsonp: "callback",
  dataType: "jsonp",
  success: function(data) {

  }
  });
});

http://jsfiddle.net/nn51895/kto8yt3r/

Any help would be appreciated.

Also, I have read through the Highcharts documentation, and samples. I couldn't figure it out. I must be missing something.

Answer 1

Here you go, i have created a function which takes the dataseries and the initial time as parameter and plot them using highcharts.

The ajax request is fetching hourly temperature like this:

 $.ajax({
  url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
  jsonp: "callback",
  dataType: "jsonp",
  success: function(odata) {
  var dataArr = new Array();
  var timeint = odata.hourly.data[0].time; 
  for(var i=0; i<odata.hourly.data.length; i++)
      dataArr.push(odata.hourly.data[i].temperature);
  plotLine(dataArr, timeint)
  }
  });

http://jsfiddle.net/kto8yt3r/3/

You can always format the xAxis, yAxis and tooltip data according to your need.

Hope this help!