Error with .compose using dc.js

Question

I am trying to create a composite of 2 line charts with dc.js. But I get this error everytime: Uncaught TypeError: timeChart.width(...).height(...).x(...).elasticY(...).margins(...).dimension(...).compose is not a function

it is a time series where I want to plot netCommercialPosition and netCommercialPosition as two seperate line. It works when I stack them but not when i want to use .compose.

I have followed several examples such as: Dual Y axis line chart in dc.js http://dc-js.github.io/dc.js/examples/series.html

So hopefully I use the .compose element correctly

my data set is a json with the following structure: [{"CFTC_Commodity_Code": 1, "Net_Commmercial_Position": -113520, "Report_Date_as_MM_DD_YYYY": "14/07/2015", "Net_Fund_Position": -12246, "Price": 583.5, "Net_ Commmercial_Position": 3877, " },{…}]

here is my code:

d3.json("/donorschoose/COT", function (error, dataset1){

var ymdFormat = d3.time.format("%d/%m/%Y");
dataset1.forEach(function(p) {
p.Report_Date_as_MM_DD_YYYY = ymdFormat.parse(p.Report_Date_as_MM_DD_YYYY);
});

var COTProjects = dataset1;
var ndx = crossfilter(COTProjects);
var all = ndx.groupAll();

FilterDimension = ndx.dimension(function (d) {
    return d.CFTC_Commodity_Code;
});


var dateDim = ndx.dimension(function(d) { return d.Report_Date_as_MM_DD_YYYY; });
var Prices = dateDim.group().reduceSum(function(d) {return d.Price; });
var netFundPosition = dateDim.group().reduceSum(function(d) {return   d.Net_Fund_Position; });
var netCommercialPosition = dateDim.group().reduceSum(function(d) {return d.Net_Commmercial_Position; });

var minDate = dateDim.bottom(1)[0]["Report_Date_as_MM_DD_YYYY"];
var maxDate = dateDim.top(1)[0]["Report_Date_as_MM_DD_YYYY"];

var timeChart = dc.lineChart("#time-chart");

actualValuesChart = dc.lineChart(timeChart)
    .group(netFundPosition)


normValuesChart = dc.lineChart(timeChart)
    .group(netCommercialPosition)


timeChart

        .width(650)
        .height(260) 
        .x(d3.time.scale().domain([minDate, maxDate]))
        .elasticY(true)
        .margins({top: 0, right: 5, bottom: 20, left: 40})
        .dimension(dateDim)
        .compose([actualValuesChart,normValuesChart])
        .transitionDuration(500)
        .yAxis().ticks(4);
        .brushOn(false)

FilterDimension.filter(1)       



dc.renderAll();

});

Any help appreciated

thanks in advance

user3434062 user3434062 · Accepted Answer · 2015-09-18T16:19:45

I found the solution, my problem was that I was trying to call compose() from a lineChart object instead of a compositeChart object.

dc.js-s doc

Error with .compose using dc.js

1 Answers