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

RadHtmlChart performance

3 Answers 63 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Grzegorz
Top achievements
Rank 1
Grzegorz asked on 04 Sep 2013, 08:15 AM
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?

3 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 05 Sep 2013, 06:16 AM
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.
0
Stefania
Top achievements
Rank 2
answered on 18 Aug 2014, 10:51 AM
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
0
Stamo Gochev
Telerik team
answered on 21 Aug 2014, 06:02 AM
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.

 
Tags
Chart (HTML5)
Asked by
Grzegorz
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Stefania
Top achievements
Rank 2
Share this question
or