Highcharts and CSV 101: part 2

In the previous article, I showed you how to fetch and display CSV data from a remote file. 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.

Let’s get started

Read from an HTML table

An HTML table is an effective way to display many types of data such as product’ prices, feature comparisons, nutritional information, etc. With the Highcharts data module, you can easily fetch an HTML data set and render it.

The demo below displays the comparison of vitamins purchased between men and women by age in Australia (January 2018 to December 2018):

The data in this demo is fetched from an HTML table thanks to the line of code:

data: {
  table: "datatable"
},

Remark
Be 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.

Parse CSV data before rendering

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.

The demo below displays the recommended dietary allowances of vitamins B1, B2, and B3 for men and women.

The initial data set has the string “mg” in the second and third lines, and if used as it is, you will get an error message: Highcharts error #14: www.highcharts.com/errors/14/. This error occurs when using a string as or with a data point.

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 “mg” from the CSV data set:

data: {
  csv: document.getElementById('csv').innerHTML,
  beforeParse: function(csv) {
    return csv.replace(/mg/g, '');
  }
},

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.