Performance issues with large charts.

[Johnny]

I'm making a (speed/time) line chart that has to support a very large number of items (1 item per second, 3600 items for a one hour view). The chart is taking 10 seconds to render, which is unacceptable for our application.

I've tried to enable scrolling on the X axis and only render part of the chart, but it takes the same amount of time (10+ seconds) to update when scrolling.

I've also tried disabling the view state, which made the HTML go from 2MB to 7KB, but it still takes 10 seconds to render.

Is there some way to filter the items? For instance, the chart does not need to draw all 3600 items for a 500px wide chart. Can I filter the items before I populate the chart? How will zooming and scrolling work?

Using Q1 2009.

<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true">
            <ClientSettings EnableZoom="false" ScrollMode="XOnly" XScale="50" />
            <Series>
                <telerik:ChartSeries DataYColumn="Speed" Type="Line">
                    <Appearance>
                        <LabelAppearance Visible="false">
                        </LabelAppearance>
                    </Appearance>
                </telerik:ChartSeries>
            </Series>
            <Legend Visible="false"></Legend>
            <ChartTitle TextBlock-Text="Title">
            </ChartTitle>
        </telerik:RadChart>
    </ContentTemplate>
</asp:UpdatePanel>
</form>

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("speed", typeof(int));

            Random random = new Random();

            for (int i = 0; i < 3600; i++)
            {
                DataRow row = dt.NewRow();
                row[0] = random.Next(100);
                dt.Rows.Add(row);
            }

            RadChart1.DataSource = dt;
            RadChart1.DataBind();
        }
    }

[Ves]

Hello Tom,

RadChart will have problems with 3600 items on screen. While the product was designed to be easily customizable and feature rich it does not cope well with extremely busy charts. We are continually improving performance as we go but still the bottom line is that the control is targeted for casual situations which do not require a high performance solution. There is a trade off to make between high customization and high performance and we've gone the rich features path.

You can filter the chart items by combining 2,3 or 4 neighbor values in a single ChartSeriesItem, where the YValue property is set to the average of the combined entries. Unfortunately, this will have to be done before sending the data to RadChart as it is not supported natively by the control. This also means, that when zooming, you will not be able to distinguish between all the 3600 values as for the chart they would be only 1800(1200 or 900). There should be no difference in the way scrolling would work with this approach. Please, accept our apologies for the inconvenience caused by this limitation in RadChart.

Greetings,
Ves
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.