Not able to render/plot Composite chart dc.js - d3.js

Question

This is a piece of a code in which I am able to get data correctly.But the issue is i am not able to plot chart.
Please refer this link to find chart image which I am getting
// This is where the composite chart code is starting.
CompositeChart: function (chartConfig, chartManager, meta) {
var data = meta.data;
var panelDetails = this.panelDetails(chartConfig.chartName);
var chart = dc.compositeChart(panelDetails.id);
var yAxisGroup = [];
if (chartConfig.xDomainType == "Date" && !(data[0][meta.header[chartConfig.x]] instanceof Date)) {
var dateFormater = d3.time.format("%Y-%m-%d");
data.forEach(function (d, i) {
d[meta.header[chartConfig.x]] = dateFormater.parse(d[meta.header[chartConfig.x]]);
});
}
var xAxis = chartManager.cf.dimension(function (d) {
var val = d[meta.header[chartConfig.x]];
var result = (chartManager.dimValues[chartConfig.x]) ? chartManager.dimValues[chartConfig.x][val] : val;
return result;
});
yAxisGroup = (chartConfig.y);
var temp = yAxisGroup[0];
var temp1 = yAxisGroup[1];
var yDim1 = xAxis.group().reduceSum(function (d) {
var val = d[meta.header[temp]];
var result = (chartManager.dimValues[temp]) ? chartManager.dimValues[temp][val] : val;
return result;
});
var yDim2 = xAxis.group().reduceSum(function (d) {
var val = d[meta.header[temp1]];
var result = (chartManager.dimValues[temp1]) ? chartManager.dimValues[temp1][val] : val;
return result;
});
chart
.width(panelDetails.width)
.height(panelDetails.height)
.margins({
top: 35,
right: 55,
bottom: 30,
left: 45
})
.renderHorizontalGridLines(true)
.shareColors(true)
.compose([
dc.lineChart(chart)
.dimension(xAxis)
.dashStyle([2, 2])
.group(yDim1),
dc.lineChart(chart)
.dimension(xAxis)
.dashStyle([5, 5])
.group(yDim2)
])
.brushOn(false);
this.addXDomain(chartConfig, meta, chart, xAxis);
chart.render();
this.chartStore[chartConfig.chartName] = chart;
},
When I debug the data is fine. I am able to print it on console.But no luck on Chart
I am sharing data of X-Axis while grouping Y-Axis data. Any Solutions?
Note: Console is showing no error or exception.
Can any body help me find the parent chart? Guess that is the problem but I am not sure I need to pass the parent chat in compose function.
Fiddle Link

Answer 1

It's hard to know for sure, but you might try putting your xaxis on the composite chart rather than each composed chart.
Here is a working chart that I've built:
var actuals = dc.barChart(compositeChart)
.gap(65)
.group(group)
.valueAccessor(function (d) {
return d.value.Actual;
});
var budgets = dc.barChart(compositeChart)
.gap(65)
.group(group)
.valueAccessor(function (d) {
return d.value.Budget;
});
compositeChart
.width(1000)
.height(300)
.margins({top: 20, right: 45, bottom: 40, left: 50})
.dimension(monthDimension)
.group(group)
.elasticY(true)
.x(d3.time.scale().domain(timeExtent))
.xUnits(d3.time.months)
.round(d3.time.month.round)
.renderHorizontalGridLines(true)
.compose([budgets, actuals])
.brushOn(true)
.title(function (d) {
return [
"Engagement: " + d.value.engagement,
"Amount:" + d.value.amount
].join("\n");
})
.renderlet(function (chart) {
chart.selectAll("g._1").attr("transform", "translate(" + 20 + ", 0)");
chart.selectAll("g._0").attr("transform", "translate(" + 1 + ", 0)");
});
Note that the budget and actual charts do not define an x or xUnits method. This is left to the composite chart. Not sure that whether this is required or not, but I imagine you need to define x for the composite chart.