Gridster with Highcharts, make specific Chart smaller and recalculate

问题

i am building a dashboard with gridster and highcharts. If i resize the window and a widget with a highchart is bigger than the window, i want to resize it to make it smaller and gridster should recalculate the positions of the others. I tried this code to make a widget and its highchart smaller if its bigger than the windows width:

$( ".dashboard > li" ).each(function()
        {
            var chart = $(this).children('div');

//          console.log(' Window: ' + width);
            console.log(chart);
            if(chart.width() > width)
            {
                //alert('hier');
//              $(this).css('width',width + 'px');
                $(this).css('background-color','red');
                chart.width(width);
                chart.highcharts().reflow();
            }
        });

but nothing happens.

If i resize the widgets and its highcharts manually, the main grid is still bigger than the window, because it doesnt recalcualte.

Please help me with that.

Update1: Positioning-Problem

So now i've made it in this way: If the screensize is unter a limit, all widgets get the same size and will be pushed to the first row by setting data-col=1 with jquery. Now a new problem occurs: The pushed widgets are overlapping the others. I guess gridster isnt recalcualting this stuff. How do i force him to recalcualte positions? "avoid_overlapped_widgets: true" isn't working

回答1:

Call window resize function while you change width in gridster. Use highchart calling div's width in percentage. don't use fixed width.

 $(window).resize();

回答2:

You can set width as 100% on chart container (in CSS) or call setSize when you resize chart.

回答3:

Yes its done!!!! :D

SOLUTION:

I am calculation the last row with:

var row = 0;
var lastRow = 0;
$( ".dashboard > li" ).each(function()
            {
                rowe = parseInt($(this).attr('data-row'));
                if(row < rowe)
                {
                    row = rowe;
                    lastElement = $(this);
                }
                lastRow = parseInt($(this).attr('data-row'));
            });

and then I moved my all my widgets to the first column and the last row

if(parseInt($(this).attr('data-col')) > 1)
{
   $(".gridster ul").data('gridster').move_widget($(this), 1, lastRow);
 }

move_widget is a function made here: Move Gridster Widgets programmatically

Thanks for answering

[CLOSED]

来源：https://stackoverflow.com/questions/32656402/gridster-with-highcharts-make-specific-chart-smaller-and-recalculate

标签

Highcharts

responsive-design

gridster