{"id":20553,"date":"2021-01-21T22:47:09","date_gmt":"2021-01-21T21:47:09","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20553"},"modified":"2026-01-13T11:17:39","modified_gmt":"2026-01-13T11:17:39","slug":"visualize-data-from-html-tables","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/visualize-data-from-html-tables\/","title":{"rendered":"Visualize data from HTML tables"},"content":{"rendered":"<p>In this article, I will show you a simplistic way how to create an interactive chart using data from an HTML table.<br \/>\nThanks to the <a href=\"https:\/\/www.highcharts.com\/docs\/working-with-data\/data-module\" target=\"_blank\" rel=\"noopener\">Highcharts data module<\/a>, it is easy and straightforward to load an HTML table as a data source.<\/p>\n<p>The demo below visualizes the Japanese demographics from 1935 to 2020. The data is fetched from an HTML table:<\/p>\n<p class=\"demo-comtainer\"><iframe height=\"1040\" style=\"width: 100%;\" scrolling=\"no\" title=\"Data defined in a HTML table (Demographics of Japan 1935\u20132020)\" src=\"https:\/\/codepen.io\/mushigh\/embed\/jOMRPzO?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A line chart visualizes the Japanese demographics from 1935 to 2020 with the data is fetched from an HTML table\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/jOMRPzO'>Data defined in a HTML table (Demographics of Japan 1935\u20132020)<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Let\u2019s see how to do that \ud83d\ude42<\/p>\n<p>There are two simple steps to create this interactive chart:<\/p>\n<p><b>1. HTML source code<\/b><br \/>\nThe 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 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Demographics_of_Japan\" trget=\"_blank\">Demographics of Japan Wikipedia webpage<\/a>.<br \/>\nIn the picture below, you can see how I access, then copy the HTML code from google chrome using the developer tools:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code.jpg\" alt=\"HTML source code\" width=\"1160\" height=\"928\" class=\"alignnone size-full wp-image-20554\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code.jpg 1160w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code-550x440.jpg 550w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code-738x590.jpg 738w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code-768x614.jpg 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code-350x280.jpg 350w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/01\/21221750\/HTML-source-code-1125x900.jpg 1125w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/p>\n<p>If you are using another browser, feel free to check how to grab this data accordingly.<br \/>\nIt 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.<br \/>\nThe 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.<\/p>\n<p><b>2. Chart configuration <\/b><br \/>\nNow that the data is ready, let\u2019s set up Highcharts to fetch the data from the table and visualize it.<br \/>\nThe first step is to link the table to the JS code, for that I add an HTML id attribute <code>id=\"datatable\"<\/code> to the table:<\/p>\n<pre>  &lt;table id=\"datatable\"&gt;\r\n    &lt;thead&gt;\r\n      &lt;tr&gt;<\/pre>\n<p>Then I feed the table as a data source to Highcharts through the <code>data<\/code> feature:<\/p>\n<pre> data: {\r\n    table: \"datatable\",\r\n    ...\r\n  },<\/pre>\n<p>The table has numerous columns and rows, but all I need is the first column \u201cYear\u201d, and the second column \u201cTotal population (census in thousands)\u201d; 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:<\/p>\n<pre> data: {\r\n    ...\r\n    startRow: 1,    \/\/second row\r\n    startColumn: 0, \/\/ first column \u201cYear\u201d\r\n    endColumn: 1    \/\/ second column \u201c\u201d\r\n  },\r\n<\/pre>\n<p>That is it, two easy steps and you are able to display data from an HTML table using the Highcharts library.<\/p>\n<p>Let me know your experience with visualizing HTML tables with Highcharts in the comment section below. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an interactive chart from an HTML table using Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":20566,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1098,1094],"coauthors":[699],"class_list":["post-20553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-connectors","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20553","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=20553"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20553\/revisions"}],"predecessor-version":[{"id":29337,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20553\/revisions\/29337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20566"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20553"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}