This is a migrated thread and some comments may be shown as answers.

Slow rendering of Charts in IE7 / 8

2 Answers 89 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Timothy
Top achievements
Rank 1
Timothy asked on 19 Mar 2013, 01:35 AM
Hello!
I did a quick search but only saw one or two things around this.

The code block at the bottom of this post renders a Kendo Chart with 2 series, each containing 30 data points, and tracks the time taken (in milliseconds) to complete the call to the kendoChart function.

We have a VM running IE7, and another running IE8, for testing purposes. index.html (the code block) resides on my local web server, I remote desktop to a Windows XP VM (on a separate server) which is running either a real copy of IE7, or IE8, and then I browse back to that page on my local web server.

Note that the time shown in milliseconds at the bottom of the page is only tracking the call to kendoChart.

With this page, I've seen times as bad as 10 seconds in true IE7 (not using IE9 browser mode).
IE8 achieves times around 500ms, this is still approximately 5x worse than Firefox or Chrome achieve with great consistency.

IE7 VM, min: ~3000ms, max: ~10000ms, quite inconsistent.
IE8 VM, between ~500 and 600ms consistently
Firefox and Chrome on the VMs, between ~100 and 200ms.
Local machine IE7 & 8, using IE9's Browser Mode setting, ~100 to 150ms.

Are the any recommendations or "best practices" that I've not been able to dig up so far, with regards to Kendo Chart and older IE versions?
Is there anything I can do to improve the render time in IE7 or IE8.

index.html

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css" type="text/css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css" type="text/css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css" type="text/css" />
</head>
<body>
    <div id="chart"></div>
     
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var getTestData = function (numberOfItems) {
            var arrayOfData = [];
            for (var count = 0; count < numberOfItems; count++) {
                arrayOfData.push({"Period":count,"ExPrice":0.3,"CumPrice":0.7})
            }
            return arrayOfData;
        };
         
        var arrayOfChartData = getTestData(30);
 
        var $priceHistoryGraphElement = $("#chart");
 
        var before = new Date();
        $priceHistoryGraphElement.kendoChart({
            theme: $(document).data("kendoSkin") || "default",
            chartArea: { background: "" },
            dataSource: { data: arrayOfChartData },
            seriesDefaults: { type: "line" },
            series: [
                { field: "ExPrice" },
                { field: "CumPrice" }],
            categoryAxis: { field: "Period", labels: { rotation: 285, margin: { left: -15}} }
        });
        var after = new Date();
 
        document.write("kendoChart call took " + Math.abs(after - before) + "ms to complete.");
    </script>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 21 Mar 2013, 07:31 AM
Hi,

The slow and inconsistent performance in old IEs is mostly caused by memory leaks. The two types of leaks that affect the chart are described in this post.

We were able to work around them with good success. The fixes are included in the fresh Q1'2013 release from yesterday. Upgrading to 2013.1.319 will improve performance and memory usage significantly.

Also note that we use VML for older versions of IE. It's not exactly a speed daemon, but it's the only practical option for IE 7 and 8.

Regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Timothy
Top achievements
Rank 1
answered on 22 Mar 2013, 05:23 AM
Great! I'll give this all a shot and see how we go.

Thanks for the info!
Tags
Charts
Asked by
Timothy
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Timothy
Top achievements
Rank 1
Share this question
or