Highcharts and CSV 101: part 1

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.