2dimple.js/d3.js auto size chart when window size changes

Question

I have the following code that draws a chart using dimple.js: http://jsbin.com/zacus/17/ When the browser window is resized (or the jsbin pane is resized) i want the chart to also resize to fit it's table cell parent. As you can see from the example this does not happen. I have attempted writing an event handler to change the width of the chart or to redraw the chart when it's , but to no avail.

window.onresize= function redraw(){
  chart1.setBounds(70, 30, pTd.offsetWidth-150, 300);
  myLegend1.left = chart1.width + 100;
}

Any suggestions on how to accomplish this?

EDIT: Experimenting a bit led me to the following code which seems to solve my problem. Is this the best way to accomplish this?

chart1.svg.attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 600 400");

http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive — Lars Kotthoff, Sep 24 '14 at 08:26

score 4 · Accepted Answer · answered Sep 24 '14 at 13:49

4

I haven't tried it with viewBox so if that's working it sounds a good solution. I do it using setMargins for the proportions of the chart and calling chart.draw on resize. This has the benefit of using dimples sizing logic - for example rotating x axis labels when the chart gets too small.

Here's an example from the website:

// Set up a standard chart
var myChart;
d3.tsv("/data/example_data.tsv", function (data) {
    myChart = new dimple.chart(svg, data);

    // Fix the margins
    myChart.setMargins("60px", "30px", "110px", "70px");

    // Continue to set up a standard chart
    myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
    myChart.addMeasureAxis("y", "Unit Sales");
    myChart.addSeries("Channel", dimple.plot.bar);

    // Set the legend using negative values to set the co-ordinate from the right
    myChart.addLegend("-100px", "30px", "100px", "-70px");
    myChart.draw();
});

// Add a method to draw the chart on resize of the window
window.onresize = function () {
    // As of 1.1.0 the second parameter here allows you to draw
    // without reprocessing data.  This saves a lot on performance
    // when you know the data won't have changed.
    myChart.draw(0, true);
};

Here it is in action

answered Sep 24 '14 at 13:49

John Kiernander

4,904
1
15
29

I tried this solution with the example mentioned: (http://jsbin.com/zacus/17/), but the size of the chart remains the same when i resize the window – mike01010 Sep 24 '14 at 17:20
1

Are you using setBounds? You either need to use setBounds with percentage sizes, or setMargins to have the chart size according to the SVG. – John Kiernander Sep 25 '14 at 14:11
I tried both of those and for the life of me can't figure out why it won't work. i do have my chart in a table with width set to 100%. Wondering if that might have anything to do with it. here is an example: http://jsbin.com/zacus/47/edit?html,js,output – mike01010 Sep 26 '14 at 03:56
1

i think my issue was that i was not using 100% height and width when creating the SVG. Your example made that clear. Thanks! dimple.newSvg("#chartContainer", "100%", "100%"); – mike01010 Sep 26 '14 at 04:05
dimple.newSvg("#chartContainer", "100%", "100%"); AND myChart.draw(0, true); work together. Thanks – Andrei Drynov Nov 19 '15 at 21:33
Be careful that `resize` event could be called several times according to browser type – Chemical Programmer Feb 07 '16 at 07:10

2dimple.js/d3.js auto size chart when window size changes

1 Answers1