Highcharts inside the gridster widgets not resize automatically when I resize the gridster widgets. When I resize the window, highchart are resized based on the grid sizes. But it should happen automatically when I resize the grid.
Code I tried is below :
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>GridSter With HighChart</title>
<link rel="stylesheet" type="text/css" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" type="text/css" href="http://gridster.net/demos/assets/demo.css">
<body>
<div class="controls">
<button class="js-resize-random">Resize random widget</button>
</div>
<div class="gridster ready">
<ul style="height: 520px; width: 550px; position: relative;">
<li class="gs-w" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
<div id="container" style="width:100%;margin: 0 auto"></div>
<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
</ul>
</div>
<script type="text/javascript" src="http://gridster.net/demos/assets/jquery.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
$(function(){
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
$('.js-resize-random').on('click', function() {
gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
getRandomInt(1, 4), getRandomInt(1, 4))
});
});
</script>
<script>
$(function () {
chart = $('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
</body></html>
According to the Highcharts api, automatic reflow only occurs on window.resize events. You'll have to do this explicitly. I'd simply do it in gridster's resize.stop callback:
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true,
stop: function(e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
}
}
}).data('gridster');
Example fiddle here.