Tutorial #14 Dive into DC.JS a JavaScript Library

What Will I Learn?

Develop a Row Chart using dc.js
Methods of rowChart Class

Requirements

Essentials of HTML and CSS
JavaScript intermediate level
Essentials d3.js and crossfilter.js
Knowledge about statistical data

Difficulty

Intermediate

Tutorial Contents

Introduction
Create working Environment
Develop Row Chart

Introduction

Today we are going to develop a row chart using dc.js library. The row chart develop on some given json data.

Create Working Environment

First of all we'll have to develop a working environment to work with dc.js. Open your text editor and create file with name rowChart.html , save it in your working directory.

Now, write the necessary html code to work with html file.

<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Row Chart</title>
    </head>
    <body>
    </body>
</html>

After writing the above code, now its time to link the dc.js library to your file. To do this write this code in your head tag.

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

But dc.js don't works alone, it combined work with crossfilter.js and d3.js. So, we have to link these both files too that we able to work with dc.js. Again write this code in you 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>

Now give a heading to our page and also write a div tag in which we want to show our chart and assign an ID to div. Write this code in body tag.

        <h1>Row Chart By Total</h1>
        <div id="rowChart"></div>

Now at last in order to crate our working environment, write some json format data which will help us to develop the chart. We have some transnational data of a cafe.


        <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"}
        ];


        </script>

Develop Row Chart

Once we set up our working environment, now we'll move toward our chart. First of all feed your json data to crossfilter.js library that we create dimension and grouped our data. For feeding the data to crossfilter write this code.

          var facts = crossfilter(paymentsRecord);

Now its time to create dimension of our data and then grouped it. Here we are going to create a chart of Total Payments by Type. So, we create dimension of type and then we grouped these types on the basis total payments.

          var dimensionByType = facts.dimension(function (d){  return d.total;});
          var groupByTotal = dimensionByTotal.group().reduceCount(function(d){ return d.total; });

Here, we've have done work with our data, now we 'll move toward our chart. dc.jscome up with rowChart class, so we'll create the object of the rowChart class in order to create our Row Chart. And also pass the ID of the div that we created above.

 var rowChart = dc.rowChart('#rowChart')

Then set the width and height of the chart, by using the width([]) and height([]) methods. These both methods take numeric value which is in pixels.

          var rowChart = dc.rowChart('#rowChart')
                    .width(1024) // width of the chart
                    .height(200) // height of the chart

Now pass the dimension and group of the data that we crated above from our crossfilter.js library.

          var rowChart = dc.rowChart('#rowChart')
                    .width(1024) // width of the chart
                    .height(200) // height of the chart
                    .dimension(dimensionByTotal) // dimention we create beforre passed as parameter
                    .group(groupByTotal) // group we created before passed as parameter to barChart method

At the end of this render the chart.

            dc.renderAll();

Output:

You can also increase the gap between the rows, to do this use thee .gap([]) method. By default it is 10.

.gap([20])

We change the gap to 20

You can see gap between the rows increases to 20.

You any row chart for your data, you just have to change the dimension and grouped of the data. If you want to create the row Chart for the tips and payment the change the dimension and group to this .

          var dimension = facts.dimension(function(d){ return [d.total, d.tip]; });
          var group = bubbleDimension.group();

So, here you can more interesting row charts from your data, try by your self.

Source Code:

<!DOCTYPE html>
<html lang="EN">
    <head>
      <meta charset="utf-8">
      <title>Row Chart</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" />
    </head>
    <body>
        <h1>Row Chart By Total</h1>
        <div id="rowChart"></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);

          var dimension = facts.dimension(function(d){ return [d.total, d.tip]; });
          var group = bubbleDimension.group();

          var dimensionByTotal = facts.dimension(function (d){  return d.type;});
          var groupByTotal = dimensionByTotal.group().reduceSum(function(d){ return d.total; });

          var rowChart = dc.rowChart('#rowChart')
                    .width(1024) // width of the chart
                    .height(200) // height of the chart
                    .dimension(dimension) // dimention we create beforre passed as parameter
                    .group(group) // group we created before passed as parameter to barChart method
                    //.gap(20);
            dc.renderAll();

        </script>

    </body>
</html>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #14 Dive into DC.JS a JavaScript Library - Row Chart