Responsive/Resizing Multiple HtmlCharts

1 Answer 22 Views
Chart (HTML5)
Fred
Top achievements
Rank 1
Fred asked on 15 Feb 2022, 03:28 PM

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
Top achievements
Rank 1
commented on 17 Feb 2022, 06:12 PM

Thank you Vessy,

This worked perfectly/

Vessy
Telerik team
commented on 18 Feb 2022, 08:06 AM

You are welcome, Fred :)

1 Answer, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 17 Feb 2022, 05:32 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart (HTML5)
Asked by
Fred
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or