In this series of articles, I will share with you four tips to fetch CSV data and then create interactive charts with Highcharts. I will cover the following topics:
- Upload a CSV data from a file.
The next article:
- Read from an HTML table.
- Parse CSV data before rendering.
Let’s get started
A comma-separated values file, also known as a CSV, is a standard data exchange format widely supported by data scientists, businesses, researchers, etc. CSV files can be challenging to parse, but don’t worry; Highcharts has got you covered- thanks to our data module that does the heavy lifting. Simply put, if you work with data, the chances you have already dealt with or will deal with a CSV file are very high.
Load a CSV file from a remote location
Reading from HTML could be a good solution for a short data set. However, if the data set is too long or requires an update; well, storing it in a different file or a remote location is a better solution.
The demo below displays Vitamin D google search queries from 2004 to 2022:
The data is stored on GitHub and fetched, thanks again to the Highcharts data module, by the following code:
data: { csvURL: "https://www.highcharts.com/samples/data/google-trends-vitamin-d.csv" },
Now, you know how to load CSV data from a file; feel free to read the second article to learn how to read from an HTML table and parse CSV data before rendering.
Comments
Frank | 5 months ago
This function Load a CSV file from a remote location
it doesn’t work in jsfiddle, can you update the code please
Thanks
Mustapha Mekhatria | 5 months ago
Hi,
Please, check the demo as it is a jsfiddle demo loading a remote CSV file.
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.