Highcharts uses data in HTML tables to create interactive charts

Highcharts is a chart library written in pure JavaScript, providing intuitive and interactive charts for your Web sites and Web applications. Currently supports line, curve, area, area graph, column graph, bar graph, pie chart, scatter chart, angle measurement graph, area arrangement graph, area curve arrangement graph, column arrangement graph, polar coordinate graph, etc. Ten chart types.

Click to download the latest trial version of Highcharts

Insert picture description here

In this article, I will show you a simple method of how to create interactive charts using data in HTML tables.

Thanks to the Highcharts data module, it is easy and direct to load an HTML table as a data source.

The demo below visualizes the demographic data of Japan from 1935 to 2020. The data is obtained from the HTML table:
Insert picture description here

Let's see how to do

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 make it visual. I used the population of Japan's total population from 1935 to 2020 from the Japanese Wikipedia page.

In the picture below, you can see my access method, and then use the developer tools to copy the HTML code from Google chrome:

HTMLæº ?? ä »£ ç ??

If you are using another browser, please feel free to check how to obtain this data accordingly.

It is important to note that the data is clean before entering it into Highcharts. In this case, I removed the comma from the data, so the result is 68254 instead of 69254 (as shown in the table). Please feel free to apply any method to clean up the data you think is appropriate.
The last step of this stage is to paste the HTML code into the HTML section. In this case, when I use Codepen, I will paste the form under the HTML section.

2. Chart configuration

Now that the data is ready, let's set up Highcharts to get the data from the table and visualize it.
The first step is to link the table to the JS code. For this, I added the HTML id attribute to the table: id="datatable"

  <table id =“ datatable”><table id = “ datatable” > 
    <thead><thead>
      <tr><tr>

Then, I provide the table as a data source to Highcharts through the data function:

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

The table has many columns and rows, but all I need is the first column "year" and the second column "total population (census)"; note that the data starts in the second row. To configure all of this, I go back to the data function again and write the following code:

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

So, two simple steps can use Highcharts library to display the data in the HTML table.
In the comments section below, let me know your experience using Highcharts to visualize HTML tables.

APS to help improve production efficiency, the real production planning visual rendering and control, quickly and efficiently respond to different scenarios of production planning, improve on-time delivery performance, increase productivity and resource utilization