Dynamically created Chart control causing extended page load

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);
}

Hi Stephen,

Vladimir, what do you mean by "Post a trace"?

Hi Stephen,

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

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.

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

Hello Stephen,

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.

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 !!!!!

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 !!!!! :)

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

For more information please see the attach image.

I have also attaching the profiling result from dotTrace Profiler 3.1

Hello citytech team1,

Please try disabling the IntelligentLabels feature and try again.

Regards,
Vladimir Milev
the Telerik team

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!