Dynamically created Chart control causing extended page load

Thread is closed for posting
16 posts, 0 answers
  1. Stephen
    Stephen avatar
    12 posts
    Member since:
    Nov 2008

    Posted 13 Feb 2009 Link to this post

    I'm dynamically creating a radChart in the code-behind.  At the point where controls.add(radChart) is called it causes the page to take between 16 - 18 seconds to load.  I also created a duplicate of this chart in an aspx page [not created dynamically], but the same extended page load was still an issue.  The Telerik version is: Version=2008.3.1314.20.

    Thank you in advance for any help and/or advice.  Here's my C# code:

    private void CreateRadChart(int iSent, int iRcvd)
    {
        // Create a RadChart and assign its datasource, title, and size.
        RadChart radChart = new RadChart();

        radChart.SeriesOrientation = ChartSeriesOrientation.Horizontal;
        radChart.ChartTitle.Appearance.Visible = false;
        radChart.Legend.Appearance.Visible = false;
        radChart.Appearance.Border.Width = 0;
        radChart.Width = Unit.Pixel(650);
        radChart.Height = Unit.Pixel(110);

        // BRONZE User 1-35, SILVER User 36-70, GOLD User 71-99, Platinum User 100+

        ChartMarkedZone mrkdZone = new ChartMarkedZone();
        mrkdZone.ValueStartY = 0;
        mrkdZone.ValueEndY = 35;
        mrkdZone.Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(166, 125, 61);
        radChart.PlotArea.MarkedZones.Add(mrkdZone);

        mrkdZone = new ChartMarkedZone();
        mrkdZone.ValueStartY = 35;
        mrkdZone.ValueEndY = 70;
        mrkdZone.Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(211, 211, 211);
        radChart.PlotArea.MarkedZones.Add(mrkdZone);

        mrkdZone = new ChartMarkedZone();
        mrkdZone.ValueStartY = 70;
        mrkdZone.ValueEndY = 100;
        mrkdZone.Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(207, 181, 59);
        radChart.PlotArea.MarkedZones.Add(mrkdZone);

        mrkdZone = new ChartMarkedZone();
        mrkdZone.ValueStartY = 100;
        mrkdZone.ValueEndY = 125;
        mrkdZone.Appearance.FillStyle.MainColor = System.Drawing.Color.FromArgb(248, 248, 255);
        radChart.PlotArea.MarkedZones.Add(mrkdZone);

        radChart.PlotArea.Appearance.Border.Width = 1;
        radChart.PlotArea.Appearance.Dimensions.Margins.Left = 6;
        radChart.PlotArea.Appearance.Dimensions.Margins.Top = 6;
        radChart.PlotArea.Appearance.Dimensions.Margins.Bottom = 25;
        radChart.PlotArea.Appearance.Dimensions.Margins.Right = 12;

        radChart.PlotArea.XAxis.Appearance.Visible = Telerik.Charting.Styles.ChartAxisVisibility.False;

        radChart.PlotArea.YAxis.AutoScale = false;
        radChart.PlotArea.YAxis.AddRange(0, 125, 5);
        radChart.PlotArea.YAxis.Appearance.MajorGridLines.Color = System.Drawing.Color.Gray;
        radChart.PlotArea.YAxis.Appearance.MinorGridLines.Color = System.Drawing.Color.Gainsboro;

        // Create a ChartSeries and assign its name and chart type
        ChartSeries chartSeries = new ChartSeries();
        chartSeries.Name = "Series1";
        chartSeries.Type = ChartSeriesType.Bar;
        chartSeries.Appearance.TextAppearance.TextProperties.Color = System.Drawing.Color.Black;

        // Create ChartSeriesItem 1 and assign its name, value, and appearance
        ChartSeriesItem seriesItem = new ChartSeriesItem();
        seriesItem.Name = "Rcvd";
        seriesItem.YValue = iRcvd;
        seriesItem.Appearance.Border.Width = 1;
        seriesItem.ActiveRegion.Tooltip = "Recognition awards received";
        seriesItem.Appearance.FillStyle.MainColor = System.Drawing.Color.ForestGreen;
        seriesItem.Appearance.FillStyle.SecondColor = System.Drawing.Color.DarkGreen;
        chartSeries.AddItem(seriesItem);

        // Create ChartSeriesItem 2 and assign its name, value, and appearance
        seriesItem = new ChartSeriesItem();
        seriesItem.Name = "Sent";
        seriesItem.YValue = iSent;
        seriesItem.Appearance.Border.Width = 1;
        seriesItem.ActiveRegion.Tooltip = "Recognition awards sent";
        seriesItem.Appearance.FillStyle.MainColor = System.Drawing.Color.SteelBlue;
        seriesItem.Appearance.FillStyle.SecondColor = System.Drawing.Color.DarkBlue;
        chartSeries.AddItem(seriesItem);

        radChart.Series.Add(chartSeries);

        this.Page.Controls.Add(radChart);
    }

  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 16 Feb 2009 Link to this post

    Hi Stephen,

    Can you post a trace for everyone to see. It may provide some useful insight into the situation.

    Regards,
    Vladimir Milev
  3. Stephen
    Stephen avatar
    12 posts
    Member since:
    Nov 2008

    Posted 16 Feb 2009 Link to this post

    Vladimir, what do you mean by "Post a trace"?
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 17 Feb 2009 Link to this post

    Hi Stephen,

    Check this link: http://msdn.microsoft.com/en-us/library/94c55d08(VS.71).aspx It shows how to enable tracing for a page. After that post the trace result. It provides detailed info on how much time each method took executing.

    Regards,
    Vladimir Milev
  5. Stephen
    Stephen avatar
    12 posts
    Member since:
    Nov 2008

    Posted 17 Feb 2009 Link to this post

    Here's the trace result:

    Trace Information

    Category Message From First(s) From Last(s)
    aspx.page Begin PreInit
    aspx.page End PreInit 0.0283029558237533 0.028303
    aspx.page Begin Init 0.0284236519603456 0.000121
    aspx.page End Init 0.0297030961680982 0.001279
    aspx.page Begin InitComplete 0.029742532929008 0.000039
    aspx.page End InitComplete 0.0297703887753166 0.000028
    aspx.page Begin PreLoad 0.0297937285410991 0.000023
    aspx.page End PreLoad 0.0298326816152488 0.000039
    aspx.page Begin Load 0.0298570138160415 0.000024
    aspx.page End Load 0.0914427337789505 0.061586
    aspx.page Begin LoadComplete 0.0914851954617222 0.000042
    aspx.page End LoadComplete 0.316919426951127 0.225434
    aspx.page Begin PreRender 0.317006495580227 0.000087
    aspx.page End PreRender 0.430065022752253 0.113059
    aspx.page Begin PreRenderComplete 0.43013407467608 0.000069
    aspx.page End PreRenderComplete 0.471726647524462 0.041593
    aspx.page Begin SaveState 0.767297927772785 0.295571
    aspx.page End SaveState 0.838080813639179 0.070783
    aspx.page Begin SaveStateComplete 0.83812826757079 0.000047
    aspx.page End SaveStateComplete 0.838153504491377 0.000025
    aspx.page Begin Render 0.838176736492752 0.000023
    aspx.page End Render 28.3815737334102 27.543397
  6. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 20 Feb 2009 Link to this post

    Hi Stephen,

    It looks like the chart control is causing the slowdown. Are you using shadows or complex gradients in your charts? They look good, but usually produce some performance hits.

    Sincerely yours,
    Vladimir Milev
  7. Stephen
    Stephen avatar
    12 posts
    Member since:
    Nov 2008

    Posted 23 Feb 2009 Link to this post

    Vladimir, I'm not using anything memory taxing in the chart (please refer to code listed at the beginning of this thread).  As a matter of fact I went went and added a stripped out RadChart control to an otherwise blank aspx page:
    <telerik:RadChart ID="RadChart1" runat='server'>
    </telerik:RadChart>
    Still I'm getting a 16 - 18 second page load.  Very strange since the sample charts on your demo's page load instantly.  I tried to research your samples to determine if I've not properly configured something correctly but I'm not seeing a configuration difference between your code and mine.  Too, my Web.config file is configured correctly as far as I can tell.

    Thanks,
    Stephen
  8. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 24 Feb 2009 Link to this post

    Hello Stephen,

    That's extremely strange indeed! Can you get a trial version of some commercial profiling tool such as dotTrace and profile your application to see where the bottleneck is? If you are having trouble you can also send us a runnable copy of your app so we can profile it for you.

    All the best,
    Vladimir Milev
  9. Remo Garropoli
    Remo Garropoli avatar
    8 posts
    Member since:
    May 2007

    Posted 07 Apr 2009 Link to this post

    I have exactly same problem. RadChart cause a bottle neck from "Begin Render" To "End Render". In my case the wait time is much more long because i build series "point to point" dinamically. This is a fragment of my code.

     

    private void BuildSerieForChart(RadChart currChart, DataTable data, ChartSeriesType typeOfSerie,System.Drawing.Color seriesColor,bool anotherAxis)
    {

            ChartSeries createNewSerie = new ChartSeries();
            createNewSerie.Type = typeOfSerie;
            createNewSerie.Appearance.LineSeriesAppearance.Color = seriesColor;

            ChartSeriesItem item = null;
            ChartAxisItem itemChart = null;       

            DateTime currTime;
            int step = data.Rows.Count / 2;
            for(int i=0;i<data.Rows.Count;i++)
            {
                item = new ChartSeriesItem(Convert.ToDouble(data.Rows[i]["Valore"]));
                item.Label.Visible = false;
                currTime = Convert.ToDateTime(data.Rows[i]["DataInizioValore"].ToString());
                string labelAxes = currTime.ToShortDateString() + "\n" + currTime.ToShortTimeString();
                itemChart = new ChartAxisItem(labelAxes);

                if (anotherAxis)
                {
                    currChart.PlotArea.XAxis.Items.Add(itemChart);              
                }

                if (i == 0 || i == data.Rows.Count - 1 || i == step)
                {
                    itemChart.Visible = true;
                }
                else
                {
                    itemChart.Visible = false;
                }

                createNewSerie.AddItem(item);
               
            }

            currChart.Series.Add(createNewSerie);
    }


    This method is used by six RadChart to buid own Serie. So, in my case i have six RadChart in my Page divided by RadTabStreep. The Charts are build all dinamically with same method. My page trace is incredible ! The wait time is in certain cases up to 100,00 sec to End Render. This happen, for example, if data.Rows.cout > 10-15 in the previous code fragment. This is a serious problem. I Hope to solve this problem quickly , otherwise i must change this control.

    Regards. 
  10. Remo Garropoli
    Remo Garropoli avatar
    8 posts
    Member since:
    May 2007

    Posted 07 Apr 2009 Link to this post

    After accurate test with dotTrace Profiler 3.1 i have found the issue and i solved my problem. This is result of my web application profiling :

    Bottle Neck in time : View State Management of Rad Chart and Drawing of Grid Lines.

    So i have set EnableViewState = false of RadChart and [RadChartNameInstance].PlotArea.YAxis.Appearance.MinorGridLines.Visible = false; and now my application is very fast !!!!!
  11. Remo Garropoli
    Remo Garropoli avatar
    8 posts
    Member since:
    May 2007

    Posted 07 Apr 2009 Link to this post

    After accurate test with dotTrace Profiler 3.1 i have found the issue and i solved my problem. This is result of my web application profiling :

    Bottle Neck in time : View State Management of Rad Chart and Drawing of Grid Lines.

    So i have set EnableViewState = false of RadChart and [RadChartNameInstance].PlotArea.YAxis.Appearance.MinorGridLines.Visible = false; and now my application is very fast !!!!! :)
  12. citytech team1
    citytech team1 avatar
    5 posts
    Member since:
    Sep 2009

    Posted 05 Oct 2009 Link to this post

    I am having huge problem regarding Radchart performance.
    I am creating ChartSeries with ChartItem Dynamically.

    My .aspx code is

     <telerik:RadChart ID="rdChart" SkinsOverrideStyles="true" runat="server" Width="800"
                                                                            EnableViewState="false" UseSession="false" DefaultType="pie" Height="800" AutoTextWrap="true"
                                                                            IntelligentLabelsEnabled="true" Visible="false">
                                                                            <PlotArea>
                                                                                <XAxis AutoScale="false">
                                                                                </XAxis>
                                                                                <YAxis AxisMode="Extended">
                                                                                    <Appearance MinorGridLines-Visible="false" />
                                                                                </YAxis>
                                                                                <Appearance>
                                                                                    <Border Visible="false" />
                                                                                </Appearance>
                                                                            </PlotArea>
                                                                        </telerik:RadChart>

    And my .cs Code is

    private void BindChart(RadChart rChart, DataTable dtTable, string Title)
        {
            try
            {
                rChart.ClearSkin();
                rChart.Chart.Series.Clear();
                rChart.ChartTitle.TextBlock.Text = Title;
                rChart.ChartTitle.TextBlock.Appearance.AutoTextWrap = AutoTextWrap.True;
                rChart.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = Color.Black;
                rChart.PlotArea.XAxis.Items.Clear();
                rChart.AutoLayout = true;
                //cSeries.DefaultLabelValue = "#%";
                // rChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.Percent;        

                for (int i = 0; i < dtTable.Rows.Count; i++)
                {
                    DataRow dr = dtTable.Rows[i];

                    rChart.PlotArea.XAxis.AddItem(dr["BrandName"].ToString());

                }

                rChart.PlotArea.XAxis.LayoutMode = ChartAxisLayoutMode.Between;
                int iCol = -1;
                for (int iColumns = 1; iColumns < dtTable.Columns.Count ; iColumns++)
                {
                    iCol++;
                    ghsExcelDataMonthTitle[Title] = Title;
                    ChartSeries cs = new ChartSeries(dtTable.Columns[iColumns].ColumnName);
                    cs.Appearance.Border.Width = 0;
                    cs.Appearance.FillStyle.MainColor = getColorByNumber(iCol);
                    //cs.Appearance.FillStyle.SecondColor = getColorByNumber(iCol);
                    cs.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;


                    foreach (DataRow dr in dtTable.Rows)
                    {
                        ChartSeriesItem chi = new ChartSeriesItem();
                        chi.YValue = Convert.ToDouble(GetDecimalValue(dr[iColumns]));
                        cs.Items.Add(chi);
                    }
                    cs.Type = Telerik.Charting.ChartSeriesType.StackedBar;
                    rChart.Series.Insert(rChart.Series.Count, cs);
                   // if (iColumns == 5) break;
                    // break;
                }
            }
            catch (Exception ex)
            {
            }       
        }

    The Problem is When the Number of Series Greater than 5 it slow down the page. It takes few minuites to complete the request.

    Please suggest as some solution.
    Thanks!
    Citytech


  13. citytech team1
    citytech team1 avatar
    5 posts
    Member since:
    Sep 2009

    Posted 05 Oct 2009 Link to this post

    For more information please see the attach image.
  14. citytech team1
    citytech team1 avatar
    5 posts
    Member since:
    Sep 2009

    Posted 05 Oct 2009 Link to this post

    I have also attaching the profiling result from dotTrace Profiler 3.1
  15. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 06 Oct 2009 Link to this post

    Hello citytech team1,

    Please try disabling the IntelligentLabels feature and try again.

    Regards,
    Vladimir Milev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. citytech team1
    citytech team1 avatar
    5 posts
    Member since:
    Sep 2009

    Posted 06 Oct 2009 Link to this post

    Thanks for help. It is running fast( only takes 5 sec instead of 1127 sec). But the chart is looking very messy as one label overlapping with another. Which is hard to read the values.

    I have got a solution which is running in normal speed but the result is good. It takes 127 sec.

    To do this I have removed the zero values from chart which reduces the corresponding Graphics Path function call.

    Here is My updated code.

    for (int iColumns = 1; iColumns < dtTable.Columns.Count ; iColumns++)
                {
                    for (int iRow = 0; iRow < dtTable.Rows.Count; iRow++)                
                    {
                        DataRow dr = dtTable.Rows[iRow];
                        if (Convert.ToDouble(dr[iColumns]) > 0)
                        {                    
                            ChartSeriesItem chi = new ChartSeriesItem();
                            chi.YValue = Convert.ToDouble(dr[iColumns]);
                            cs.Items.Add(chi);
                        }                  
                    }
    }

    Please suggest us better solution if possible.

    THANKS!

Back to Top