Visualize data from HTML tables

In this article, I will show you a simplistic way how to create an interactive chart using data from an HTML table.
Thanks to the Highcharts data module, it is easy and straightforward to load an HTML table as a data source.

The demo below visualizes the Japanese demographics from 1935 to 2020. The data is fetched from an HTML table:

Let’s see how to do that 🙂

There are two simple steps to create this interactive chart:

1. HTML source code
The first step is to copy the HTML source code of the table to visualize. I am using the Japanese total population 1935-2020 from the Demographics of Japan Wikipedia webpage.
In the picture below, you can see how I access, then copy the HTML code from google chrome using the developer tools:

If you are using another browser, feel free to check how to grab this data accordingly.
It is important to note that the data is clean before you feed it into Highcharts. In this case, I remove the comma from the data, so instead of 69,254 (as it is written in the table), the result is 68254. Feel free to apply any method to clean the data that you find applicable.
The final step in this phase is to paste the HTML code into the HTML section. In this case, as I am using Codepen, I will paste the table under the HTML section.

2. Chart configuration
Now that the data is ready, let’s set up Highcharts to fetch the data from the table and visualize it.
The first step is to link the table to the JS code, for that I add an HTML id attribute id="datatable" to the table:

  <table id="datatable">
    <thead>
      <tr>

Then I feed the table as a data source to Highcharts through the data feature:

 data: {
    table: "datatable",
    ...
  },

The table has numerous columns and rows, but all I need is the first column “Year”, and the second column “Total population (census in thousands)”; note that the data starts from the second row. To configure all that, I go back to the data feature again and write the following code:

 data: {
    ...
    startRow: 1,    //second row
    startColumn: 0, // first column “Year”
    endColumn: 1    // second column “”
  },

That is it, two easy steps and you are able to display data from an HTML table using the Highcharts library.

Let me know your experience with visualizing HTML tables with Highcharts in the comment section below.