DC.js Stacked Line Chart not working - asp.net-mvc

Question

Is there a more complete tutorial or guide to creating charts with dc.js than what is offered in their documentation? I'm trying to create a simple line chart with 2 stacked levels. I'm making use of the following csv:
I want the WasteDate to be on the x-axis and the WasteData to be on the y-axis. Further I want one layer to be of the WasteFunction Minimisation and the other to be of the WasteFunction Disposal. This should give me something like the following (very roughly):
Now, as I understand it, I need to create a dimension for the x-axis using crossfilter and then a filtered dimension for my 2 stacks.
The dimension for the x-axis will be the dates:
// dimension by month
var Date_dim = ndx.dimension(function (d) {
return d.WasteDate;
});
// Get min/max date for x-axis
var minDate = Date_dim.bottom(1)[0].WasteDate;
var maxDate = Date_dim.top(1)[0].WasteDate;
Then I need to create a dimension for the y-axis, then filter it for each of my stacks?
// WasteType dimension
var WasteFunction_dim = ndx.dimension(function (d) {
return d.WasteFunction;
});
// Minimisation Filter
var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal");
// Disposal Filter
var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation");
Then I should be able to use these to setup the chart:
moveChart
.renderArea(true)
.width(900)
.height(200)
.dimension(Date_dim)
.group(WasteFunction_Minimisation, 'Minimisation')
.stack(WasteFunction_Disposal, 'Disposal')
.x(d3.time.scale().domain([minDate, maxDate]));
Now, I can't get passed this error on the RenderAll() function:
The full code:
< script type = "text/javascript" >
$(document).ready(function() {
var moveChart = dc.lineChart('#monthly-move-chart');
d3.csv('minimisation-vs-disposal.csv', function(data) {
/* format the csv file a bit */
var dateFormat = d3.time.format('%d/%M/%Y');
var numberFormat = d3.format('.2f');
data.forEach(function(d) {
d.dd = dateFormat.parse(d.WasteDate);
d.WasteData = +d.WasteData // coerce to number
});
// Cross Filter instance
var ndx = crossfilter(data);
var all = ndx.groupAll();
// dimension by month
var Date_dim = ndx.dimension(function(d) {
return d.WasteDate;
});
// Get min/max date for x-axis
var minDate = Date_dim.bottom(1)[0].WasteDate;
var maxDate = Date_dim.top(1)[0].WasteDate;
// Waste Data dimension
var WasteData_dim = ndx.dimension(function(d) {
return d.WasteData;
});
// WasteType dimension
var WasteFunction_dim = ndx.dimension(function(d) {
return d.WasteFunction;
});
// Minimisation Filter
var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal");
// Disposal Filter
var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation");
moveChart
.renderArea(true)
.width(900)
.height(200)
.transitionDuration(1000)
.dimension(Date_dim)
.group(WasteFunction_Minimisation, 'Minimisation')
.stack(WasteFunction_Disposal, 'Disposal')
.x(d3.time.scale().domain([minDate, maxDate]));
dc.renderAll();
});
});
< /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="monthly-move-chart">
<strong>Waste minimisation chart</strong>
</div>

Answer 1

It's true, dc.js does not have much documentation. Someone could write a book but it hasn't happened. People mostly rely on examples to get started, and the annotated stock example is a good first read.
The biggest problem in your code is that those are not crossfilter groups. You really need to learn the crossfilter concepts to use dc.js effectively. Crossfilter has very strong documentation, but it's also very dense and you'll have to read it a few times.
Feel free to join us on the dc.js user group if you want to talk it through to get a better understanding. It does take a while to get the idea but it's worth it!