System hangs when rendering chart with lots of series

Thread is closed for posting
3 posts, 1 answers
  1. Cindie Tenneson
    Cindie Tenneson avatar
    14 posts
    Member since:
    Dec 2008

    Posted 01 Jul 2009 Link to this post

    I have the following code and it works great when there are just a limited number of series, but when I try to run it for a chart with lots of series it hangs on the function ResizeChart and never renders.  In the following example it's when I try to run by ethnic origin because there are so many races I can have up to 7 series for each of my 5 years. 

    Do you have any suggestions on how I could fix this?

    <%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/MasterPage.master"
        CodeFile="frmProvidedGraphs.aspx.vb" Inherits="frmProvidedGraphs" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="cc1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

            <script type="text/javascript">
                function ResizeChart(sender, args)
                    var chart = $get("<%= trcRadChart.ClientID %>");
                    var chartimg = chart.getElementsByTagName("img")[0];
          "width", sender.get_width() + "px");
          "height", sender.get_height() + "px");

        <asp:TextBox ID="txtUserID" runat="server" Visible="False" Font-Bold="True"></asp:TextBox><asp:Label
            ID="lblLogin" runat="server" Text="Label" Height="22px" Font-Size="Small" Font-Italic="True"></asp:Label>
        &nbsp; &nbsp;
        <asp:Label ID="lblCSFY" runat="server" Text="State Fiscal Year" Height="22px" Font-Size="Small"
            Font-Bold="True" BackColor="Transparent"></asp:Label>&nbsp;
        <asp:Label ID="lblCstateFy"
                runat="server" Text="Label" Height="22px" Font-Size="Small" Font-Italic="True"></asp:Label>
        <br />
        <telerik:RadTabStrip ID="rtsTabStrip" runat="server" SelectedIndex="1" Skin="Web20">
                <telerik:RadTab Text="Provided Graphs" runat="server" Width="225px" Selected="True">
                <telerik:RadTab Text="User Defined Graphs" runat="server" Width="225px">
                <telerik:RadTab Text="Upload Graphs" runat="server" Width="225px">
        &nbsp;&nbsp;<br />
        <br />
      <asp:UpdatePanel ID="upnlGraphsSelect" runat="server" Visible="True">
                <asp:Panel ID="pnlGraphsSelect" runat="server" Wrap="false" > 
        <table style="width: 800px">
                <td style="width: 250px">
                    <asp:Label ID="lblChartOrientation" runat="server" Text="Graph Orientation:" Font-Bold="True" /><br />
                    <br />
                    <asp:RadioButtonList AutoPostBack="true" ID="lstChartOrientation" runat="server"
                        Height="1px" Width="101px">
                        <asp:ListItem Text="Vertical" Value="Vertical" Selected="True" />
                        <asp:ListItem Text="Horizontal" Value="Horizontal" />
                    </asp:RadioButtonList><br />
                    <asp:Label ID="lblChartType" runat="server" Text="Graph Type:" Font-Bold="True" />&nbsp;
                    <asp:DropDownList AutoPostBack="true" ID="cmbChartType" runat="server">
                        <asp:ListItem Text="Normal Bar" Value="Bar" Selected="True" />
                        <asp:ListItem Text="Stacked Bar" Value="StackedBar" />
                        <asp:ListItem Text="Line" Value="Line" />
                        <asp:ListItem Text="Stacked Line" Value="StackedLine" />
                    </asp:DropDownList><br />
                    <br />
                    <asp:Label ID="Label2" runat="server" Text="Data Format:" Font-Bold="True" />&nbsp;
                    <br />
                    <asp:RadioButtonList ID="lstSelectFormat" runat="server" AutoPostBack="True"
    RepeatDirection="Horizontal" >
                                        <asp:ListItem Value="Percent" >Display Percent</asp:ListItem>
                                        <asp:ListItem Value="Count" Selected="True">Display Count</asp:ListItem>

                    <br />
                    <asp:Label ID="lblGradeSelect" runat="server" Text="Select Grade:" Font-Bold="True" /><br />
                    <br />
                    <asp:RadioButtonList AutoPostBack="true" ID="lstGrade" runat="server" Height="1px"
                        <asp:ListItem Text="3rd" Value="3" Selected="True" />
                        <asp:ListItem Text="4th" Value="4" />
                        <asp:ListItem Text="5th" Value="5" />
                        <asp:ListItem Text="6th" Value="6" />
                        <asp:ListItem Text="7th" Value="7" />
                        <asp:ListItem Text="8th" Value="8" />
                        <asp:ListItem Text="9th" Value="9" />
                        <asp:ListItem Text="10th" Value="10" />
                    <br />
                    <br />
                    <br />
                    <br />
                <td style="width: 250px">
                    <asp:Label ID="Label1" runat="server" Text="Select Graph from Panel" Font-Bold="True"
                        Font-Size="10pt"></asp:Label><br />
                    <telerik:RadPanelBar runat="server" ID="trpRadPanelBar" Height="505px" ExpandMode="FullExpandedItem"
                        AllowCollapseAllItems="true" Skin="Outlook">
                            <%--<telerik:RadPanelItem Text="Longitudinal Enrollment" runat="server">
                                    <telerik:RadPanelItem Value="88" Text="School Totals" runat="server" />
                                    <telerik:RadPanelItem Value="1" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="3" Text="All Grades plus Totals" runat="server" />
                                    <telerik:RadPanelItem Value="8" Text="By Ethnic Origin" runat="server" />
                                    <telerik:RadPanelItem Value="5" Text="By Disability" runat="server" />
                                    <telerik:RadPanelItem Value="5" Text="By Disability By Ethnic Orgin" runat="server" />
                                    <telerik:RadPanelItem Value="15" Text="By Gender By Spec Ed" runat="server" />
                            <%--<telerik:RadPanelItem Text="Longitudinal Dropout" runat="server">
                                    <telerik:RadPanelItem Value="16" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="18" Text="By Gender" runat="server" />
                                    <telerik:RadPanelItem Value="19" Text="By Ethinic Orgin" runat="server" />
                                    <telerik:RadPanelItem Value="20" Text="By Special Ed" runat="server" />
                                    <telerik:RadPanelItem Value="13" Text="By Disability" runat="server" />
                            <telerik:RadPanelItem Text="Reading Proficiency" runat="server">
                                    <telerik:RadPanelItem Value="21" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="23" Text="By Free Reduced" runat="server" />
                                    <telerik:RadPanelItem Value="25" Text="By Gender" runat="server" />
                                   <%-- <telerik:RadPanelItem Value="27" Text="By Ethnic Orig" runat="server" />--%>
                                    <telerik:RadPanelItem Value="29" Text="By Special Ed" runat="server" />
                                    <telerik:RadPanelItem Value="30" Text="By Limited English" runat="server" />
                            <telerik:RadPanelItem Text="Math Proficiency" runat="server">
                                    <telerik:RadPanelItem Value="31" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="33" Text="By Free Reduced" runat="server" />
                                    <telerik:RadPanelItem Value="35" Text="By Grade By Gender" runat="server" />
                                   <%-- <telerik:RadPanelItem Value="37" Text="By Grade By Ethnic Orig" runat="server" />--%>
                                    <telerik:RadPanelItem Value="39" Text="By Grade By Special Ed" runat="server" />
                                    <telerik:RadPanelItem Value="40" Text="By Limited English" runat="server" />
                            <telerik:RadPanelItem Text="Science Proficiency" runat="server">
                                    <telerik:RadPanelItem Value="51" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="53" Text="By Free Reduced" runat="server" />
                                    <telerik:RadPanelItem Value="55" Text="By Grade By Gender" runat="server" />
                                   <%-- <telerik:RadPanelItem Value="57" Text="By Grade By Ethnic Orig" runat="server" />--%>
                                    <telerik:RadPanelItem Value="59" Text="By Grade By Special Ed" runat="server" />
                                    <telerik:RadPanelItem Value="60" Text="By Limited English" runat="server" />
                            <%--<telerik:RadPanelItem Text="Gifted and Talented" runat="server">
                                    <telerik:RadPanelItem Value="94" Text="By Grade" runat="server" />
                                    <telerik:RadPanelItem Value="95" Text="By Gender" runat="server" />
                                    <telerik:RadPanelItem Value="96" Text="By Ethnic" runat="server" />
                                    <telerik:RadPanelItem Value="98" Text="Kindergarten Programs" runat="server" />
                            <%--<telerik:RadPanelItem Text="School Staff" runat="server">
                                    <telerik:RadPanelItem Value="114" Text="FTE by Certification" runat="server" />
                                    <telerik:RadPanelItem Value="113" Text="Student Teacher Ration By Year" runat="server" />
                                    <telerik:RadPanelItem Value="111" Text="FTE by Ethnic Group" runat="server" />
                                    <telerik:RadPanelItem Value="112" Text="FTE by Gender" runat="server" />
                            <%--<telerik:RadPanelItem Text="Violent Behavior" runat="server">
                                    <telerik:RadPanelItem Value="87" Text="Violent Behavior Summary" runat="server" />
                                    <telerik:RadPanelItem Value="122" Text="Violent Behavior by Spec Ed" runat="server" />
                                    <telerik:RadPanelItem Value="161" Text="By Ethnic 2008" runat="server" />
                                    <telerik:RadPanelItem Value="162" Text="By Ethnic 2007" runat="server" />
                                    <telerik:RadPanelItem Value="163" Text="By Ethnic 2006" runat="server" />
                                    <telerik:RadPanelItem Value="164" Text="By Ethnic 2005" runat="server" />
                                    <telerik:RadPanelItem Value="165" Text="By Ethnic 2004" runat="server" />
                            <%--<telerik:RadPanelItem Text="Suspension / Expulsion" runat="server">
                                    <telerik:RadPanelItem Value="186" Text="By Ethnic 2008" runat="server" />
                                    <telerik:RadPanelItem Value="187" Text="By Ethnic 2007" runat="server" />
                                    <telerik:RadPanelItem Value="188" Text="By Ethnic 2006" runat="server" />
                                    <telerik:RadPanelItem Value="189" Text="By Ethnic 2005" runat="server" />
                                    <telerik:RadPanelItem Value="190" Text="By Ethnic 2004" runat="server" />
                                    <telerik:RadPanelItem Value="90" Text="By Ethnic" runat="server" />
                                    <telerik:RadPanelItem Value="123" Text="By Spec Ed" runat="server" />
                        <CollapseAnimation Duration="100" Type="None" />
                        <ExpandAnimation Duration="100" Type="None" />
                <td style="width: 300px">
                    <asp:Label ID="lblInstructions" runat="server" Text="Make selections from the choices to the left and click render graph to see the data set. "
                        Font-Bold="True" CssClass="informational"></asp:Label><br />
                    <asp:Label ID="lblErrorMsg" runat="server" CssClass="warning" Font-Bold="True"></asp:Label>
                    <br />
                        <br />
                    Current Selections:<br />
                    <br />
                    <asp:Label ID="lblOrientation" runat="server" Text=""></asp:Label><br />
                    <br />
                    <asp:Label ID="lblType" runat="server" ></asp:Label><br />
                    <br />
                    <asp:Label ID="lblFormat" runat="server" Text=""></asp:Label><br />
                    <br />
                    <asp:Label ID="lblGrade" runat="server" Text=""></asp:Label><br />
                    <br />
                    Graph:</strong> &nbsp;
                    <asp:Label ID="lblGraph" runat="server" Text=""></asp:Label><br />
                    <asp:HiddenField ID="hdnGrade" runat="server" Value="3" />
                    <asp:HiddenField ID="hdnGraphId" runat="server" Value="0" />
                    <asp:HiddenField ID="hdnChartName" runat="server" Value="string.empty" />
                    <br />
                    <br />
                    &nbsp;<strong>For best performance:<br />
                        <br />
                    </strong>JavaScript must be enabled on all browsers<br />
                    <br />
                    Caching on Internet Explorer must be activated<br />
                    <br />
                    Browser scripting on Internet Explorer must be enabled
                    <br />
                    <br />
                    To resize the graph click and drag the bars until the graph is the size and shape
                    you want.<br />
        <br />
        <br />
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <asp:Button ID="btnRenderChart" runat="server" Text="Render Graph" CssClass="buttonStyle" Width="300px" />
        &nbsp; &nbsp;
        <asp:Button ID="btnToggleLegend" runat="server" CssClass="buttonStyle" Text="Toggle Graph Legend On/Off" Width="300px"/><br />
        <br />
        <%-- Graph Region Starts Here--%><telerik:RadSplitter ID="trsVertsplitArea" runat="server" Orientation="Vertical"
            Height="100%" Width="100%" VisibleDuringInit="false">
            <telerik:RadPane ID="LeftPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">
            <telerik:RadSplitBar ID="trsLeftSplit" runat="server" BackColor="#f0f8ff"></telerik:RadSplitBar>
            <telerik:RadPane ID="trpMiddlePane" runat="server" Height="1000px" Width="900px"
                BackColor="#f0f8ff" Scrolling="None">
                <telerik:RadSplitter ID="trsHorizSplitArea" runat="server" Height="100%" Width="100%"
                    Orientation="Horizontal" BackColor="#f0f8ff" VisibleDuringInit="false">
                    <telerik:RadPane ID="trpChartPane" runat="server" Height="100%" Width="100%" Scrolling="none"
                        BackColor="#f0f8ff" OnClientResized="ResizeChart">
                        <telerik:RadChart ID="trcRadChart" runat="server" width="900px" Height="600px">
                                    <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
                                        <MajorGridLines Color="196, 196, 196" Width="0" />
                                        <TextAppearance TextProperties-Color="89, 89, 89">
                                            <Appearance TextProperties-Color="51, 51, 51">
                                        <Appearance Dimensions-Paddings="1px, 1px, 10%, 1px">
                                    <Appearance Color="134, 134, 134" MajorTick-Color="196, 196, 196" MinorTick-Color="196, 196, 196">
                                        <MajorGridLines Color="196, 196, 196" />
                                        <MinorGridLines Color="196, 196, 196" Width="0" />
                                        <TextAppearance TextProperties-Color="89, 89, 89">
                                            <Appearance TextProperties-Color="220, 158, 119">
                                <Appearance Dimensions-Margins="19%, 90px, 12%, 9%">
                                    <FillStyle MainColor="Transparent" SecondColor="Transparent">
                                    <Border Color="WhiteSmoke" />
                            <Appearance Corners="Round, Round, Round, Round, 7">
                                <Border Color="212, 221, 222" />
                                <FillStyle FillType="ComplexGradient">
                                            <cc1:GradientElement Color="243, 253, 255">
                                            <cc1:GradientElement Color="White" Position="0.5">
                                            <cc1:GradientElement Color="243, 253, 255" Position="1">
                                <Appearance Dimensions-Margins="3%, 10px, 14px, 6%">
                                    <FillStyle MainColor="">
                                    <Appearance TextProperties-Color="86, 88, 89" TextProperties-Font="Verdana, 22px">
                                <Appearance Dimensions-Margins="1px, 1%, 10%, 1px">
                                    <Border Color="" />
                                    <ItemTextAppearance TextProperties-Color="86, 88, 89">
                                    <ItemMarkerAppearance Figure="Rectangle">
                                    <FillStyle MainColor="">
                                    <Appearance Position-AlignedPosition="Top" TextProperties-Color="86, 88, 89">
                                <cc1:ChartSeries Name="Series 1">
                                <cc1:ChartSeries Name="Series 2">
                    <telerik:RadSplitBar ID="trsBottomSplit" runat="server" BackColor="#f0f8ff"></telerik:RadSplitBar>
                    <telerik:RadPane ID="BottomPane" runat="server" Height="20px" BackColor="#f0f8ff">
            <telerik:RadSplitBar ID="trsRightSplit" runat="server" BackColor="#f0f8ff"></telerik:RadSplitBar>
            <telerik:RadPane ID="RightPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">




        Protected Sub GetChartData(ByVal intGraphValue As Integer)

            Dim dtGraphData As DataTable
            dtGraphData = New DataTable
            Dim strLoginCode As String
            Dim strLoginPrefix As String
            strLoginCode = Right(CStr(Session("UserID")), 4)
            strLoginPrefix = UCase(Left(CStr(Session("UserId")), 2))
                'The same parameters are used for alll of the selects but the cmd.commandtext
                'is determined by the graph type
                Dim cmd As New SqlCommand
                cmd.Connection = conn
                cmd.Parameters.Add(~parameters are here~)

                If intGraphValue = 21 OrElse intGraphValue = 23 OrElse intGraphValue = 25 OrElse intGraphValue = 27 OrElse intGraphValue = 29 OrElse intGraphValue = 30 Then
                    'Reading Proficiency Select statement
                    cmd.CommandText = ufnProficiencySelect()
                    'all of the other graph types to be added here
                End If

                Dim rst As SqlDataReader
                rst = cmd.ExecuteReader

                'Clear the graph before rendering new one
                Dim currentSeries As ChartSeries = Nothing
                Dim intInnerLoopCount As Integer
                Dim intSeriesCount As Integer = 0

                'loop through data
                While rst.Read()

                    If rst.HasRows Then
                        'define the series
                        currentSeries = trcRadChart.CreateSeries(CStr(rst(0)), Drawing.Color.Empty, Drawing.Color.Empty, ChartSeriesType.Bar)
                        'count how many series there are for when apply graph type and/or percent later on
                        intSeriesCount = intSeriesCount + 1
                        'puts a nice line around the bars for definition
                        currentSeries.Appearance.Border.Color = Drawing.Color.Black
                        'this puts the yvalue as a number above the bar helps readability
                        currentSeries.Appearance.ShowLabels = True
                        'this clears out former x values before render
                        'this enables me to have my own xaxis values
                        trcRadChart.PlotArea.XAxis.AutoScale = False
                        'lets the system fit layout best size (need this so when toggle legend chart expands to fill space)
                        trcRadChart.AutoLayout = True
                        'Makes it so the labels don't overlap or disappear
                        trcRadChart.IntelligentLabelsEnabled = True

                        'changes size of layout based upon selected orientation (horizontal or vertical)
                        If lstChartOrientation.SelectedValue = "Horizontal" Then
                            trcRadChart.Height = 900
                            trcRadChart.Width = 600
                            trcRadChart.Height = 600
                            trcRadChart.Width = 900
                        End If
                        trcRadChart.SeriesOrientation = DirectCast([Enum].Parse(GetType(ChartSeriesOrientation), lstChartOrientation.SelectedValue), ChartSeriesOrientation)

                        'enables the title and series items to wrap if they are long
                        trcRadChart.Legend.Appearance.ItemTextAppearance.AutoTextWrap = Styles.AutoTextWrap.True
                        trcRadChart.ChartTitle.TextBlock.Appearance.AutoTextWrap = Styles.AutoTextWrap.True

                        'this is the FY the system currently uses we subtract because want years to increase from
                        'left to right
                        Dim intStateFY As Integer = CInt(Session("StateFY").ToString) - 4
                        'these sets the custom xaxis labels
                        For intInnerLoopCount = 1 To 5
                            intStateFY = intStateFY + 1

                        'these are the yvalues

                        'causes tooltips to show for each item (amount & series name)
                        currentSeries.Item(0).ActiveRegion.Tooltip = CStr(rst(1)) & " " & CStr(rst(0))
                        currentSeries.Item(1).ActiveRegion.Tooltip = CStr(rst(2)) & " " & CStr(rst(0))
                        currentSeries.Item(2).ActiveRegion.Tooltip = CStr(rst(3)) & " " & CStr(rst(0))
                        currentSeries.Item(3).ActiveRegion.Tooltip = CStr(rst(4)) & " " & CStr(rst(0))
                        currentSeries.Item(4).ActiveRegion.Tooltip = CStr(rst(5)) & " " & CStr(rst(0))
                    End If
                End While

                'now loop through series to set graph type and/or percent values
                For intInnerLoopCount = 0 To intSeriesCount - 1
                    'this takes the count of the number of series and displays each series as the selected type of graph
                    'the count will be exact but since the subscripts start at 0 must subtract 1
                    trcRadChart.Series(intInnerLoopCount).Type = DirectCast([Enum].Parse(GetType(Telerik.Charting.ChartSeriesType), cmbChartType.SelectedValue), Telerik.Charting.ChartSeriesType)

                    'renders as percent or count depending on choice in 1stSelectType
                    Dim s As ChartSeries = trcRadChart.Series.GetSeries(intInnerLoopCount)
                    Select Case lstSelectFormat.SelectedIndex
                        Case 0
                            s.DefaultLabelValue = "#%"
                            Exit Select
                        Case 1
                            s.DefaultLabelValue = "#Y"
                            Exit Select
                    End Select


            Catch ex As Exception
                Session("ErrorMessage") = "Error graph data.  Error: " & ex.Message
                Session("Solution") = "Please contact OPI with this error."
                Session("ErrorSource") = "GetGraphData() " & Right(AppRelativeVirtualPath, Len(AppRelativeVirtualPath) - 2)
            End Try

        End Sub

  2. Answer
    Ves avatar
    2927 posts

    Posted 03 Jul 2009 Link to this post

    Hi Cindie,

    It is true that RadChart would have difficulties rendering large amount of items, but this concerns thousands of items -- is that the case? However, this would cause a delay on the server and it will occur even on initial load. You mentioned that the page hangs in ResizeChart function. This seems like a regular javascript function with the only purpose to resize the chart image. Note, that RadChart is rendered exactly as an image, so this should not be related to the number of items and series in the chart.

    I made a small page, based on your code (I used a dummy datasource with 8 series) and it seems to work fine for me. You can find that page attached. Note, that when the splitter is resized there is no postback and only the image is resized in the browser. Give this page a try and let us know if it works fine for you too and what changes need to be done in order to reproduce the issue.

    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Cindie Tenneson
    Cindie Tenneson avatar
    14 posts
    Member since:
    Dec 2008

    Posted 17 Jul 2009 Link to this post

    You example didn't hang but mine still does.  I've decided to use a drill down chart for the ones with large values.  Thanks
Back to Top