RadChart Low Renderizing

[Fernando]

Hello,

We are using the control asp net, radchart .

All generated from the code behind , is fully dynamic control .

The code and data extraction is fast , but when rendering the graph takes between 30 sec and 1 min . With LESS than 200 records. And when you start using will have more than 2000 records

**Sql table columns are plotted.**

**Tooltips necessarily be used.**

The shape that is made is:

tipoReporte = Telerik.Charting.ChartSeriesType.Line;
RadChart1.PlotArea.XAxis.Clear();
RadChart1.PlotArea.XAxis.IsZeroBased = false;
RadChart1.PlotArea.YAxis.AxisMode = Telerik.Charting.ChartYAxisMode.Extended;
RadChart1.PlotArea.XAxis.AutoScale = false;
RadChart1.PlotArea.XAxis.AutoShrink = true;
RadChart1.PlotArea.XAxis.AxisLabel.TextBlock.Text = objRep.ColumnasId[0].Text;
RadChart1.PlotArea.XAxis.AxisLabel.Visible = true;
for (int i = 0; i < dataSource.Tables[0].Rows.Count; i++)
{
    RadChart1.PlotArea.XAxis.AddItem(dataSource.Tables[0].Rows[i][0].ToString());
    RadChart1.PlotArea.XAxis[i].TextBlock.Text = dataSource.Tables[0].Rows[i][0].ToString();
    RadChart1.PlotArea.XAxis[i].Visible = false;
}
RadChart1.PlotArea.XAxis.AxisLabel.Visible = false;
RadChart1.Legend.Visible = false;
//If there are columns to graph.
if (objRep.FuncionesId.Length > 0)
{
    #region LineaMaximo
    Telerik.Charting.ChartSeries chartSeries1 = new Telerik.Charting.ChartSeries();
    chartSeries1.Name = "Maximo";

    chartSeries1.Type = tipoReporte;
    chartSeries1.YAxisType = Telerik.Charting.ChartYAxisType.Primary;
    chartSeries1.Appearance.TextAppearance.Visible = false;
    chartSeries1.Appearance.FillStyle.MainColor = System.Drawing.Color.FromName("Black");
    int NoPts = dataSource.Tables[0].Rows.Count;
    for (int y = 0; y < NoPts; y++)
    {
        Telerik.Charting.ChartSeriesItem chartItem;
        chartItem = new Telerik.Charting.ChartSeriesItem(100);
        chartSeries1.AddItem(chartItem);
    }
    chartSeries1.Appearance.PointMark.Dimensions.Width = 5;
    chartSeries1.Appearance.PointMark.Dimensions.Height = 5;
    chartSeries1.Appearance.PointMark.Visible = true;
    RadChart1.Series.Add(chartSeries1);
    #endregion

    #region LineaMinimo
    Telerik.Charting.ChartSeries chartSeries2 = new Telerik.Charting.ChartSeries();
    chartSeries2.Name = "Minimo";

    chartSeries2.Type = tipoReporte;
    chartSeries2.YAxisType = Telerik.Charting.ChartYAxisType.Primary;
    chartSeries2.Appearance.TextAppearance.Visible = false;
    chartSeries2.Appearance.FillStyle.MainColor = System.Drawing.Color.FromName("Black");
    int NoPts2 = dataSource.Tables[0].Rows.Count;
    for (int y = 0; y < NoPts; y++)
    {
        Telerik.Charting.ChartSeriesItem chartItem;
        chartItem = new Telerik.Charting.ChartSeriesItem(-100);
        chartSeries2.AddItem(chartItem);
    }
    chartSeries2.Appearance.PointMark.Dimensions.Width = 5;
    chartSeries2.Appearance.PointMark.Dimensions.Height = 5;
    chartSeries2.Appearance.PointMark.Visible = true;
    RadChart1.Series.Add(chartSeries2);
    #endregion

    #region LineaNeutral
    Telerik.Charting.ChartSeries chartSeries3 = new Telerik.Charting.ChartSeries();
    chartSeries3.Name = "Neutral";

    chartSeries3.Type = tipoReporte;
    chartSeries3.YAxisType = Telerik.Charting.ChartYAxisType.Primary;
    chartSeries3.Appearance.TextAppearance.Visible = false;
    chartSeries3.Appearance.FillStyle.MainColor = System.Drawing.Color.FromName("Black");
    int NoPts3 = dataSource.Tables[0].Rows.Count;
    for (int y = 0; y < NoPts; y++)
    {
        Telerik.Charting.ChartSeriesItem chartItem;
        chartItem = new Telerik.Charting.ChartSeriesItem(0);
        chartSeries3.AddItem(chartItem);
    }
    chartSeries3.Appearance.PointMark.Dimensions.Width = 5;
    chartSeries3.Appearance.PointMark.Dimensions.Height = 5;
    chartSeries3.Appearance.PointMark.FillStyle.FillSettings.HatchStyle = System.Drawing.Drawing2D.HatchStyle.DashedHorizontal;
    chartSeries3.Appearance.PointMark.Visible = true;
    RadChart1.Series.Add(chartSeries3);
    #endregion
}
RadChart1.PlotArea.XAxis.DataLabelsColumn = objRep.ColumnasId[0].Text;
for (int i = 0; i < objRep.FuncionesId.Length; i++)
{
    Telerik.Charting.ChartSeries chartSeries = new Telerik.Charting.ChartSeries();
    chartSeries.Name = objRep.FuncionesId[i].Text;
    chartSeries.Type = tipoReporte;
    chartSeries.YAxisType = Telerik.Charting.ChartYAxisType.Primary;
    chartSeries.Appearance.TextAppearance.Visible = false;
    for (int j = 0; j <= dataSource.Tables[0].Rows.Count - 1; j++)
    {
        Telerik.Charting.ChartSeriesItem chartItem;
        if (dataProrrateo.Tables.Count > 0)
        {
            decimal valueNull = myFunctions.FormatMoneyNull(dataProrrateo.Tables[0].Rows[j][objRep.FuncionesId[i].Text].ToString());
            double value = double.Parse(valueNull.ToString());
            chartItem = new Telerik.Charting.ChartSeriesItem(value, value.ToString());
            chartItem.ActiveRegion.Tooltip = objRep.FuncionesId[i].Text + ": " + dataSource.Tables[0].Rows[j][objRep.FuncionesId[i].Text].ToString();
            chartSeries.AddItem(chartItem);
        }
        else
        {
            decimal valueNull = myFunctions.FormatMoneyNull(dataSource.Tables[0].Rows[j][objRep.FuncionesId[i].Text].ToString());
            double value = double.Parse(valueNull.ToString());
            chartItem = new Telerik.Charting.ChartSeriesItem(value, value.ToString());
            chartItem.ActiveRegion.Tooltip = objRep.FuncionesId[i].Text + ": " + dataSource.Tables[0].Rows[j][objRep.FuncionesId[i].Text].ToString();
            chartSeries.AddItem(chartItem);
        }
    }
    chartSeries.Appearance.PointMark.Dimensions.Width = 5;
    chartSeries.Appearance.PointMark.Dimensions.Height = 5;
    chartSeries.Appearance.PointMark.Visible = true;
    RadChart1.Series.Add(chartSeries);
}
RadChart1.PlotArea.YAxis.AxisLabel.TextBlock.Text = " ";
RadChart1.PlotArea.YAxis.AxisLabel.Visible = true;
RadChart1.PlotArea.YAxis.AutoScale = false;
RadChart1.PlotArea.YAxis.MinValue = -120;
RadChart1.PlotArea.YAxis.MaxValue = 120;
RadChart1.PlotArea.YAxis.Step = 20;
RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.Visible = false;
RadChart1.DataBind();

