CODEWITHSUNDEEP
dc.jscrossfilter
victor
victor

Reputation: 45

Create 3 lines in dc.seriesChart

How create 3 lines(group1, group2, group3) in dc.seriesChart, in this dashboard - https://jsfiddle.net/gubzh/j15szqhk/24/

var ndx = crossfilter(records);
var all = ndx.groupAll();
//console.log(all);

var priorityDim         = ndx.dimension(function (d) { return d.priority; });
var dateDim             = ndx.dimension(function (d) { return d.timestamp; });
var datePriorityDim     = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});

var priorityGroup       = priorityDim.group();
var numRecordsByDate    = dateDim.group();
var datePriorityGroup   = datePriorityDim.group().reduceCount();

var minDate = dateDim.bottom(1)[0].timestamp;
var maxDate = dateDim.top(1)[0].timestamp;
priorityTimeChart
    .width(400)
    .height(200)
    .chart(function(c) { return new dc.lineChart(c); })
    .x(d3.scaleTime().domain([minDate, maxDate]))
    .brushOn(false)
    .yAxisLabel("Events")
    .xAxisLabel("Date")
    .elasticY(true)
    .dimension(dateDim)
    .group(datePriorityGroup)
    .seriesAccessor(function(d) {return "priority: " + d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];})
    .valueAccessor(function(d) {return +d.value;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
priorityTimeChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
priorityTimeChart.margins().left += 10;

For example - https://dc-js.github.io/dc.js/examples/range-series.html

Thank you in advance.

Upvotes: 1

Views: 50

Answers (1)

Gordon
Gordon

Reputation: 20140

You mostly got it, but it looks like you've sprinkled + everywhere, in an effort to get things to work.

In JavaScript, + before an expression is a simple way to convert it to a number.

You usually only need to do this when pulling data from a CSV file, where all the values will be strings.

However, many of the things you were converting were not numbers. In particular you had

var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});

which should be

var datePriorityDim = ndx.dimension(function (d) { return [d.priority, d.timestamp];});

d.priority is a string, and d.timestamp is a date. I logged the contents of your group with

console.log(datePriorityGroup.all())

and noticed that your keys were coming out as

[NaN, 1581314400000]

Converting the date to a number seems to be harmless, but changing the priority to NaN will cause all the priority groups to be binned together. There were only four results where there should be 12.

With the fix:

working series chart screenshot

Fork of your fiddle.

Upvotes: 1

Related Questions