Tutorial #7 Dive into DC.JS a JavaScript Library

What Will I Learn?

By Continuing our dc.js tutorial series. In our # 7th tutorial we are going to teach you: how to develop a Data Table using dc.js library. We hop you enjoying our tutorials and learn something from our tutorials. Follow the post to develop a data table. `

Requirements

Basics of HTML and CSS
Intermediate Level JavaScript

Difficulty

Intermediate

Tutorial Contents

Introduction
Create working Environment
Develop Data Table

Introduction

Today we are going to develop data from some given json data. DC.JS provide us a whole class to create data table. Data Table visualize the crossfilter.js data set in tabular form. In contrast to other charts, the data table use the group attribute as a keying function for nesting the data together in groups. So, don't use a crossfilter.js group to pass as an argument as this will work for you.

Create working Environment

To create working environment, first you have write all the HTML necessary for the data table. Write the basic HTML then create a div tag, withing this <div> tag write a <table> tag, assign the ID fro the table. After this connect the necessary libraries to work with dc.js. We here did this by cdn, you do also do it by having these libraries locally in your computer it depends on you. Here is the code.


<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Daata Table</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <h1>Data Table</h1>
        <div>
            <table id="dataTable"  align="center"></table>
        </div>

      </body>
  </html>

Here above We also connect the bootstrap, that will help us to style our data table.

After this take a json data set and put this in our above code. And feed this data to crossfilter.js library. As follow in the code.


<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Daata Table</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <h1>Data Table</h1>
        <div>
            <table id="dataTable"  class="table table-hover" align="center"></table>
        </div>

        <script type="text/javascript">


          var paymentsRecord = [
          {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
          {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
          {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
          {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
          {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
          {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
          {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
        ];

          var facts = crossfilter(paymentsRecord);

          </script>
      </body>
  </html>

Develop Data Table

Here above we've set our working environment now we'll move to our data table. For this we need to create the dimension from crossfilter.js. Here we'll create the date dimension to use the date in our data table. But here is one problem, our data contains the date in string format, we've to convert it from string to date object for this write this code above your crossfilter code.

        paymentsRecord.forEach(function(d){
            //console.log(typeof(d.date)); //check the type before it changes
            var orgDate = new Date(d.date); // changes the string date into origional date type
            d.date = orgDate; // Overwrite the String date with Original date type
            //console.log(typeof(d.date)); //check the type after make change, you can see it converts into date object
        });

Now this will convert the string date into date object, now our date has become reusable. Now create the date dimension For this write the code.

var dateDimension = facts.dimension(function(d){ return d.date; });

As mentioned above dataTable class didn't take the group from corssfilter library. So, we don't to create group from crossfilter.js any more. we directly move to our dataTable class to create the data table. Just create the dataTable class object and set the width and height of the dataTable. Also created the dimesion of the dataTable by just the argument of crossfilter dimension to the .dimension method. Here we also grouped the data by type

var dataTable = dc.dataTable("#table")
      .width(1360)
      .height(300)
      .dimension(dateDimension)
      .group(function(d){ return d.type; })

dataTable class come up with a special method .columns([]) that allow us to get/set columns for our data table. For this write the code. at the end render the table .

        var dataTable = dc.dataTable("#dataTable")
              .width(1360)
              .height(300)
              .dimension(dimensionByDate)
              .group(function(d){ return d.type; })
              .columns([ 'Time',
                        'quantity',
                        'total',
                        'tip',
                        'type',
                   
                    ])
        dc.renderAll();

We also did some CSS stuff make our table nice and clean. Also add this CSS code within <head> tag of your code.


<style>
              td {
            border: 1px solid gainsboro;
          }
          h1{
              text-align: center;
          }
          #dataTable {
              text-align: center;
              width:80%;
          }
      </style>

output:

Here you noticed that our Time columns is blank, this is why because we haven't set time yet for the columns. To add the Time fields we'll make just little modification to our .columns([]) method. This method allow us to specify the fields of the of the columns by just using {label, format}. Just change the .columns([]) with this code.

              .columns([{label:'Time',format: function(d){ return d.date.getHours()+':'+d.date.getMinutes(); }},
                        'quantity',
                        'total',
                        'tip',
                        'type',
                        
                    ])

Output:

The time is appear in the Time fields.

In the out put you can see our data is grouped by type. If you want this type of data table then this is good enough for you. But if you not want a grouped table. Then just add this method method to your code and see the output.

.showGroups(false)

output:

You can see it gives us the simple table instead of grouped table.

You can also change the order by .order() method, .order(d3.descending);

Here is an interesting method of dataTable class .size([]), with help of you can fix the size of the table. The method Get or set the table size which determines the number of rows displayed. Here if you want to reduce record to 7 then .size(7). This will reduce the number of rows to display seven.

You can see it reduce the size of the table to seven rows in the table. This method is good, when you've huge set of record.

You can also sort a particular field in the dataTable class by using .sortBy() method, if you want to sort type field then write this code .sortBy(function(d){ return d.type; })

Demo

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #7 Dive into DC.JS a JavaScript Library - Data Table