Tutorial #13 Dive into DC.JS a JavaScript Library

What Will I Learn?

Data Table Pagination

Requirements

Essentials of HTML and CSS
Essentials of JavaScript
Using crossfilter.js and d3.js
Knowledge about statistical

Difficulty

Intermediate

Tutorial Contents

Introduction
Create working environment
Develop Data Table pagination

Introduction

Today we are going to develop a pagination of data table in dc.js. For this we'll use the data in csv format. Here for our table we used this csv data. You can use your own data to develop your data table or download and use our data.

Create working environment
First of all, we have to develop a working environment to work with dc.js library. To do this, open your text editor, create the file with name dataTablepagination.html, save it in your working directory. Then write the HTML file necessary code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Table Pagination</title>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>

Now link your file with the dc.js library and other libraries that will help us to work with dc.js, crossfilter.js and d3.js. Here also link the bootstrap library, that will help us to make a nice, clean and user friendly data table. Write this code withing the head tag


    <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">

Now write the code to give heading of your file and code for the div in which you want to show your Data Table and also the table tag for your table. Write this code in body tag.

    <div id="dataTable-div">
      <h1>Data Table Pagination</h1>
      <table id="dataTable" class="table table-hover" align="center" ></table>
    </div>

Here we also assign an ID and table class t our table. Table class is bootstrap class.

We also give some styling to our table. Write this code

    <style>

    #pagination, #dataTable-div{
      width: 100%;
      text-align: center;
      padding: 0 0 5px 0;
    }

    #dataTable {
        text-align: center;
        width:65%;
        ##border: 1px solid black;
    }

    </style>

Develop Data Table pagination

Once we set up our environment to work with dc.js now we'll move to our data table. First we generate a data table then we will do pagination of the chart.

To create the data table chart, create a new object of dataTable class of dc.js. Also create a variable for the crossfilter.js. The object and variable will be declare globally.

    var dataTable = dc.dataTable("#dataTable");
    var facts;

As you know we have the data in csv format, parse this data through d3.js library. This will be done using csv([]) method of d3.js class.

      d3.csv("vc.csv", function(error, data){
               //our data table related code will be written here except pagination 
});

You already know csv([]) returns data in string this creates a problem when there is numeric data in our file. We'll have to do type conversion for our numeric data. You can see in our data, Raised property contains the numerical data. To the type conversion for the data from string to numeric. Write this code to do this.

        data.forEach(function(d){
          d.Raised = +d.Raised;
          // console.log(d.Raised);
        });

Now feed the data to crossfilter.js in order to create dimension and grouped our data.

       facts = crossfilter(data);

Now create this the dimension and grouped the data for our table.

        var dimension = facts.dimension(function(d){ return [d.City, d.Raised]});
        var groupByState = function(d){ return d.State};

Now its time to develop data table from our data. use the object that we create above for the table. Define the width and height of the the table then pass the dimension and group of the data that we create from our crossfilter.sj library.

dataTable
                  .width(1024)
                  .height(250)
                  .dimension(dimension)
                  .group(groupByState)

Now set the columns for the table. Add this code in the above code.

                  .columns(['City', 'Raised'])

We are going to paginate our dataTable this is why we'll set the size of table size to infinity that all the data show on our page. By default the size of the table is 25 rows.

                  .size(Infinity)

Now render our table.

 dc.renderAll();

output:

Now sort out data by states, add the code in the above code.

.sortBy(function(d){ return d.State ; })

We have created our data table, now we'll paginate our table. First write HTML code for the our pagination. Write this code in the body tag under our data table div.

    <div id="pagination">
      Results: <span id="start"></span>-</span> of <span id="totalSize"></span>
      <button id="prev" class="btn" onclick="prev()">Prev</button>
      <button id="next" class="btn" onclick="next()">Next</button>
    </div>

You can see the output at the end of the table.

Here in the above code you can see we also set the method prev() and next(). We'll develop them in our pagination code. Now one thing you should have to notice here, all the code for the pagination will be out of the csv([]) method body.

First create two variables.

          var resultStart = 0; var resultEnd =21;

First variable is for the records from where to start the records to show and 2nd number is the where to end the records on the page.

