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");
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);
};