Chart resize on TabStrip tab click

[Richard]

Good afternoon,

I have a yearly dashboard where I have set up a slightly complicated scenario using several MVC Core components.

When you select a year from the dropdown it forces each of the charts/grids to read the data based on the selected year. The 'Yearly Activity' tab is the default tab and works nicely. I have a few pie charts and a bar chart on one tab which are arranged using the TileLayout - this allows them to be resized and dragged. It looks like this:

On the second tab "Monthly Activity by Operator" there is a kendo grid which displays aggregated data based on the selected year. However, when I click on the second tab and change the year in the dropdown, then click back on the first tab, the bar and pie chart have updated correctly data-wise but have not resized correctly in layout - they appear zoomed in:

I've tried making them resize if I click on the 'Yearly Activity' tab:

function tabSelect(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Yearly Activity") {

            kendo.resize($(".k-grid, .k-chart"));

        }

    }

I also have these functions, which are almost exactly as written in the demos:

    $(document).ready(function () {

        kendo.resize($(".k-grid, .k-chart"));

    });

    function onTileResize(e) {

        if (e.container) {

            // for widgets that do not auto resize

            // https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages

            kendo.resize(e.container, true);

            $(document).bind("kendo:skinChange", updateTheme);

        }

    }

 

    function updateTheme() {

        var charts = $(".k-chart");

        $.each(charts, function (i, elem) {

            var theme = kendoTheme;

            if (/(default-|bootstrap-|material-|classic-)/.test(kendoTheme)) {

                theme = "sass";

            }

            $(elem).getKendoChart().setOptions({ theme: theme });

        });

    }

 

    $(window).on("resize", function () {

        kendo.resize($(".k-card-body"));

    });

How can I get the charts to resize themselves correctly, as if I was on the first tab when I changed the year?

Kind regards,

Richard

[Aleksandar]

Hi Richard,

The logic for resizing the charts and the grid seems correct. One thing though that I am uncertain of, is when you execute it. By the name of the function tabSelect I assume this will be the Select event handler for the TabStrip, is that correct? If that is the case note that the Select event is fired before a tab is selected, thus the charts and grid components are still hidden. The Activate event on the other hand is triggered after a tab is being made visible and its animation complete. I can suggest trying to execute the logic on resizing the Grid and the charts in the activate event handler.

Update:

An alternative approach to resizing the Charts is to get a reference to all the charts and force the resizing of each Chart by calling the Chart's resize() method, as documented here.

Regards,
Aleksandar
Progress Telerik

[Richard]

Hi Aleksander,

Many thanks for your reply.

I've tried your suggestion and I'm still getting the zoomed in charts.

    function tabActivate(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Yearly Activity") {

            kendo.resize($(".k-grid, .k-chart"));

        }

    }

To make the charts reset/resize themselves is there something else I should be doing?

 

Kind regards,

 

Richard 

[Aleksandar]

Hi Richard,

If I'm not mistaken you have a TabStrip with a TileLayout in the tabs, and Charts rendered as content of the TileLayout's body templates, is that correct? If so I tested changing the data of the Chart, but failed to observe the reported behavior. Here is a sample REPL, where I tested the behavior. Navigate to the second tab to see the initial data, et back to the first tab and press the button to update the data. The updated chart is rendered as expected on my end. Can you update the example so the behavior is reproducible?

That said, an alternative to the already described resizing method, is to get a reference to the charts and force the resizing of each Chart by calling the Chart's resize() method, as documented here. Let me know if this works for you.

[Richard]

Hi Aleksander,

Many thanks for your reply and for your example which worked. I couldn't see anything particularly different code-wise that would explain why it’s not working for me.

 

I followed your advice to call each chart's resize() method. When the year dropdown is changed, which forces each of the charts to do a data read, I’m now also resizing the charts, which works.

 

    function yearSelected(year) {

        // Set the session value and update the grid and charts

        sessionStorage.setItem("yearValue", year);

        $("#monthlygrid").data("kendoGrid").dataSource.read({ year: year });

        $("#listView").data("kendoListView").dataSource.read({ year: year });

 

        var barchart = $("#barchart").data("kendoChart");

        var newchart = $("#newChart").data("kendoChart");

        var editedchart = $("#editedChart").data("kendoChart");

        var uploadedchart = $("#uploadedChart").data("kendoChart");

 

        barchart.dataSource.read({ year: year });

        newchart.dataSource.read({ year: year });

        editedchart.dataSource.read({ year: year });

        uploadedchart.dataSource.read({ year: year });

 

        barchart.resize(true);

        newchart.resize(true);

        editedchart.resize(true);

        uploadedchart.resize(true);

    }

Kind regards,

 

Richard