make multiple dc.js charts responsive.

[Aydin Jalilov]

Hello group,

Wondering if it is possible to make responsive multiple charts on dc.js at once. The code below seems working but only when there is one chart. Apply resizing accepts single chart. Please advise if there is better way of making charts responsive that will work for all charts simultaneously. Also I do not use adjust parameters since they don't behave the way I want and there is no reason to pass those parameters. 

Thanks in advance. 

function apply_resizing(chart, adjustX, adjustY, onresize) {
    if (resizeMode.toLowerCase() === 'viewbox') {
        chart
            .width(1000)
            .height(600)
            .useViewBoxResizing(true);
        d3.select(chart.anchor()).classed('fullsize', true);
    } else {
        adjustX = adjustX || 0;
        adjustY = adjustY || adjustX || 0;
        chart
            .width(window.innerWidth - window.innerWidth/2)
//            .height(window.innerHeight - window.innerHeight/2 - adjustY);
        window.onresize = function () {
            if (onresize) {
                onresize(chart);
            }
            chart
                .width(window.innerWidth - window.innerWidth/2)
//                .height(window.innerHeight - window.innerHeight/2 - adjustY);

//            chart.legend(dc.legend().x(window.innerWidth-window.innerWidth/2))

            if (chart.rescale) {
                chart.rescale();
            }
            chart.redraw();
        };
    }
}

[Aydin Jalilov]

I sort of answered my question while forming this question. I solved my issue by just adding all the charts that I want to resize as input parameters of apply_resizing function. It is lots of repetitious code (basically copy pasted everything that I did for pieChart for remaining charts and just replaced the chart name) but does the trick. 

[Gordon Woodhull]

Hi Aydin,

Glad you figured out a solution.

I agree that apply_resizing() could be generalized, so I've changed it to optionally to take an array of charts instead of a single chart, and I've changed the resizing heatmap and resizing scatter examples, which sound like your example, to use the new generalized function (which also allows dividing the window space using functions).

I also apply_resizing() to disable transitions while resizing, as it is usually annoying to have animated transitions when resizing or panning. All the resizing examples are much snappier now.

Cheers,

Gordon

[Gordon Woodhull]

I also wanted to point out that there is a much nicer and more general way to do this in 2020, as long as you are only supporting recent browsers, using ResizeObserver to watch the div size, rather than watching window.onresize:

http://dc-js.github.io/dc.js/resizing/resizing-scatter-flexbox-observer.html

 (Safari was the laggard on this one but it looks like v13 is okay)

[Aydin Jalilov]

Hey Gordon, thanks for the reply. I am mainly working with Chrome but right now I am working with group on a project that will be evaluated by bunch of other people using different OS. I am also using version 3.2.1. I saw ResizeObserver  solution as well but could not implement it. I will try once again. I have another question though but I probably need to create another thread.