Responsive/Resizing Multiple HtmlCharts

[Fred]

I have multiple charts in a dashboard page.  I've attempted using the Java script example in the demo page (see link below), including the function call in the "ClientEvents -Onload" property of each chart. The script works. However, only one of charts resizes properly. I've also attempted modifying the script by adding a function for each chart but the result is the same.

   

https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/responsive-chart/defaultvb.aspx

Thank you in advance for any help on this issue.

 

[Fred]

Thank you Vessy,

This worked perfectly/

[Vessy]

You are welcome, Fred :)

[Vessy]

Hi Fred,

In order to resize all charts on the page, you will need to keep a reference to each chart object separately and resize them separately after that (otherwise only the last assigned chart will be resized). For example, you can have a similar implementation:

        <script>
            var chart1, chart2, chart3;

            function chartLoad1(sender, args) {
                chart1 = sender.get_kendoWidget(); //store a reference to the Kendo Chart widget, we will use its methods
            }

            function chartLoad2(sender, args) {
                chart2 = sender.get_kendoWidget(); //store a reference to the Kendo Chart widget, we will use its methods
            }

            function chartLoad3(sender, args) {
                chart3 = sender.get_kendoWidget(); //store a reference to the Kendo Chart widget, we will use its methods
            }

            function resizeChart() {
                if (chart1 && chart2 && chart3) {
                    chart1.resize(); 
                    chart2.resize(); 
                    chart3.resize(); 
                }
            }

            //this logic ensures that the chart resizing will happen only once, at most - every 200ms
            //to prevent calling the handler too often if old browsers fire the window.onresize event multiple times
            var TO = false;
            window.onresize = function () {
                if (TO !== false)
                    clearTimeout(TO);
                TO = setTimeout(resizeChart, 200);
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="BarChart" Height="300px" Width="100%">
            <ClientEvents OnLoad="chartLoad1" />
            ...
        </telerik:RadHtmlChart>

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="300px" Width="100%">
            <ClientEvents OnLoad="chartLoad2" />
            ...
        </telerik:RadHtmlChart>

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="300px" Width="100%">
            <ClientEvents OnLoad="chartLoad3" />
            ...
        </telerik:RadHtmlChart>

 

Regards,
Vessy
Progress Telerik