RadHtmlChart performance

4 posts, 0 answers
  1. BrzozAle
    BrzozAle avatar
    9 posts
    Member since:
    May 2007

    Posted 04 Sep 2013 Link to this post

    Hi,
    I`m testing Your chart.
    I need bind large data source (in my solution I must show data for a month, which is more less 3000 items).
    When I try do this, it takes very long time (10 seconds). In addition you draw major grid lines for each item (StepValue doesnt work for XAxis - on XAxis are dates). And It looks bad (look at attachment).

    Is there way to increase performance in chart?
    How set StepValue on XAxis for dates?
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 05 Sep 2013 Link to this post

    Hi Aleksander,

    There are several things you could do in order to speed up the RadHtmlChart's client-side rendering:
    1. Set Transitions to false
    2. Hide the Minor and MajorGridLines for X and Y axis
    3. Hide series' labels
    4. Hide X axis' labels
    I have created a sample page where I have demonstrated the above suggestions and 10 000 data items are rendered fairly quickly (note that the exact rendering speed might vary between different browsers).

    Regarding your question about the Step property - we are working on Step and Skip properties for axis' labels and this feature will be available in our Q3 Beta release.

    Regards,
    Stamo Gochev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefania
    Stefania avatar
    107 posts
    Member since:
    May 2013

    Posted 18 Aug 2014 in reply to Stamo Gochev Link to this post

    Hi Stamo,
    In my scenario I have to load more than 50000 records.
    If you edited your example like this you can see that there are some problem..
    1. Is not possible to load more than 100000 records.
    2. If you changed the records to create (started from 40000) and press the button, every time is slower than before..and at the end you'll see a js error (Stop the script window)

    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="button">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1"  LoadingPanelID="loadPanel"/>
                    <telerik:AjaxUpdatedControl ControlID="numberTxt" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="loadPanel" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div>
        <telerik:RadNumericTextBox ID="numberTxt" Value="1000" runat="server">
        </telerik:RadNumericTextBox>
        <telerik:RadButton ID="RadButton1" runat="server" Text="LOAD" OnClick="ReloadChart_Click">
        </telerik:RadButton>
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="500" Skin="Default">
            <Navigator Visible="true">
                <RangeSelector From="2008/05/01" To="2009/09/01" />
                <SelectionHint Visible="true" DataFormatString="From {0:d} to {1:d}" />
                 
                <XAxis Color="#aaaaaa">
                    <LabelsAppearance>
                        <TextStyle Color="#666666" />
                    </LabelsAppearance>
                </XAxis>
            </Navigator>
            <PlotArea>
             
                <XAxis DataLabelsField="DisneyDate" Type="Date" Name="mainAxis">
                    <MajorGridLines Visible="false"></MajorGridLines>
                    <MinorGridLines Visible="false"></MinorGridLines>
                    <TitleAppearance Text="Date">
                    </TitleAppearance>
                </XAxis>
                <YAxis>
                    <LabelsAppearance DataFormatString="{0:N0}">
                    </LabelsAppearance>
                    <MajorGridLines Visible="true" Color="#efefef" Width="1"></MajorGridLines>
                    <MinorGridLines Visible="false"></MinorGridLines>
                    <TitleAppearance Text="Price">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="The Walt Disney Company (DIS)">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    </form>

    cs
    private static Random randomGenerator = new Random();
           int ITEMS_COUNT = 10;
           const int MAX_VALUE = 100000;
     
           protected void Page_Load(object sender, EventArgs e)
           {
               try
               {
                   if (!Page.IsPostBack)
                       LoadChart();
               }
               catch (Exception ex)
               {
                   throw ex;
               }
           }
     
           private void LoadChart()
           {
               //popolo il chart               
               RadHtmlChart1.PlotArea.Series.Clear();
               RadHtmlChart1.Navigator.Series.Clear();
     
               RadHtmlChart1.PlotArea.XAxis.Items.Clear();
     
               List<PlotInfo> dv = GetData().OrderBy(p => p.DisneyDate).ToList();
               if (dv.Count > 0)
               {
                   RadHtmlChart1.Navigator.RangeSelector.From = Convert.ToDateTime(dv.First().DisneyDate);//[0]["DisneyDate"]);
                   RadHtmlChart1.Navigator.RangeSelector.To = Convert.ToDateTime(dv[ITEMS_COUNT / 5].DisneyDate);//[ITEMS_COUNT/2]["DisneyDate"]);
     
                   //creo le serie
                   RadHtmlChart1.PlotArea.Series.Add(new LineSeries { DataFieldY = "DisneyOpen", Name = "DisneyOpen", LabelsAppearance = { DataFormatString = "{0:N0}" } });
                   RadHtmlChart1.Navigator.Series.Add(new AreaSeries { DataFieldY = "DisneyOpen" });
                   RadHtmlChart1.PlotArea.Series.Add(new LineSeries { DataFieldY = "DisneyClose", Name = "DisneyClose", LabelsAppearance = { DataFormatString = "{0:N0}" } });
                   RadHtmlChart1.Navigator.Series.Add(new AreaSeries { DataFieldY = "DisneyClose"});
               }
     
               RadHtmlChart1.DataSource = dv;
               RadHtmlChart1.DataBind();
           }
     
           public void ReloadChart_Click(object sender, EventArgs e)
           {
               ITEMS_COUNT = (int)numberTxt.Value.Value;
               LoadChart();
           }
     
           public class PlotInfo
           {
               public DateTime DisneyDate { get; set; }
               public decimal DisneyOpen { get; set; }
               public decimal DisneyClose { get; set; }
           }
     
           protected List<PlotInfo> GetData()
           {
               List<PlotInfo> list = new List<PlotInfo>();
               for (int i = 0; i < ITEMS_COUNT; i++)
               {
                   decimal randomValue = 10 + (decimal)randomGenerator.Next(MAX_VALUE);
                   decimal randomValue2 = 13 + (decimal)randomGenerator.Next(MAX_VALUE);
                   decimal randomValue3 = 15 + (decimal)randomGenerator.Next(MAX_VALUE);
                   decimal randomValue4 = 16 + (decimal)randomGenerator.Next(MAX_VALUE);
                   int randomMonth = 1 + randomGenerator.Next(11);
                   int randomDay = 1 + randomGenerator.Next(25);
                   list.Add(new PlotInfo
                   {
                       DisneyDate = new DateTime(2011, randomMonth, randomDay),
                       DisneyOpen = randomValue,
                       DisneyClose = randomValue2
                   });
               }
               return list;
           }

    Maybe some cache problem?

    Thanks
  5. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 21 Aug 2014 Link to this post

    Hello,

    There are certain limitations regarding the performance of HtmlChart - as it is rendered entirely on the client-side, trying to plot a lot of SVG or VML elements might slow down the browser. This is an expected behavior as JS is a scripting language and thus has its specifics.

    Furthermore, displaying so many series items (50 000+) might make the chart very hard to read and analyze. A possible idea for improvement is to split the data in separate charts according to a specified time interval that is applicable in your case.

    Regards,
    Stamo Gochev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top