- DC.js Tutorial
- DC.js - Home
- DC.js - Introduction
- DC.js - Installation
- DC.js - Concepts
- Introduction to Crossfilter
- Introduction to D3.js
- DC.js - Mixins
- DC.js - baseMixin
- DC.js - capMixin
- DC.js - colorMixin
- DC.js - marginMixin
- DC.js - coordinateGridMixin
- DC.js - Pie Chart
- DC.js - Line Chart
- DC.js - Bar Chart
- DC.js - Composite Chart
- DC.js - Series Chart
- DC.js - Scatter Plot
- DC.js - Bubble Chart
- DC.js - Heat Map
- DC.js - Data Count
- DC.js - Data Table
- DC.js - Data Grid
- DC.js - Legend
- DC.js - Dashboard Working Example
- DC.js Useful Resources
- DC.js - Quick Guide
- DC.js - Useful Resources
- DC.js - Discussion
DC.js - Dashboard Working Example
In this chapter, we will develop a dashboard in DC by clicking and selecting a chart.
Working Example
Now, we have the background and can start to write some code. It contains the following steps −
Step 1: Add styles
Let us add styles in the CSS using the coding given below.
<style> .dc-chart { font-size: 12px; } .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; } .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; } </style>
Here, we have assigned styles for the chart, grid-top and the grid-item.
Step 2: Create a variable
Let us create a variable in DC as shown below.
var barChart = dc.barChart('#line'); var pieChart = dc.pieChart('#pie'); var countChart = dc.dataCount("#mystats"); var gridChart = dc.dataGrid("#mygrid");
Here, we have assigned a barChart variable id in line, countChart id is mystats, pieChart is pie and gridChart id is mygrid.
Step 3: Read the data
Read the data from the people.csv file as shown below.
d3.csv("data/people.csv", function(errors, people) { var mycrossfilter = crossfilter(people); }
If the data is not present, then it returns an error. Now, assign the data to a crossfilter. Here, we have used the same people.csv file, which we have used in our previous charting examples. It looks as shown below.
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 4: Set the dimension for age
You can set the dimension using the coding below.
var ageDimension = mycrossfilter.dimension(function(data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) });
After the dimension has been assigned, group the age using the coding given below.
var ageGroup = ageDimension.group().reduceCount();
Step 5: Set the dimension for gender
You can set the dimension using the coding below.
// gender dimension var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; }); var genderGroup = genderDimension.group().reduceCount();
Step 6: Generate a bar chart
Now, generate a bar chart using the coding below.
barChart .width(400) .height(200) .x(d3.scale.linear().domain([15,70])) .yAxisLabel("Count") .xAxisLabel("Age") .elasticY(true) .elasticX(true) .dimension(ageDimension) .group(ageGroup);
Here,
- We have assigned the chart width as 400 and height as 200.
- Next, we have specified the domain range as [15, 70].
- We have set the x-axis label as age and the y-axis label as count.
- We have specified the elasticY and X function as true.
Step 7: Generate a pie chart
Now, generate a pie chart using the coding below.
pieChart .width(200) .height(100) .dimension(genderDimension) .group(genderGroup);
Here,
- We have assigned the chart width as 200 and height as 100.
- Now, group the dimension by gender.
Step 8: Create the grid and count chart
Now, create the grid and count the chart using the coding given below.
countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); gridChart .dimension(ageDimension) .group(function (data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)); })
Step 9: Render the grid and count
Now, render the grid and count using the coding below.
.size(100) .htmlGroup (function(d) { return 'Age: ' + d.key + '; Count: ' + d.values.length + ' people' }) .html (function(d) { return d.name; }) .sortBy(function (d) { return d.name; }) .order(d3.ascending); barChart.render(); pieChart.render(); countChart.render(); gridChart.render();
Here, we have sorted the name by using the html() function and have finally rendered the chart.
Step 10: Working example
The complete code is as follows. Create a webpage dashboard.html and add the following changes to it.
<html> <head> <title>DC dashboard sample</title> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"> <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/> <style> .dc-chart { font-size: 12px; } .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; } .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; } </style> <script src = "js/d3.js"></script> <script src = "js/crossfilter.js"></script> <script src = "js/dc.js"></script> </head> <body> <div> <div style = "width: 600px;"> <div id = "mystats" class = "dc-data-count" style = "float: right"> <span class = "filter-count"></span> selected out of <span class = "total-count"></span> | <a href = "javascript:dc.filterAll(); dc.renderAll();">Reset All</a> </div> </div> <div style = "clear: both; padding-top: 20px;"> <div> <div id = "line"></div> <div id = "pie"></div> </div> </div> <div style = "clear: both"> <div class = "dc-data-grid" id = "mygrid"></div> </div> </div> <script language = "javascript"> var barChart = dc.barChart('#line'); // , 'myChartGroup'); var pieChart = dc.pieChart('#pie'); //, 'myChartGroup'); var countChart = dc.dataCount("#mystats"); var gridChart = dc.dataGrid("#mygrid"); d3.csv("data/people.csv", function(errors, people) { var mycrossfilter = crossfilter(people); // age dimension var ageDimension = mycrossfilter.dimension(function(data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) }); var ageGroup = ageDimension.group().reduceCount(); // gender dimension var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; }); var genderGroup = genderDimension.group().reduceCount(); barChart .width(400) .height(200) .x(d3.scale.linear().domain([15,70])) .yAxisLabel("Count") .xAxisLabel("Age") .elasticY(true) .elasticX(true) .dimension(ageDimension) .group(ageGroup); pieChart .width(200) .height(100) .dimension(genderDimension) .group(genderGroup); countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); gridChart .dimension(ageDimension) .group(function (data) { return ~~((Date.now() - new Date(data.DOB)) / (31557600000)); }) .size(100) .htmlGroup (function(d) { return 'Age: ' + d.key + '; Count: ' + d.values.length + ' people' }) .html (function(d) { return d.name; }) .sortBy(function (d) { return d.name; }) .order(d3.ascending); barChart.render(); pieChart.render(); countChart.render(); gridChart.render(); }); </script> </body> </html>
Now, request the browser and we will see the following response.
You can check yourself by clicking bar, pie charts and see how the data changes.
To Continue Learning Please Login
Login with Google