Redraw Kendo UI DataVizChart when device flips

Question

I'm developing a small inhouse app for my company to visualize some business data. For this I'm using Kendo UI mobile with the DataViz widgets. What I recognized now is that the whole application gets adjusted when the device flips (eg from porttrait to landscape mode) but not the DataViz components. I've tried to react to the windows resize event, but that didn't do the trick. As I know you want to see some code, here you go:

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="cordova.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/kendo.dataviz.mobile.min.js"></script>

</head>
<body>
    <div id="home" data-role="view" data-layout="main">
        <ul data-role="listview" data-style="inset" data-type="group">
            <li>
                General Overview
                <ul>
                    <li data-icon="toprated"><a href="#orderentry">Order Entry</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="orderentry" data-role="view" data-layout="sub">
        <ul id="oe-buttongroup">
            <li>Standard</li>
            <li>Ecom</li>
        </ul>
        <div id="oe-chart"></div>
    </div>

    <section data-role="layout" data-id="main">
        <header data-role="header">

            <div data-role="navbar">
                <img src="img/also_holding_2013.png">
                Live
            </div>
        </header>
    </section>

    <section data-role="layout" data-id="sub">
        <!--View content will render here-->
        <!--<footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#home" data-icon="globe">Home</a>        
            </div> 
        </footer>-->
        <header data-role="header">
            <div data-role="tabstrip">
                <a href="#home" data-icon="globe">Home</a>        
            </div> 
        </header>
    </section>

    <script>
        var app = new kendo.mobile.Application(document.body, 
                    {
                        transition:'slide'
                    });    

        var orderentry = new kendo.data.DataSource( {
          data: [
            {
            "category": "Orders",
            "value": 5898
            }, {
            "category": "Positions",
            "value": 23756
            }, {
            "category": "Customers",
            "value": 2026
            }
          ]
        });

        var oechart = $("#oe-chart").kendoChart({
            title:[{
                text: "Order Entry"
            }],
            series: [{
                field: "value"
            }],
            categoryAxis: {
                field: "category"
            }
        });

        oechart.data("kendoChart").setDataSource(orderentry);
    </script>
</body>
</html>

OnaBai OnaBai · Accepted Answer · 2014-05-22T07:38:00

You can use chart.redraw for triggering a redraw whenever you need it.

oechart.data("kendoChart").redraw();

Redraw Kendo UI DataVizChart when device flips

1 Answers