RadHtmlChart performance

[Grzegorz]

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?

[Stamo Gochev]

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

[Stefania]

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

[Stamo Gochev]

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