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?
****************************************************LAYOUT****************************************************************
<%@ 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];
chartimg.style.setAttribute("width", sender.get_width() + "px");
chartimg.style.setAttribute("height", sender.get_height() + "px");
}
</script>
</telerik:RadScriptBlock>
<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>
<asp:Label ID="lblCSFY" runat="server" Text="State Fiscal Year" Height="22px" Font-Size="Small"
Font-Bold="True" BackColor="Transparent"></asp:Label>
<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">
<Tabs>
<telerik:RadTab Text="Provided Graphs" runat="server" Width="225px" Selected="True">
</telerik:RadTab>
<telerik:RadTab Text="User Defined Graphs" runat="server" Width="225px">
</telerik:RadTab>
<telerik:RadTab Text="Upload Graphs" runat="server" Width="225px">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<br />
<br />
<asp:UpdatePanel ID="upnlGraphsSelect" runat="server" Visible="True">
<ContentTemplate>
<asp:Panel ID="pnlGraphsSelect" runat="server" Wrap="false" >
<table style="width: 800px">
<tr>
<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" />
<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" />
<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>
</asp:RadioButtonList>
<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"
Width="101px">
<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" />
</asp:RadioButtonList>
<br />
<br />
<br />
<br />
</td>
<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">
<Items>
<%--<telerik:RadPanelItem Text="Longitudinal Enrollment" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
<%--<telerik:RadPanelItem Text="Longitudinal Dropout" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
<telerik:RadPanelItem Text="Reading Proficiency" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Math Proficiency" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Science Proficiency" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>
<%--<telerik:RadPanelItem Text="Gifted and Talented" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
<%--<telerik:RadPanelItem Text="School Staff" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
<%--<telerik:RadPanelItem Text="Violent Behavior" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
<%--<telerik:RadPanelItem Text="Suspension / Expulsion" runat="server">
<Items>
<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" />
</Items>
</telerik:RadPanelItem>--%>
</Items>
<CollapseAnimation Duration="100" Type="None" />
<ExpandAnimation Duration="100" Type="None" />
</telerik:RadPanelBar>
</td>
<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 />
<strong>
<br />
Current Selections:<br />
<br />
Orientation:</strong>
<asp:Label ID="lblOrientation" runat="server" Text=""></asp:Label><br />
<br />
<strong>
Type:</strong>
<asp:Label ID="lblType" runat="server" ></asp:Label><br />
<br />
<strong>
Format:</strong>
<asp:Label ID="lblFormat" runat="server" Text=""></asp:Label><br />
<br />
<strong>
Grade:</strong>
<asp:Label ID="lblGrade" runat="server" Text=""></asp:Label><br />
<br />
<strong>
Graph:</strong>
<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 />
<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 />
</td>
</tr>
</table>
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Button ID="btnRenderChart" runat="server" Text="Render Graph" CssClass="buttonStyle" Width="300px" />
<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:RadPane>
<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">
<PlotArea>
<XAxis>
<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
<MajorGridLines Color="196, 196, 196" Width="0" />
<TextAppearance TextProperties-Color="89, 89, 89">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
<Appearance Dimensions-Paddings="1px, 1px, 10%, 1px">
</Appearance>
</AxisLabel>
</XAxis>
<YAxis>
<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">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="220, 158, 119">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<Appearance Dimensions-Margins="19%, 90px, 12%, 9%">
<FillStyle MainColor="Transparent" SecondColor="Transparent">
</FillStyle>
<Border Color="WhiteSmoke" />
</Appearance>
</PlotArea>
<Appearance Corners="Round, Round, Round, Round, 7">
<Border Color="212, 221, 222" />
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<cc1:GradientElement Color="243, 253, 255">
</cc1:GradientElement>
<cc1:GradientElement Color="White" Position="0.5">
</cc1:GradientElement>
<cc1:GradientElement Color="243, 253, 255" Position="1">
</cc1:GradientElement>
</ComplexGradient>
</FillSettings>
</FillStyle>
</Appearance>
<ChartTitle>
<Appearance Dimensions-Margins="3%, 10px, 14px, 6%">
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock>
<Appearance TextProperties-Color="86, 88, 89" TextProperties-Font="Verdana, 22px">
</Appearance>
</TextBlock>
</ChartTitle>
<Legend>
<Appearance Dimensions-Margins="1px, 1%, 10%, 1px">
<Border Color="" />
<ItemTextAppearance TextProperties-Color="86, 88, 89">
</ItemTextAppearance>
<ItemMarkerAppearance Figure="Rectangle">
</ItemMarkerAppearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock>
<Appearance Position-AlignedPosition="Top" TextProperties-Color="86, 88, 89">
</Appearance>
</TextBlock>
</Legend>
<Series>
<cc1:ChartSeries Name="Series 1">
</cc1:ChartSeries>
<cc1:ChartSeries Name="Series 2">
</cc1:ChartSeries>
</Series>
</telerik:RadChart>
</telerik:RadPane>
<telerik:RadSplitBar ID="trsBottomSplit" runat="server" BackColor="#f0f8ff"></telerik:RadSplitBar>
<telerik:RadPane ID="BottomPane" runat="server" Height="20px" BackColor="#f0f8ff">
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="trsRightSplit" runat="server" BackColor="#f0f8ff"></telerik:RadSplitBar>
<telerik:RadPane ID="RightPane" runat="server" Width="20px" Scrolling="none" BackColor="#f0f8ff">
</telerik:RadPane>
</telerik:RadSplitter>
</asp:Content>
****************************************************CODE:******************************************************************
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))
Try
'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()
Else
'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
trcRadChart.Series.Clear()
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
trcRadChart.PlotArea.XAxis.Clear()
'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
Else
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
trcRadChart.PlotArea.XAxis.AddItem(CStr(intStateFY))
intStateFY = intStateFY + 1
Next
'these are the yvalues
currentSeries.AddItem(CDbl(rst(1)))
currentSeries.AddItem(CDbl(rst(2)))
currentSeries.AddItem(CDbl(rst(3)))
currentSeries.AddItem(CDbl(rst(4)))
currentSeries.AddItem(CDbl(rst(5)))
'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
Next
rst.Close()
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)
Response.Redirect("ErrorPage.aspx")
End Try
End Sub