Gridster with Highcharts, make specific Chart smaller and recalculate

Question

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

This was my question to "make a specific chart smaller": http://stackoverflow.com/questions/32630868/highcharts-select-a-single-chart — Mooo, Sep 18 '15 at 16:11

Nishith Kant Chaturvedi · Answer 1 · 2015-09-18T17:10:42.513

0

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();

edited Sep 18 '15 at 17:10

answered Sep 18 '15 at 16:51

Nishith Kant Chaturvedi

4,719
2
16
24

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 – Mooo Sep 21 '15 at 11:39

score 0 · Answer 2 · answered Sep 21 '15 at 08:50

0

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

answered Sep 21 '15 at 08:50

Sebastian Bochan

37,348
3
49
75

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

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]

edited May 23 '17 at 11:44

Community

1
1

answered Sep 23 '15 at 13:12

Mooo

45
1
1
11

OH nooo, he does not do this in Android – Mooo Sep 24 '15 at 09:08
ok Android didn't load the fully javascript. After another try it works – Mooo Sep 24 '15 at 09:11

Gridster with Highcharts, make specific Chart smaller and recalculate

3 Answers3

Linked