Mapantz
Posts: 34
Joined: Tue Nov 05, 2019 12:24 pm
Contact: Website

xAxis date/time from JSON

Hi

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'
      }
    }
  },
Any help would be hugely appreciated.
jedrzej.r
Site Moderator
Posts: 779
Joined: Tue Jan 24, 2023 11:21 am

Re: xAxis date/time from JSON

Hi there!

You need to parse the data into a correct Highcharts format, so that the timestamps are correctly assigned to the point values. You can either map the received response into an array of [x,y] coordinates, where x is a timestamp and y a value to display like shown here:

Code: Select all

success: function(resp) {
    
      const maxTemperatureData = resp.daily.time.map((date, index) => [date, resp.daily.temperature_2m_max[index]]);
      const minTemperatureData = resp.daily.time.map((date, index) => [date, resp.daily.temperature_2m_min[index]]);
    
      chart.hideLoading();
      chart.series[0].setData(maxTemperatureData);
	  chart.series[1].setData(minTemperatureData);
    }
Or you can set a series.pointStart as a first date from the response, and adjust pointInterval accordingly to the difference between each data point.

API:
https://api.highcharts.com/highcharts/series.line.data
https://api.highcharts.com/highcharts/s ... pointStart
https://api.highcharts.com/highcharts/s ... ntInterval

Also, please note that from Highcharts v12.0.0, you can ISO8601 format as a timestamp, and it will be interpreted correctly.

Kind regards,
Jędrzej Ruta
Highcharts Developer
Mapantz
Posts: 34
Joined: Tue Nov 05, 2019 12:24 pm
Contact: Website

Re: xAxis date/time from JSON

Hi

Thanks for the reply.

Unfortunately, the date is formatting as todays date at 1 minute increments.

ie;
Jan 21, 02:35
Jan 21, 02:36
Jan 21, 02:37

Instead of
Jan 21
Jan 22
Jan 23

I tried both unix time and ISO8601
Mapantz
Posts: 34
Joined: Tue Nov 05, 2019 12:24 pm
Contact: Website

Re: xAxis date/time from JSON

Forget my post above, I was using an old version of Highstock. lol

One last thing; Is there a way to get the chart to load from the current date/time?
jedrzej.r
Site Moderator
Posts: 779
Joined: Tue Jan 24, 2023 11:21 am

Re: xAxis date/time from JSON

Highcharts is a library designated to visualize provided data, so if you're making requests to the API, by default it should pull the latest data available unless the API states otherwise. Please note that Highcharts isn't a data provider, so its' up to the user to provide correct data set.
Jędrzej Ruta
Highcharts Developer
Mapantz
Posts: 34
Joined: Tue Nov 05, 2019 12:24 pm
Contact: Website

Re: xAxis date/time from JSON

Hi

Well, the weather model data provided always shows the previous 15 hours from the current date/time.

I guess another question would be; is it possible to have the range selector in reverse? In normal circumstances, graphs tend to show previous data, but the data is in the future.

For example, if I have a button at the top to show "one day" of data, the range selector goes to the furthest point in the data, and shows one day backwards. Is it possible to have it so that selecting "one day" it will show data from now -> one day ahead?
jedrzej.r
Site Moderator
Posts: 779
Joined: Tue Jan 24, 2023 11:21 am

Re: xAxis date/time from JSON

That's not entirely true, since you can get a forecast based on the current time and get data for a future forecast: 'https://api.open-meteo.com/v1/forecast? ... erature_2m'.

As per your second question: yes, you can override the default rangeSelector behaviour by calling the axis.setExtremes function inside of the click event. Then, you can set it to display range from current date to e.g. + 3 days.

Demo: https://jsfiddle.net/BlackLabel/6knux85c/

API:
https://api.highcharts.com/highstock/ra ... or.buttons
https://api.highcharts.com/highstock/ra ... ents.click
https://api.highcharts.com/class-refere ... etExtremes

Kind regards,
Jędrzej Ruta
Highcharts Developer
Mapantz
Posts: 34
Joined: Tue Nov 05, 2019 12:24 pm
Contact: Website

Re: xAxis date/time from JSON

Ah, perfect!

Thank you! Greatly appreciated.

Return to “Highcharts Stock”