extract-plot-data.js

function getWeatherData() {
  var url = 'https://gist.githubusercontent.com/raspberrypisig/32e1399e26e3f174d1a7504abdd37b1f/raw/1a785324283d6b3a0c86699e7e74cf325022f684/weather.json';
  
  $.getJSON(url, function(data){
    var filteredData;
	filteredData = data.list.reduce(function(extractedData, datapoint) {
	  extractedData.push([datapoint.dt,datapoint.main.temp]);
      return extractedData;	  
	},[]);
	plotHighcharts(filteredData); 
  });
}

function plotHighcharts(data) {
Highcharts.chart('container', {
    title: {
      text: '5 day Temp Forecast Data for Melbourne, AU',
      x: -20 //center
    },
    subtitle: {
        text: 'Source: https://openweathermap.org/api',
        x: -20
    },
    xAxis: {
      type: 'datetime',
        labels: { // don't display the dummy year
            formatter: function() {
                var v1;
                v1 = Highcharts.dateFormat('%l%p', this.value *1000);
                if (v1  != "12AM" && v1 != "1AM" && v1 != "2AM") {
                  return;
                }
                return Highcharts.dateFormat('%e %b', this.value *1000)
            }
        },
    tickInterval: 3600*3,
    tickPositions: 0 ,
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Temp (°C)'
        },
        min: 0
    },
    tooltip: {
        formatter: function() {
            return '<b>Temp: ' + this.y + '\u00B0C</b><br>' + Highcharts.dateFormat('%e %b %Y %l:%M%p', this.x*1000);
        },
		useHTML: true
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Temperature data for Melbourne, Australia 12 Feb 9AM - 16 Feb 9PM 2017',
        data: data
    }]
});
}


var data = getWeatherData();