I've found a nice free API go get raw weather data, which would be great in graph form.
I've had no issue getting the data itself, but I am struggling to get the dates/times on to the xAxis.
Here's the API output:
"latitude":51.51147,"longitude":-0.13078308,"generationtime_ms":0.05698204040527344,"utc_offset_seconds":0,"timezone":"GMT","timezone_abbreviation":"GMT","elevation":23.0,"daily_units":{"time":"unixtime","temperature_2m_max":"°C","temperature_2m_min":"°C","wind_speed_10m_max":"km/h"},"daily":{"time":[1737158400,1737244800,1737331200,1737417600,1737504000,1737590400,1737676800],"temperature_2m_max":[4.2,4.1,6.8,3.1,5.6,7.7,8.8],"temperature_2m_min":[2.0,2.5,3.0,2.2,1.6,5.3,3.7],"wind_speed_10m_max":[10.4,10.8,6.1,10.1,9.7,12.6,19.4]}}
The date is unix time.
Code: Select all
var temperature = function() {
$.ajax({
url: 'https://api.open-meteo.com/v1/forecast?latitude=50.6870&longitude=-2.11129&daily=temperature_2m_max,temperature_2m_min&timeformat=unixtime&timezone=GMT&models=ukmo_seamless',
datatype: 'json',
success: function(resp) {
chart.hideLoading();
chart.series[0].setData(resp.daily.temperature_2m_max);
chart.series[1].setData(resp.daily.temperature_2m_min);
chart.series[2].setData(resp.daily.time);
}
});
options.xAxis = {
type: 'datetime',
maxPadding: 0.005,
minPadding: 0.005,
labels: {
formatter:function(){
return Highcharts.dateFormat('%Y %M %d',this.value);
},
style: {
fontSize: '13px',
color: 'black'
}
}
},