Dynamic resizing

[nimue]

Hi,

Is it possible to dynamically resize the chart? 

I tried resizing the div that contains it, but while the div resizes the chart is cut.

can you help me?

thank you very much for your support.

Barbara Inzitari

[Baby Palanidurai]

Hi Inzitari, 

Greetings from Syncfusion. 

We have analyzed your query. As of now, we are refreshed the charts on window resize only. If you want to refresh the charts for DIV element resize, you can refresh the chart manually in the resize events. For your reference, we have used jQuery resize for div element. Then we have refreshed the charts in jQuery resize event.  

Please find the below code snippet to achieve this requirement, 

 

<div id="container"> 

    @Html.EJS().Chart("container).Render() 

</div> 

<script> 

    $(function () { 

        $("#container").resizable({ 

            resize: function () { 

                var chart = document.getElementById('container').ej2_instances[0]; 

                chart.refresh(); 

            } 

        }); 

    }); 

</script> 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2MVCSample-1456880663 

If the above doesn’t meet your requirement, kindly revert us by more details about your requirement which will be helpful in furthermore analysis and provide you solution sooner. 

Regards, 

Baby. 

[nimue]

Thanks a lot for the answer.

my problem is that the div should automatically resize when the user opens the side menu. it's possible?

thanks for the support

Barbara Inzitari.

[Baby Palanidurai]

Hi Nimue, 

Thanks for your update.  

We have prepared a sample based on your requirement. In that, we have shown the toggle menu bar by default and we have hide the menu, the div for the chart will get resize. You can refresh the chart there using refresh method. 

Code snippet:  

    $(document).ready(function () { 

        $('#sidebarCollapse').on('click', function () { 

            var chart = document.getElementById('container').ej2_instances[0]; 

            if ($('#sidebar')[0].style.display == 'none') { 

                $('#sidebar').show(); 

            } else { 

                $('#sidebar').hide(); 

            } 

            chart.refresh(); 

        }); 

    }); 

Screenshot: 

With toggle menu: 

 

Hide the toggle menu: 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/chart-togglemenu-1906929697 

If the sample doesn’t meet your requirement, kindly revert us with more details. 

Regards, 

Baby. 

[nimue]

Hi Baby Palanidurai,

first of all thank you very much for the support you provide me.

I tried to use the example in my code and everything is fine as long as I use local data binding

but when I use remote data binding the div that contains the chart resizes itself while the chart is truncated.

in fact in my case the side menu pushes the area of the main content to visualize itself side by side 

and reduces the main content within the width of the screen, the div that contains the chart is resized and the same I would like it to do the chart .

Apart from the refresh there is something else I can do to force the chartto resize itself to the new measures of the div that contains it?

Anyway, thanks again for the support.

Barbara Inzitari

[Baby Palanidurai]

Hi Nimue, 

Thanks for your update.  

We have analyzed your query and we have prepared a sample with using remote data binding. Unfortunately chart resizing is working fine when open the menu also.  

Sample used for testing, can be found from below link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/chartRemoteData1855041198 

Kindly revert us by modify the above sample or replicate your sample with replication steps to replicate the issue which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 

Baby. 

[nimue]

Hi Baby Palanidurai,

thank you for your support,

I finally understood what is wrong with my code and I will modify it in these days.

Barbara Inzitari

[Baby Palanidurai]

Hi Inzitari,

Most welcome. Kindly revert us, if you need further assistance. We are always happy in assisting you.

Regards,
Baby.