KENDO UI Performance Issue

8 posts, 0 answers
  1. Tahir Ahmad
    Tahir Ahmad avatar
    6 posts
    Member since:
    Feb 2010

    Posted 06 Sep 2012 Link to this post

    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;
                }
            }
        
    }





  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 10 Sep 2012 Link to this post

    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!
  3. Tahir Ahmad
    Tahir Ahmad avatar
    6 posts
    Member since:
    Feb 2010

    Posted 10 Sep 2012 Link to this post

    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
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 10 Sep 2012 Link to this post

    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!
  5. Prady
    Prady avatar
    2 posts
    Member since:
    May 2012

    Posted 11 Sep 2012 Link to this post

    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
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 11 Sep 2012 Link to this post

    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!
  7. Prady
    Prady avatar
    2 posts
    Member since:
    May 2012

    Posted 11 Sep 2012 Link to this post

    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
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 11 Sep 2012 Link to this post

    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!
Back to Top