Why does my .data function work in pieChart but not in lineChart in dc.js?

Question

I want to plot data for a dimension that's not in crossfilter so I'm forced to use .data.

All is fine for a pieChart, but when I switch to a lineChar I get the error p is undefined (Firefox) or Cannot read property y of undefined (Chrome). I tried following the code, but got a little lost in it. Can you tell me where it's going wrong?

<div id="test"></div>
<script>    
    dc.barChart("#test")
        .width(100).height(100)
        .dimension({})
        .group({})
        .x(d3.scale.linear().domain([0,5]))
        .data(function(){
            return [ 
                {key : 0, value : 4},
                {key : 2, value : 14},
                {key : 3, value : 20},
            ];
        });

    dc.renderAll();
</script>

The code works if you do a pieChart, and comment out .x.

Here's a jsfiddle, note that the scripts are loaded from rawgit.com: http://fiddle.jshell.net/fyy5m26r/1/

Answer 1

Sorry, but you aren't going to be able to use .data() with bar or line charts with a reasonable amount of effort, because dc.js uses .data() internally and in this case you would have to call d3.stack yourself in order to create the data it is expecting.

Instead, I suggest you create a "fake group". You can do this inline by using

.group({all: function() { ... }})

instead of

.data(function() {...})

Or, with your example code:

dc.barChart("#test")
    .width(200).height(200)
    .dimension({})
    .x(d3.scale.linear().domain([0,5]))
    .group({all: function(){
        return [ 
            {key : 0, value : 4},
            {key : 2, value : 14},
            {key : 3, value : 20},
        ];
    }});

Fork of your fiddle here: http://fiddle.jshell.net/gordonwoodhull/4Lf8n7pn/8/