a line chart is used to display information as a series of data points connected by straight lines. a data point represents two values, one plotted along the horizontal axis and another along the vertical axis. for example, the popularity of food items can be drawn as a line chart in such a way that the food item is represented along the x-axis and its popularity is represented along the y-axis. this chapter explains about line charts in detail.

line chart methods

before moving on to draw a line chart, we should understand the dc.linechart class and its methods. the dc.linechart uses mixins to get the basic functionality of drawing a chart. the mixins used by dc.linechart are as follows −

dc.stackmixin
dc.coordinategridmixin

the complete class diagram of the dc.linechart is as follows −

the dc.linechart gets all the methods of the above-specified mixins as well as it has its own methods to draw the line chart. they are explained as follows.

dashstyle( [style])

this method is used to set the dash style for a line chart.

dotradius( [radius])

this method is used to get or set the radius (in px) for dots displayed on the data points. it is defined as follows −

chart.dotradius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

interpolate( [i])

this method is used to get or set the interpolator for a line.

renderarea( [area])

this method is used to get or set the render area.

renderdatapoints( [options])

this method is used to render individual dots for each data point.

tension( [tension])

this method is used get or set the tension for the lines drawn. it is in the range from 0 to 1.

xytipson( [xytipson])

this method is used to change the mouse behavior of an individual data point.

draw a line chart

let us draw a line chart in dc. to do this, we need to follow the steps given below −

step 1: define a variable

let us define a variable as shown below −

var chart = dc.linechart('#line');

here, the dc.linechart function is mapped with the container having an id line.

step 2: read the data

read data from the people.csv file −

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

here, if we used the same dataset people.csv, the sample data file will be as follows −

id,name,gender,dob,maritalstatus,creditcardtype
1,damaris,female,1973-02-18,false,visa-electron
2,barbe,female,1969-04-10,true,americanexpress
3,belia,female,1960-04-16,false,maestro
4,leoline,female,1995-01-19,true,bankcard
5,valentine,female,1992-04-16,false,
6,rosanne,female,1985-01-05,true,bankcard
7,shalna,female,1956-11-01,false,jcb
8,mordy,male,1990-03-27,true,china-unionpay

...............
................
................

step 3: create an age dimension

now, create dimension for age as shown below −

var agedimension = mycrossfilter.dimension(function(data) { 
    return ~~((date.now() - new date(data.dob)) / (31557600000)) 
});

here, we assigned the age from the crossfilter data.

the ~~ is a double not bitwise operator. it is used as a faster substitute for the math.floor() function.

now, group it using the reducecount() function, which is defined below −

var agegroup = agedimension.group().reducecount();

step 4: generate a chart

now, generate a line chart using the coding given below −

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushon(false)
   .yaxislabel("count")
   .xaxislabel("age")
   .dimension(agedimension)
   .group(agegroup)
   .on('renderlet', function(chart) {
      chart.selectall('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

here,

chart width is 800 and height is 300.
the d3.scale.linear function is used to construct a new linear scale with the specified domain range [15, 70].
next, we set the brushon value to false.
we assign the y-axis label as count and x-axis label as age.
finally, group the age using agegroup.

step 5: working example

the complete code listing is shown in the following code block. create a web page line.html and add the following changes to it.

<html>
   <head>
      <title>dc.js line chart sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.linechart('#line');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var agedimension = mycrossfilter.dimension(function(data) { 
               return ~~((date.now() - new date(data.dob)) / (31557600000)) 
            });
            var agegroup = agedimension.group().reducecount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushon(false)
               .yaxislabel("count")
               .xaxislabel("age")
               .dimension(agedimension)
               .group(agegroup)
               .on('renderlet', function(chart) {
                  chart.selectall('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

now, request the browser and we will see the following response.

Previous Lesson

Next Lesson