CODEWITHSUNDEEP
d3.jsdc.js
pramod24
pramod24

Reputation: 1116

how to display rowchart in dc.js

I'm making a rowchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. i am displaying rowchart for us population. how to display top 10 counties population in us and top less 10 counties counties of popualtion.Thanx

Upvotes: 0

Views: 869

Answers (1)

Unknown User
Unknown User

Reputation: 3658

Stack Overflow is about helping peoples with what they've tried.

It doesn't encourage spoon feeding.

Here's a list of few website which will you help you through the basic blocks of d3.

Moving onto dc.js. It is a wonderful multi-dimensional charting javascript library.

dc.js - Here's the official website.

Annotated Source - For the charts in the dc.js website.

Code Project - And here's another website where I learned step by step dc.js.

Fiddle - For creating a pie chart using dc.js.

Steps :

You need to load the following libraries and css files - 

d3.js
crossfilter.js
dc.js
dc.css

This code is using the crossfilter js.

var ndx = crossfilter(data);

Here I'm parsing the data.

var parseDate = d3.time.format("%m/%d/%Y").parse;

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
        d.Year=d.date.getFullYear();
});

Here we are creating a dimension for the year and we get the sum of total column.

var yearDim  = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.total;});

And through this block of code we create a pie chart in the div.

var yearRingChart   = dc.pieChart("#chart-ring-year");

yearRingChart
    .width(150).height(150)
    .dimension(yearDim)
    .group(year_total)
    .innerRadius(30);

Finally at the end of all the charts we create, this is the code that renders all the chart to the browser.

dc.renderAll();

To make a row chart just simply change the pie chart to row chart something like this.

var yearRingChart   = dc.rowChart("#chart-ring-year");

And remove the innerRadius property which we do not have for a row chart.

yearRingChart
    .width(150).height(150)
    .dimension(yearDim)
    .group(year_total)

By changing it you'll be having a row chart.

And here's a complete fiddle with a rowChart.

Hope this helps.

Upvotes: 4

Related Questions