Menu
Is there a any way to make the dc.js charts responsive?
I'm struggling a lot to make the charts fit the desktop size.
I'm using Twitter Bootstrap 3. I store the width of the div to a variable and pass it to the chart width. This will not make the chart responsive. But on first load the charts get to the width according to the size of the screen.
But now I face a challenge in it, that I have a different file for the dc.js chart.
And I'm calling through a iframe.
When I call it through iframe the width is 0 for all the divs, and no charts appear in the webpage.
But when I reload the iframe alone, the charts are appearing.
I even tried to load the frame when we click on that particular navigation item. But even that didn't work for me.
Someone help me to overcome this issue.
835
You can make the <svg> responsive by adding a preserveAspectRatio attribute of xMinYMin meet , and a viewbox attribute of 0 0 WIDTH HEIGHT . Where WIDTH and HEIGHT are the width and height of your graph. That's the basic responsive SVG done. The only thing left is to create the graph itself.
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .
Canvas aspect ratio (i.e. width / height , a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. The default value varies by chart type; Radial charts (doughnut, pie, polarArea, radar) default to 1 and others default to 2 .
I've set up a plunker with a dc.js demo that I have rerendering when resized, and getting the width of the container element to determine the size. This is embedded in an iframe and working as-is. I suggest playing with this plunker to fit your css, as I'm just making the simplest possible iframe setup. I'm imagining you did something similar to this, so I"m not exactly sure where you went wrong. Hopefully this helps.
responsive DC chart in an iframe
<body> <h1>Test</h1> <iframe src="iframe.html" class="iframe"></iframe> </body>
<body> <h2>inside iframe</h2> <div id="box-test"></div> <div id="pie-chart"></div> <script src="script.js" type="text/javascript"></script> </body>
var width = document.getElementById('box-test').offsetWidth;
chart
.width(width)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(experimentDimension)
.group(speedArrayGroup)
.elasticY(true)
.elasticX(true);
window.onresize = function(event) {
var newWidth = document.getElementById('box-test').offsetWidth;
chart.width(newWidth)
.transitionDuration(0);
pie.transitionDuration(0);
dc.renderAll();
chart.transitionDuration(750);
pie.transitionDuration(750);
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
