weatherdoc
Posts: 2
Joined: Tue Aug 02, 2022 8:06 pm

Can csvURL have a variable path/filename

I am trying to automatically plot data from my weather station that is contained in a daily CSV file. The CSV file is generated each night with the date as the filename and it resides on my weather server so I am using csvURL: to get the data. The snippet of code to get the data is below and I would like the directory path and filename to be variables. Is that possible? Hard coded, the data for July 31, 2022 is in the path /daily-graphs/2022/07/ and the filename is 20220731.csv. The filename will change daily and the path will change monthly and annually. I would like the full path to be something like /daily-graphs/YYYY/MM/YYYYMMDD.csv where YYYY, MM, and DD are the variables that could be inserted into the csvURL.

Code: Select all

data: {
        csvURL: 'https://myweather-server.net/daily-graphs/2022/07/20220731.csv',
        		},
Alternately, since the files are on my own server, could I accomplish this without using csvURL: to load the data but instead get it directly from the server?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Can csvURL have a variable path/filename

Hi there,

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

You can easily achieve that by using a JavaScript template literal. So your code would look like this:

Code: Select all

const year = 2022,
  month = 2,
  filename = 12312321;

data: {
  csvURL: `https://myweather-server.net/daily-graphs/${year}/${month}/${filename}.csv`,
},

Template literals: https://developer.mozilla.org/en-US/doc ... e_literals

Let me know if that's working for you!
Have a good day
Kamil Musiałowski
Highcharts Developer
weatherdoc
Posts: 2
Joined: Tue Aug 02, 2022 8:06 pm

Re: Can csvURL have a variable path/filename

Thanks for your quick reply. The code is not working, maybe I implemented it incorrectly. Within the JavaScript section, the code looks like this for August 2, 2022 data but with the backtick characters now part of the URL, the code is assuming everything after the double backslashes through the comma at the end of the cvsURL: line is a comment.

Code: Select all

	const year = 2022,
	month = 08,
	filename = 20220802;

    data: {
        csvURL: `https://myweather-server.net/daily-graphs/${year}/${month}/${filename}.csv`,
		},
Can you see what I'm doing wrong?

Beyond this issue, ultimately, I would like to extract the variables for year, month, and filename from the CSV file itself and populate those in the highcharts script since a new file will be generated daily. Is there a method to read the CSV filename and create the variables within the script from the filename?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Can csvURL have a variable path/filename

Hi there,

It is hard to tell why this solution is not working for you, maybe the code editor setting is causing some problems?

Take a look at these two demos, where I have implemented a template string in Highcharts for CSV, and image URL.

CSV: https://jsfiddle.net/BlackLabel/w5fbe6t1/
Image: https://jsfiddle.net/BlackLabel/fpnoh4d7/

You can also see, how your link configuration performs in this simple fiddle:
https://jsfiddle.net/BlackLabel/vbyoex1p/

JavaScript does not have functionality that would allow it to read filenames - so I'm afraid that wouldn't be possible.

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”