{"id":22593,"date":"2022-06-21T08:16:58","date_gmt":"2022-06-21T08:16:58","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22593"},"modified":"2026-01-13T11:25:02","modified_gmt":"2026-01-13T11:25:02","slug":"highcharts-and-csv-101-part-2","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-and-csv-101-part-2\/","title":{"rendered":"Highcharts and CSV 101: part 2"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>In the previous article, I showed you how to <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-and-csv-101-part-1\/\" target=\"_blank\" rel=\"noopener\">fetch and display CSV data from a remote file<\/a>. In this article, I will cover how to retrieve and display CSV data from an HTML table and also how to parse CSV data before any visualization.<\/p>\n<p>Let\u2019s get started<\/p>\n<h2>Read from an HTML table<\/h2>\n<p>An HTML table is an effective way to display many types of data such as product\u2019 prices, feature comparisons, nutritional information, etc. With the Highcharts data module, you can easily fetch an HTML data set and render it.<\/p>\n<p>The demo below displays the comparison of vitamins purchased between men and women by age in Australia (January 2018 to December 2018):<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 780px; border: none;\" title=\"A column chart displays the comparison of vitamins purchased between men and women by age in Australia (January 2018 to December 2018)\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/read-csv-data-from-html-table\"><\/iframe><\/p>\n<p>The data in this demo is fetched from an HTML table thanks to the line of code:<\/p>\n<pre>data: {\r\n  table: \"datatable\"\r\n},<\/pre>\n<p><i><b>Remark<\/b><br \/>\nBe sure that your HTML data is well organized and clean; otherwise, you will have to process it before setting it up on the table or before the rendering operation.<\/i><\/p>\n<h2>Parse CSV data before rendering<\/h2>\n<p>All previous demos displayed the whole data set with no processing or filtering. But what if you want to preprocess the data before displaying it? Well, you guessed it, the Highcharts data module is here to help.<\/p>\n<p>The demo below displays the recommended dietary allowances of vitamins B1, B2, and B3 for men and women.<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 480px; border: none;\" title=\"A column chart displays the recommended dietary allowances of vitamins B1, B2, and B3 for men and women\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/read-csv-data-using-beforeparse\"><\/iframe><\/p>\n<p>The initial data set has the string \u201cmg\u201d in the second and third lines, and if used as it is, you will get an error message: <i>Highcharts error #14: <a href=\"http:\/\/www.highcharts.com\/errors\/14\/\" target=\"_blank\" rel=\"noopener\">www.highcharts.com\/errors\/14\/<\/a><\/i>. This error occurs when using a string as or with a data point.<\/p>\n<p>To solve this issue, the Highcharts data module offers the beforeParse option, where you can parse the data set before the rendering. In this case, all I have to do is to remove the string \u201cmg\u201d from the CSV data set:<\/p>\n<pre>data: {\r\n  csv: document.getElementById('csv').innerHTML,\r\n  beforeParse: function(csv) {\r\n    return csv.replace(\/mg\/g, '');\r\n  }\r\n},<\/pre>\n<p>&nbsp;<\/p>\n<p>Now, you know the four best practices to get the best results from a CSV data source. Let me know your thoughts and questions in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to read from an HTML table, parse CSV data before rendering, and create interactive charts with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":22616,"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-22593","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\/22593","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=22593"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22593\/revisions"}],"predecessor-version":[{"id":24066,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22593\/revisions\/24066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22616"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22593"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}