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

Dynamically created Chart control causing extended page load

15 Answers 414 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 13 Feb 2009, 05:23 PM
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);
}

15 Answers, 1 is accepted

Sort by
0
Vladimir Milev
Telerik team
answered on 16 Feb 2009, 04:44 PM
Hi Stephen,

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

Regards,
Vladimir Milev
0
Stephen
Top achievements
Rank 1
answered on 16 Feb 2009, 06:00 PM
Vladimir, what do you mean by "Post a trace"?
0
Vladimir Milev
Telerik team
answered on 17 Feb 2009, 09:32 AM
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
0
Stephen
Top achievements
Rank 1
answered on 17 Feb 2009, 10:34 AM
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
0
Vladimir Milev
Telerik team
answered on 20 Feb 2009, 08:26 AM
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
0
Stephen
Top achievements
Rank 1
answered on 23 Feb 2009, 08:07 PM
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
0
Vladimir Milev
Telerik team
answered on 24 Feb 2009, 07:41 AM
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
0
Remo Garropoli
Top achievements
Rank 1
answered on 07 Apr 2009, 07:38 AM
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. 
0
Remo Garropoli
Top achievements
Rank 1
answered on 07 Apr 2009, 02:53 PM
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 !!!!!
0
Remo Garropoli
Top achievements
Rank 1
answered on 07 Apr 2009, 02:57 PM
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 !!!!! :)
0
citytech team1
Top achievements
Rank 1
answered on 05 Oct 2009, 09:44 AM
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


0
citytech team1
Top achievements
Rank 1
answered on 05 Oct 2009, 09:52 AM
For more information please see the attach image.
0
citytech team1
Top achievements
Rank 1
answered on 05 Oct 2009, 12:01 PM
I have also attaching the profiling result from dotTrace Profiler 3.1
0
Vladimir Milev
Telerik team
answered on 06 Oct 2009, 06:24 AM
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.
0
citytech team1
Top achievements
Rank 1
answered on 06 Oct 2009, 07:15 AM
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!

Tags
Chart (Obsolete)
Asked by
Stephen
Top achievements
Rank 1
Answers by
Vladimir Milev
Telerik team
Stephen
Top achievements
Rank 1
Remo Garropoli
Top achievements
Rank 1
citytech team1
Top achievements
Rank 1
Share this question
or