Thanking your attention and support.

Best regards from Mexico!.



Fernando Arreguin.

[Danail Vasilev]

Hi Fernando,

One possible reason for RadChart's slow performance could be its inherent problems with more than 1000 items on screen. RadChart was designed to be easily customizable and feature rich; it does not cope well with extremely busy charts. It mainly targets casual situations which do not require a high performance solution. There is a tradeoff to make between high customization and high performance and we've gone the rich features path as it is what most of our customers are interested in.

Generally we suggest the following performance tips, some of which you have already done:

• Avoid using the AutoTextWrap functionality.
• Avoid gradients and shadows as they add to the overall render time.
• Hide the minor/major gridlines of the axes.
• In case you are displaying series items labels, do not use the intelligent labels functionality. You can also turn off the visibility of the series labels.
• Avoid extremely busy charts (like thousands of items) and if necessary -
  combe several datapoints into a single chart item
• Use our RadAjaxPanel and RadAjaxLoadingPanel to indicate the AJAX request

Perhaps the best solution would be to consider sampling the data first before passing it to the chart control. The RadChart renders the image on the server and then sends it to the client. The time required for the client to receive the image, does not depend on the complexity of the initial data, so it should be more or less the same as the time required to receive a chart image of 5 data points.

You may find interesting Performance problem on line chart forum thread.

You can also try the newer RadHtmlChart control which render entirely on the client as SVG. With RadHtmlChart on the other hand, serialized data is sent to the client that way minimizing the server and network overhead. If you are considering to use the RadHtmlChart for displaying large set of data you can boost its performance by:

• Disabling its animation by setting the Transition property to false.
• Hide major and minor gridlines.
• Hide series' labels

You may also find useful this blog post that sheds more light on the pros and cons of both charts.

Regards,
Danail Vasilev
Telerik

[Fernando]

Thanks Danail,

Add the following lines of code and it has worked perfect so far, made ​​a remarkable dismunición time in rendering:

RadChart1.IntelligentLabelsEnabled = false;
RadChart1.AutoTextWrap = false;

Thanks for everything!