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.
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.
Share Improve this question edited Jun 14, 2016 at 18:06 maackle 2,1342 gold badges15 silver badges27 bronze badges asked Mar 10, 2014 at 4:58 Unknown UserUnknown User 3,6689 gold badges44 silver badges81 bronze badges 2- Can you provide a code sample in a jsfiddle? – Ortomala Lokni Commented Jul 2, 2014 at 20:26
- How can I make a iFrame in fiddle? – Unknown User Commented Jul 4, 2014 at 4:41
2 Answers
Reset to default 22I'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
Given a standard page with an iframe:
<body> <h1>Test</h1> <iframe src="iframe.html" class="iframe"></iframe> </body>
And an iframe with containers and scripts to load the chart:
<body> <h2>inside iframe</h2> <div id="box-test"></div> <div id="pie-chart"></div> <script src="script.js" type="text/javascript"></script> </body>
A call to get the width you need
var width = document.getElementById('box-test').offsetWidth;
Using that width for the initial render
chart
.width(width)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(experimentDimension)
.group(speedArrayGroup)
.elasticY(true)
.elasticX(true);
And finally a function to handle what to do on window resize
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);
};
When you pass null when calling .width() and .height() methods (or not calling them at all) on the dc.js Chart instance, it will use width and height of the anchor element (which can then be styled with some evergreen responsive css classes either from bootstrap or some other responsive css framework ;)).
For more info see: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height