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>