Now define a method displayResult()that will show the numbers in our HTML pagination code.

          function displayResult() {

            document.getElementById("start").innerHTML = resultStart;
            document.getElementById("end").innerHTML = resultStart + resultEnd-1;

            document.getElementById("totalSize").innerHTML = facts.size();
}

output:

You can see the number of data showing per page out of total records. But here you can see our both buttons are active. We have to disable the button when they reach at the end of the record. For this write the code within.

d3.select('#prev').attr('disabled', resultStart-resultEnd < 0 ? 'true' : null);
d3.select('#next').attr('disabled', resultStart+resultEnd >= facts.size() ? 'true' : null);

You can see our prev and next buttons are disabled because our record reach maximum from both end, not below the zero and not above the total size of the records.

Now its time to slice our page, the number of records show per page. For this write a method updateResult() . Within this method we'll use the beginSlice([]), and endSlice([]) method to slice our table. These method are from dataTable Class. And also call our displayResult method within this method. And call this method in your data table code above the renderAll() method

          function updateResult() {

            dataTable.beginSlice(resultStart);
            dataTable.endSlice(resultStart + resultEnd);
            displayResult();
        }

Now if you see the out put

You can see only our prev button is disabled because our starting record is zero and next button is active because our ending record is 20 which is not the maximum.

Now write the next() and prev() methods to move to and fro in our records.

        function prev() {
          resultStart -= resultEnd;;
          updateResult();
          dataTable.redraw();
        }
        
          function next() {
            resultStart += resultEnd;
            updateResult();
            dataTable.redraw();
        }

redraw() in dc.js to redraw the chart.

output:

Click on next and prev button to move forward and backward in our record.

Source Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Data Table Pagination</title>
    <meta charset="UTF-8">
    <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">

    <style>

    #pagination, #dataTable-div{
      width: 100%;
      text-align: center;
      padding: 0 0 5px 0;
    }

    #dataTable {
        text-align: center;
        width:65%;
        ##border: 1px solid black;
    }

    </style>

  </head>
  <body>

    
    <div id="dataTable-div">
      <h1>Data Table Pagination</h1>
      <table id="dataTable" class="table table-hover" align="center" ></table>
    </div>

    
    <div id="pagination">
      Results: <span id="start"></span>-</span> of <span id="totalSize"></span>
      <button id="prev" class="btn" onclick="prev()">Prev</button>
      <button id="next" class="btn" onclick="next()">Next</button>
    </div>

    <script language="javascript">

    var dataTable = dc.dataTable("#dataTable");
    var facts;

      d3.csv("vc.csv", function(error, data){

        data.forEach(function(d){
          d.Raised = +d.Raised;
          // console.log(d.Raised);
        });

       facts = crossfilter(data);


            var dimension = facts.dimension(function(d){ return [d.City, d.Raised]});
            var groupByState = function(d){ return d.State};

         dataTable
                  .width(1024)
                  .height(250)
                  .dimension(dimension)
                  .group(groupByState)
                  .columns(['City', 'Raised'])
                  .size(Infinity)
                  //.showGroups(false)
                  //.sortBy(function(d){ return d.State ; })

          updateResult()

          dc.renderAll();
  });


          var resultStart = 0; var resultEnd =21;

          function displayResult() {

            document.getElementById("start").innerHTML = resultStart;
            document.getElementById("end").innerHTML = resultStart + resultEnd-1;

            document.getElementById("totalSize").innerHTML = facts.size();


            d3.select('#prev').attr('disabled', resultStart-resultEnd < 0 ? 'true' : null);
            d3.select('#next').attr('disabled', resultStart+resultEnd >= facts.size() ? 'true' : null);
        }

          function updateResult() {

            dataTable.beginSlice(resultStart);
            dataTable.endSlice(resultStart + resultEnd);
            displayResult();
        }

        function prev() {
          resultStart -= resultEnd;;
          updateResult();
          dataTable.redraw();
        }

          function next() {
            resultStart += resultEnd;
            updateResult();
            dataTable.redraw();
        }
    </script>



  </body>
</html>

Curriculum

Tutorial #12 Dive into DC.JS a JavaScript Library - Heat Map Chart

Posted on Utopian.io - Rewarding Open Source Contributors

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

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Introduction

Develop Data Table pagination

Curriculum