CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
KonceptGeek
KonceptGeek

Reputation: 320

Multiline Chart

I'm trying to create a composite multi-line chart using dc.js' composite charts. My data is in the following format:

var indexData = [
    {id: "1", weekNumber: 1, topic:12},
    {id: "2", weekNumber: 7, topic:2},
    {id: "3", weekNumber: 5, topic:7},
]

I'm trying to create the chart, such that on X-Axis I have week number, and on Y-Axis I have frequency of records. I want to have a line for each topic (there are 20 topics, hence 20 lines) showing the number of records for each week that have that topic value.

This is what my code looks like:

var topicTimeChart = dc.compositeChart("#topicsLineChart");

var crossFilterObj = crossfilter(indexData);
var all = crossFilterObj.groupAll();

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return d;});

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});

var topic0 = topicSelection.group().reduceCount(function (d){
        if (d == 0) {
            return d;
        }
    });

topicTimeChart.width(1200)
            .height(300)
            .margins(margin)
            .dimension(dateDimension)
            .transitionDuration(500)
            .elasticY(true)
            .brushOn(false)
            .valueAccessor(function (d) {
                return d.value;
            })
            .title(function(d){return "\nNumber of documents: " + d.key;})
            .x(d3.scale.linear().domain([0, maxWeekNumber]))
            .compose([
                dc.lineChart(topicTimeChart).group(topic0)
            ]);

dc.renderAll();

Currently I was only trying to render the line for topic=0 but it doesn't seem to work. Any idea where I am going wrong?

Upvotes: 1

Views: 196

Answers (2)

Xavier
Xavier

Reputation: 1207

The reduce function should return a number to work as expected out of the box

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return 1;});

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});
var topic0 = topicSelection.group().reduceCount(function (d){return 1;});

and you won't need to define a valueAccessor

Starting with your example an @vlad003 fiddle:

http://jsfiddle.net/onh3bLnq/

Upvotes: 2

avacariu
avacariu

Reputation: 2898

I'm not sure what the issue is with your code specifically (unless there's some variable that was undefined), but I've got it working by getting rid of the .margins and computing the maxWeekNumber using d3.max. I've got it working here: http://jsfiddle.net/28epgqn5/2/

var topicTimeChart = dc.compositeChart("#topicsLineChart");
var maxWeekNumber = d3.max(indexData, function(d) { return d.weekNumber; });
var crossFilterObj = crossfilter(indexData);
var all = crossFilterObj.groupAll();

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return d;});

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});

var topic0 = topicSelection.group().reduceCount(function (d){
        if (d == 0) {
            return d;
        }
    });

topicTimeChart.width(1200)
            .height(300)
            .dimension(dateDimension)
            .transitionDuration(500)
            .elasticY(true)
            .brushOn(false)
            .valueAccessor(function (d) {
                return d.value;
            })
            .title(function(d){return "\nNumber of documents: " + d.key;})
            .x(d3.scale.linear().domain([0, maxWeekNumber]))
            .compose([
                dc.lineChart(topicTimeChart).group(topic0)
            ]);

dc.renderAll();

Upvotes: 2

Related Questions