www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

Data Visualization With DataTables.js and Highcharts.js

In this tutorial, you’ll learn how to visualize data by taking advantage of the DataTables.js and Highcharts.js JavaScript libraries.

Here’s what we’re going to build (check out the larger version for a better experience):

Required Libraries

For the purposes of this example, we’ll have to load the following libraries in our pen:

  • jQuery
  • DataTables.js
  • Highcharts.js

With that in mind, if you look under the Settings tab, you’ll see that I’ve included one external CSS file:

In the same way, I’ve also included four external JavaScript files:

Note: we had to add jQuery to our project because DataTables.js is a jQuery plugin. However, keep in mind that Highcharts.js is a pure JavaScript library, and thus doesn’t require jQuery.

The HTML

To kick things off we define an element with the class of container which contains two sub-elements:

  • A table with 26 rows. The first row refers to the table headers th, while the other 25 rows carry country details. The source of our data for this example is worldometers.info.
  • An empty div which will hold the chart.

Here’s the HTML structure: