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

KENDO UI Performance Issue

7 Answers 136 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Tahir Ahmad
Top achievements
Rank 1
Tahir Ahmad asked on 06 Sep 2012, 07:38 AM
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;
            }
        }
    
}





7 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 10 Sep 2012, 08:45 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tahir Ahmad
Top achievements
Rank 1
answered on 10 Sep 2012, 08:57 AM
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
0
T. Tsonev
Telerik team
answered on 10 Sep 2012, 02:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Prady
Top achievements
Rank 1
answered on 11 Sep 2012, 08:42 AM
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
0
T. Tsonev
Telerik team
answered on 11 Sep 2012, 11:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Prady
Top achievements
Rank 1
answered on 11 Sep 2012, 11:57 AM
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
0
T. Tsonev
Telerik team
answered on 11 Sep 2012, 12:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Tahir Ahmad
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Tahir Ahmad
Top achievements
Rank 1
Prady
Top achievements
Rank 1
Share this question
or