KENDO UI Performance Issue

[Tahir Ahmad]

I am getting following error multiple time while I am generating Line Chart for more than 100 items.

A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive.

ASPX Page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="KendoUIDemo._Default" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo.dataviz.min.js" type="text/javascript"></script>
    <script src="Scripts/console.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">


    <div id="example" class="k-content" >
        <div class="chart-wrapper">
            <div id="chart" >
            </div>
        </div>
    </div>
    Random Data:
    <asp:TextBox ID="txtNo" runat="server" Text="10" />
    <asp:Button runat="server" ID="btnData" Text="Get Data" /><br />
    <asp:TextBox ID="txtSerializeData" runat="server" Text="10" ClientIDMode="Static" />


    <br />
    <input type="button" onclick="createChart();" value="Visualize" />
    <asp:DataGrid ID="gvData" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundColumn DataField="Date" HeaderText="Date" DataFormatString="{0:MM/dd}" />
            <asp:BoundColumn DataField="onCR" HeaderText="onCR" DataFormatString="{0:f2}" />
            <asp:BoundColumn DataField="offCR" HeaderText="offCR" DataFormatString="{0:f2}" />
        </Columns>
    </asp:DataGrid>
    <script type="text/javascript">


        function getArray() {


            return [15.7, 16.7, 20, 23.5, 26.6];


        }


        function getDatafromGrid(grid, columnIndex) {
            var t = "";


            $(grid + " tr:has(td)").each(function () {
                var col = $(this).find("td")
                t = t + $(col[columnIndex]).html() + ", ";
            });




            return t.substring(t.indexOf(",") + 1, t.lastIndexOf(",")).split(",");


        }








        function createChart() {


            var w = getDatafromGrid("#<%= gvData.ClientID %>", 0).length * 40;


            w = (w < $(this).width()) ? $(this).width() : w;
            
            $("#chart").width(w);
            $("#chart").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                dataSource: {
                    data: eval(document.getElementById("txtSerializeData").value)
                        },
                title: {
                    text: "On CR Vs off CR"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "line",
                    stack: false
                },
                series: [{
                    field: "onCR",
                    name: "On CR"
                }, {
                    field: "offCR",
                    name: "Off CR"
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%" 
                    }
                },
                categoryAxis: {
                    field: "Date",
                    rotate:90
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });




        }


 
        // createChart();
        //                $(document).ready(function() {
        //                    setTimeout(function() {
        //                        createChart();
        // 
        //                        $("#example").bind("kendo:skinChange", function(e) {
        //                            createChart();
        //                        });
        //                    }, 400);
        //                });


    </script>
</asp:Content>

//C# Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Script.Serialization;


namespace KendoUIDemo
{
    public class GraphData
    {
        public string Date { get; set; }
        public string onCR { get; set; }
        public string offCR { get; set; }


    }


    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


                FillData();


      


            


        }




        private void FillData() {


            DataTable dt = new DataTable();
            dt.Columns.Add("Date", typeof(DateTime));
            dt.Columns.Add("onCr", typeof(Double));
            dt.Columns.Add("offCr", typeof(Double));


            Random r = new Random();


            int range =10;


            int.TryParse(txtNo.Text, out range);
            List< GraphData> rows = new List<GraphData>();


            for (int i = 1; i < range+1; i++)
            {


                GraphData g = new GraphData{Date = DateTime.Now.AddDays(i).ToString("MM/dd"), offCR = (r.NextDouble() * 100).ToString("0.00"), onCR = (r.NextDouble() * 100).ToString("0.00")};


                DataRow dr = dt.NewRow();


                dr["Date"] = DateTime.Now.AddDays(i).Date;
                dr["onCr"] = g.onCR ;
                dr["offCr"] = g.offCR;
                
                rows.Add(g);


                dt.Rows.Add(dr);
            
            }


            dt.AcceptChanges();


            gvData.DataSource = dt;
            gvData.DataBind();




            
            string jsonString = JsonHelper.JsonSerializer<List<GraphData>>(rows);


            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string jsonData = serializer.Serialize(rows);
            txtSerializeData.Text = jsonData;


        }


    }
}

//Helper Class for Creating JSON Data


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Text;


namespace KendoUIDemo
{




        public class JsonHelper
        {
            /// <summary>
            /// JSON Serialization
            /// </summary>
            public static string JsonSerializer<T>(T t)
            {
                DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
                MemoryStream ms = new MemoryStream();
                ser.WriteObject(ms, t);
                string jsonString = Encoding.UTF8.GetString(ms.ToArray());
                ms.Close();
                return jsonString;
            }
            /// <summary>
            /// JSON Deserialization
            /// </summary>
            public static T JsonDeserialize<T>(string jsonString)
            {
                DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
                MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
                T obj = (T)ser.ReadObject(ms);
                return obj;
            }
        }
    
}

[T. Tsonev]

Hi,

There's a performance regression in the official Q2 release that might lead to such problems.

It's fixed in the internal builds and the fix will be included in the upcoming Service Pack. Please, try updating to the latest internal build to see if this helps.

Apologies for the caused inconvenience.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Tahir Ahmad]

Hi,

Thanks for the feedback. Can you please share the link, so I will be able to download it as "Download" led to me to the version that I already have.

Thanks,

Tahir

[T. Tsonev]

Hello,

The latest internal build can be found in the product download page (Home / Your Account / Your products / Kendo UI DataViz):
http://www.kendoui.com/account/your-products/product-versions/single-download.aspx?pmvid=2883&pid=914 

I hope this helps.

Regards,
Tsvetomir Tsonev
the Telerik team

[Prady]

Hi,
I am getting the same problem as mentioned above. I am using the trial version of kendo ui.
Is that latest build also available for free trail?

Thanks

[T. Tsonev]

Hi,

Internal builds and service packs are available only to licensed users.

If performance is critical for your evaluation you can use the Q1 trial version (attached). It is similar or slightly better in the internal builds.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Prady]

The charts are not getting rendered in a proper way using the Q1 scripts("2012.1.322" version).
The axis values are not getting rendered properly.

PFA for the screen shot.

Thanks

[T. Tsonev]

Hello,

There are differences between the versions, no doubt. Please, use the Q1 trial only as a guideline for performance.

Current Q2 builds and the upcoming Service Pack release perform similarly or better.

Regards,
Tsvetomir Tsonev
the Telerik team