Data Visualization With DataTables.js and Highcharts.js

In this tutorial, you will learn how to visualize data by taking advantage of DataTables.js and graphs. .js JavaScript libraries.

Here is what we will build (see the larger version for a better experience):

Libraries Required

For the purposes of this example, we will load the following libraries into our pen:

  • jQuery
  • DataTables.js
  • Highcharts.js

With this in mind, if you look under the tab Parameters you will see that I have included an external CSS file:

In the same way, I 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 therefore does not require jQuery.

The HTML

To give the kickoff, we define an element with the class of containing 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 the country details. The source of our data for this example is worldometers.info .
  • A empty div that will contain the card.

Here is the structure HTML:

It should be mentioned that for the sake of simplicity we have specified the above hard-coded table data. In a real project however, the table can be created dynamically.

With markup ready, and an added background color for clarity, the project looks like this:

CSS

At this point, we define some basic styles, as follows:

It is important to understand that:

  • The # dt-table_wrapper does not exist in our markup. It is added by the DataTables as soon as we initialize it.
  • While we set some basic rules for small screens, note that the demo will not be fully responsive. There are many things we can do to make the painting and the graph look better on smaller screens. For example, for DataTables, an extension Responsive is available, but this is beyond the scope of this tutorial.

With CSS in place, let's see what the project looks like. We will not see a big difference yet because we did not initialize the libraries:

The JavaScript

Now for the JavaScript window in our pen. When the DOM is ready, function init is executed; this function triggers other sub-functions:

As you will see, each of these sub-functions accomplishes a certain task.

Initializing DataTables

The first step is to convert our table to a "DataTables" table.We can do this with a single line of code: $ ("# dt- table "). DataTable ();

If we look at the table now, we will notice that it has adopted the capabilities of a DataTables table, namely: we can sort it, search for it , etc. Play with in the following demo:

Now, as you can see, DataTables applies a default sort to the table. If necessary, we can customize this behavior

Extract data from table

The next step is to retrieve the data from the table and build the graph . We do not want any data from the table. In fact, if you look at the final version of our demo, you will notice that the map contains only the data of the first three columns (Country, Population, Density).

With this in mind, in order to retrieve the required data, we will use the DataTables API . The function responsible for this behavior is:

In this function, we browse the rows of the table and for each row, we retrieve the data from the target column and store them in the associated tables. Finally, all these tables are stored in another table.

Here is a quick view of the master table (ie dataArray ):

 The table that contains the desired table data "src =" https: // cms-assets.tutsplus.com/uploads/users/780/posts/29691/image/data.png"/></figure>
<p>Before moving on, it is important to understand one thing: <code class= The function getTableData must collect data from all rows of the table, but if we look for something specific in the table, only the corresponding rows must be collected and processed.] Rows Function More precisely, a object with the property value search: "applied" .

Note again that if we do not pass this object, we will always collect for more information about the properties that we can pass on this item, be sure to check this page

Building the Graph

Now that we have the desired data, we are ready to build the graph. This will contain two nested graphs, a Column Chart and a Spline Chart .

Here is the corresponding function:

Do not be overwhelmed by the code above! Without a doubt, the best way to understand how it works is to try it. In addition, you should definitely read the documentation . Whatever the case may be, let us briefly highlight the key concepts:

  • The x-axis contains all countries.
  • We define two axes y. The first contains all population values, while the second includes all available densities.
  • If our graph does not contain any data, a message appears. Note that we are able to customize the text of the message via the object lang .

With the graphics in place, let's look again at our progress:

Synchronization of the table and graphs

In the previous section, we built the graph according to the data of the table, but there is still no complete synchronization between the table and the graph. To prove it, go back to the last demo and change the order (sort) of the table, or look for something. You will notice that the chart does not react to table changes.

To solve this problem, let's take advantage of the event DataTables draw . This event fires whenever the table is updated. So, as soon as we change the table, we have to remember the data from the table and rebuild the table.

Here is the tricky thing though. The draw is also triggered during the pagination of the table; there is no reason to rebuild the chart during this process. Ideally, we should prevent this behavior. Fortunately, there is the event page that helps us to accomplish this task

Here is the code that implements the desired functionality:

Now that the table and the graph are synchronized, if we do a "bad" search, we will see the following messages:

version of our project:

Browser support

Both plugins support browsers well DataTables support Highcharts support ), so you can expect this demo to work well browsers.

Again, keep in mind that this demo is not optimized for small screens.

Finally, as usual, we use Babel to compile the code ES6 up to ES5.

Conclusion

That's it people! We have been able to visualize our data by combining two popular and powerful JavaScript libraries.

Now that you know the process, go ahead and build the demo's final feature. For example, try adding custom filters to the table.

As always, if you have any questions or there is anything else you would like to see in the next step of this tutorial, let me know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.