{"id":22585,"date":"2022-06-21T08:15:48","date_gmt":"2022-06-21T08:15:48","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22585"},"modified":"2026-01-13T11:24:53","modified_gmt":"2026-01-13T11:24:53","slug":"highcharts-and-csv-101-part-1","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-and-csv-101-part-1\/","title":{"rendered":"Highcharts and CSV 101: part 1"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>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:<\/p>\n<ul>\n<li>Upload a CSV data from a file.<\/li>\n<\/ul>\n<p>The next article:<\/p>\n<ul>\n<li>Read from an HTML table.<\/li>\n<li>Parse CSV data before rendering.<\/li>\n<\/ul>\n<p>Let\u2019s get started<br \/>\nA comma-separated values file, also known as a CSV, is a standard <a href=\"https:\/\/en.wikipedia.org\/wiki\/Data_exchange\" target=\"_blank\" rel=\"noopener\">data exchange<\/a> format widely supported by data scientists, businesses, researchers, etc. CSV files can be challenging to parse, but don\u2019t 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.<\/p>\n<h2>Load a CSV file from a remote location<\/h2>\n<p>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.<br \/>\nThe demo below displays Vitamin D google search queries from 2004 to 2022:<\/p>\n<p><!--p class=\"demo-container\"><iframe style=\"width: 100%; height: 670; border: none;\" title=\"Line chart displays Vitamin D google search queries from 2004 to 2022\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/read-csv-data-from-file\"><\/iframe><\/p-->\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"670\" src=\"\/\/jsfiddle.net\/mushigh\/n2dz653t\/2\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n<\/p>\n<p>The data is stored on GitHub and fetched, thanks again to the Highcharts data module, by the following code:<\/p>\n<pre>data: {\r\n  csvURL: \"https:\/\/www.highcharts.com\/samples\/data\/google-trends-vitamin-d.csv\"\r\n},<\/pre>\n<p>\nNow, you know how to load CSV data from a file; feel free to read the second article to <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-and-csv-101-part-2\/\" target=\"_blank\" rel=\"noopener\">learn how to read from an HTML table and parse CSV data before rendering<\/a>.<br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to upload CSV data from a file, then create interactive charts with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":22592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094,1100],"coauthors":[699],"class_list":["post-22585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core","tag-performance"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22585"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22585\/revisions"}],"predecessor-version":[{"id":29369,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22585\/revisions\/29369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22592"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22585"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}