nichemedia
Posts: 6
Joined: Wed Aug 31, 2022 8:55 am

Load JSON Data On Selector Change

Hi there

I am trying to load data from JSON files once the user selects an item from the dropdown selector.

I have struggled to copy any examples from the forums or the demos to fit my needs. I have searched many topics but I am struggling with the AJAX code snippets and making it work exactly for my needs. I also did not have any luck looking at a few highstocks demos.

(full disclosure: I am not a developer, and I have spent weeks learning highcharts and some basic JS which I just about get by on, so please be easy on me!)

I have a working map here with the data already in the data variable as usual:

https://jsfiddle.net/sfour/vhcbrmny/3/

Please note I have uploaded the JSON files to my server (visible in the commented code. They share the same format as the data in the data variable).

The expected result:

I would like the chart data to update with the data from the selected JSON file once the selector is clicked.

I just cannot figure out how to load the JSON into a variable.

Any assistance is greatly appreciated.

Please note I have uploaded 2 JSON files for this example but the finished product may have 20+ files.

I am also open to any other suggestions if you feel it could be done a better way whilst maintaining performance.

Thank you
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Load JSON Data On Selector Change

Hi there,

Welcome to our forum and thank you for contacting us with your question!

For such a short learning period, you did really well!
Unfortunately, there is some problem with your JSON file so it cannot be accessed through fetch API (see console error). But to show you the implementation I have used the JSON placeholder logged in a console.

I have created a simple function, which fetches the data from the given URL link to an API. Then, it sets the series.data to the array from JSON file (line 101). This function is called on every selectorValue change, with a different URL to fetch from.
Below that you can see the hardcoded example of setting the data (taken from your JSON).

Take a look at the console during every selectorValue change.

DEMO: https://jsfiddle.net/BlackLabel/pf6hk09w/
Fetch API: https://developer.mozilla.org/en-US/doc ... sing_Fetch

Please let me know if you have any questions regarding this code,
Best regards!
Kamil Musiałowski
Highcharts Developer
nichemedia
Posts: 6
Joined: Wed Aug 31, 2022 8:55 am

Re: Load JSON Data On Selector Change

Hey Kamil

Thank you so much for the quick response.

I have managed to get it working with your help and code, thank you.

Do you have any idea why my JSON (just a text file with a .json extension) does not work with the Fetch API?

I have checked and it is valid JSON, but I have a feeling it's something to do with the format or the way the data is sent? I can't figure it out (but I did find a free JSON hosting platform npoint (.) io ) that the exact same JSON works from.

I'm sure it's something simple but I can't figure it out.

All the best
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Load JSON Data On Selector Change

Great to hear that you've managed to get it working.

Fetching a local JSON file is a common issue, but not a Highcharts related so I'd suggest looking at more general forums that cover common JavaScript problems, such as StackOverflow.

For example something like here: https://stackoverflow.com/questions/494 ... local-json

Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Maps”