How to draw growth rate line in dc.js barChart?

Question

I have Statewise, sectorwise(Agriculture, Manufacturing, Mining etc.) & yearwise GDP data of India. I have created a dashboard that can be found at India GDP. Now in the barchart I want to draw a line indicating growth rate at each year. I think it can be done by composite chart but I don't know how to calculate dynamic growth rates each time a filter is applied. Can anybody provide a guidance.

Answer 1

You are right that there should be a standard way to do this. The problem is that it doesn't fit into dc.js's way of dealing with data through crossfilter, and there are any number of graphical objects you might want to overlay on a chart.

So, for now we have renderlets.

The idea of using a renderlet is to write a function that drops into lower-level d3 code once the chart has rendered. You might search around for the exact d3 code you want, but here is something which adds a single red line on top of the bars:

.on('renderlet', function(chart) {
    var extra_data = [{x: chart.x().range()[0], y: chart.y()(10)}, 
                      {x: chart.x().range()[1], y: chart.y()(70)}];
    var line = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate('linear');
    var path = chart.select('g.chart-body').selectAll('path.extra').data([extra_data]);
    path.enter().append('path').attr('class', 'extra').attr('stroke', 'red');
    path.attr('d', line);
});

This draws the line from the left side to the right side, from Y value 10 to Y value 70, using the x and y scales to obtain the SVG coordinates.

I created a bar with extra line example.

Hopefully this will get you started!