This is a migrated thread and some comments may be shown as answers.

Event-driven chart, only one of three lines show?

2 Answers 77 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

Sayle asked on 07 Jun 2012, 04:13 PM

I have a web page where I am attempting to use aschycronous service calls to update different series of a line chart to produce three lines. This code works when done schyronously (causes the UI thread to wait, making the app look hung up...), but when hooked up this way my web app is responsive, but I get only one line in my chart, my question is: why? Is it the Ajax panel? Am I doing this the wrong way?

private void fillchart(RadChart chart, int chartSeriesID, List<decimal> dataPoints)

{

// For display of empty grids:

if (dataPoints.Count < 1) { dataPoints.Add(-1.00M); }

double y = 0;

double x = 0;

chart.Series[chartSeriesID].Clear();

foreach (decimal point in dataPoints)

{

y = double.Parse(point.ToString());

ChartSeriesItem item = new ChartSeriesItem(x, y);

item.PointAppearance.Figure = "*"; // Telerik.Charting.Styles.DefaultFigures.Star6; // Appearance.ItemMarkerAppearance.Figure = Telerik.Charting.Styles.DefaultFigures.Diamond;

chart.Series[chartSeriesID].AddItem(item);

x++;

}

#region ChartOriginalTerm:

private void FillChartOriginalTerm(int? loanImportID, int? SellerID)

{

chartOriginalTerm.Series.ClearItems();

chartOriginalTerm.Chart.PlotArea.YAxis.Clear();

chartOriginalTerm.Chart.PlotArea.YAxis.AddRange(0, 100, 10);

chartOriginalTerm.Chart.PlotArea.YAxis.MaxValue = 100;

chartOriginalTerm.Chart.PlotArea.YAxis.MinValue = 0;

chartOriginalTerm.Chart.PlotArea.YAxis.AutoScale = false;

for (int i = 0; i < chartOriginalTerm.Chart.PlotArea.YAxis.Items.Count; i++)

chartOriginalTerm.Chart.PlotArea.YAxis[i].TextBlock.Text = chartOriginalTerm.Chart.PlotArea.YAxis[i].TextBlock.Text + "%";

ws.GetOrigianlTermChartValuesCompleted += new EventHandler<GetOrigianlTermChartValuesCompletedEventArgs>(ws_GetOrigianlTermChartValuesCompleted);

ws.GetOrigianlTermChartValuesAsync(loanImportID, SellerID);

if (loanImportID != null)

{ // Fill second line with Just the selected Import:

ws.GetOrigianlTermChartValuesCompleted += new EventHandler<GetOrigianlTermChartValuesCompletedEventArgs>(ws_GetOrigianlTermChartValuesCompletedLoanImportCompleted);

ws.GetOrigianlTermChartValuesAsync(loanImportID, null);

}

if ((SellerID != null) && (SellerID > 0))

{ // Fill third line with the Seller Company only data

ws.GetOrigianlTermChartValuesCompleted += new EventHandler<GetOrigianlTermChartValuesCompletedEventArgs>(ws_GetOrigianlTermChartValuesCompletedSellerCompleted);

ws.GetOrigianlTermChartValuesAsync(null, SellerID);

}

private void ws_GetOrigianlTermChartValuesCompletedLoanImportCompleted(object sender, GetOrigianlTermChartValuesCompletedEventArgs e)

{

ws.GetOrigianlTermChartValuesCompleted -= ws_GetOrigianlTermChartValuesCompletedLoanImportCompleted;

List<decimal> data1 = e.Result;

fillchart(this.chartOriginalTerm, 1, data1);

chartOriginalTerm.Series[1].Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Red;

chartOriginalTerm.Series[1].Appearance.LineSeriesAppearance.PenStyle = System.Drawing.Drawing2D.DashStyle.Solid;

chartOriginalTerm.Series[1].Appearance.LineSeriesAppearance.Width = 2;

chartOriginalTerm.Series[1].Appearance.LineSeriesAppearance.StartCap = System.Drawing.Drawing2D.LineCap.RoundAnchor;

chartOriginalTerm.Series[1].Appearance.LineSeriesAppearance.EndCap = System.Drawing.Drawing2D.LineCap.RoundAnchor;

}

private void ws_GetOrigianlTermChartValuesCompletedSellerCompleted(object sender, GetOrigianlTermChartValuesCompletedEventArgs e)

{

ws.GetOrigianlTermChartValuesCompleted -= ws_GetOrigianlTermChartValuesCompletedSellerCompleted;

List<decimal> data2 = e.Result;

fillchart(this.chartOriginalTerm, 2, data2);

chartOriginalTerm.Series[2].Appearance.LineSeriesAppearance.Color = System.Drawing.Color.DarkBlue;

chartOriginalTerm.Series[2].Appearance.LineSeriesAppearance.PenStyle = System.Drawing.Drawing2D.DashStyle.Solid;

chartOriginalTerm.Series[2].Appearance.LineSeriesAppearance.Width = 2;

chartOriginalTerm.Series[2].Appearance.LineSeriesAppearance.StartCap = System.Drawing.Drawing2D.LineCap.SquareAnchor;

chartOriginalTerm.Series[2].Appearance.LineSeriesAppearance.EndCap = System.Drawing.Drawing2D.LineCap.SquareAnchor;

}

private void ws_GetOrigianlTermChartValuesCompleted(object sender, GetOrigianlTermChartValuesCompletedEventArgs e)

{

// Fill the first line with ALL the ILS portfolio:

ws.GetOrigianlTermChartValuesCompleted -= ws_GetOrigianlTermChartValuesCompleted;

List<decimal> data0 = e.Result;

fillchart(this.chartOriginalTerm, 0, data0);

chartOriginalTerm.Series[0].Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Black;

chartOriginalTerm.Series[0].Appearance.LineSeriesAppearance.PenStyle = System.Drawing.Drawing2D.DashStyle.Solid;

chartOriginalTerm.Series[0].Appearance.LineSeriesAppearance.Width = 2;

chartOriginalTerm.Series[0].Appearance.LineSeriesAppearance.StartCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;

chartOriginalTerm.Series[0].Appearance.LineSeriesAppearance.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;

}

#endregion

<asp:Content ID="Content3" ContentPlaceHolderID="Column1" runat="server">

<div class="dynamic_box" style="width: 95%; height: 425px;" >

<telerik:RadAjaxPanel ID="RadAjaxPanelColumn1" runat="server" EnableAJAX="true" LoadingPanelID="ajaxLoadingPanel">

<br /><h2>Choose a Loan Pool:<br /></h2>

<telerik:RadComboBox ID="ddlSeller" runat="server" Width="95%" AutoPostBack="True"

OnSelectedIndexChanged="ddlSeller_SelectedIndexChanged" DataTextField="Value"

DataValueField="Key">

</telerik:RadComboBox><br />

<telerik:RadComboBox ID="ddlLoanPackage" runat="server" Width="95%" Height="150px"

AutoPostBack="True" OnSelectedIndexChanged="ddlLoanPackage_SelectedIndexChanged"

Enabled="false" EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true"

OnItemsRequested="ddlLoanPackage_ItemsRequested" ItemsPerRequest="20">

</telerik:RadComboBox>

<br clear="all" />

<div style="height: 90px; width: 100%">

<div style=

"float: left; margin: 0px 10px 0px 10px;  padding: 5px 0pc 0px 0px; text-align: center; font-size: 16px; font-weight: bold;"

>

<asp:ImageButton ID="btnImportName" runat="server" OnClick="btnLoadLoanImport_Click" ImageUrl="~/images/icon_dashboard.png" />

</div>

<div style="text-align: left;">

<h2 style="display: inline-block; margin: 10px 0px 10px 0px;">

<asp:Label runat="server" ID="lbtnSellerName">Status Snapshot</asp:Label>

</h2>

<h3 style="display: inline-block; margin: 10px 0px 10px 0px;">

<asp:LinkButton runat="server" ID="lblImportName" OnClick="imgBtnLoadLoanImport_Click" />

</h3>

</div>

<br clear="all" />

<table border="0" cellpadding="2" cellspacing="0" style="text-align: right; width: 100%">

<tr>

<td class="FieldLabel" width="250px"># of Units:</td>

<td><asp:Label runat="server" ID="lblUnitsCount" /></td>

<td class="FieldLabel" width="250px">Wtd APR:</td>

<td><asp:Label runat="server" ID="lblWtdAPR" /></td>

</tr>

<tr>

<td class="FieldLabel" width="250px">Orig. Balance:</td>

<td><asp:Label runat="server" ID="lblOriginalBalance" /></td>

<td class="FieldLabel" width="250px">Wtd Avg Model Yr:</td>

<td><asp:Label runat="server" ID="lblWtdAvgModelYear" /></td>

</tr>

<tr>

<td class="FieldLabel" width="250px">Curr. Balance:</td>

<td><asp:Label runat="server" ID="lblCurrentBalance" /></td>

<td class="FieldLabel" width="250px">Wtd Avg Mileage:</td>

<td><asp:Label runat="server" ID="lblWtdAvgMileage" /></td>

</tr>

<tr>

<td class="FieldLabel" width="250px">Wtd Orig. Term(mos):</td>

<td><asp:Label runat="server" ID="lblWtdOriginalTerm" /></td>

<td class="FieldLabel" width="250px">Wtd Bureau Score:</td>

<td><asp:Label runat="server" ID="lblWtdBureauScore" /></td>

</tr>

<tr>

<td class="FieldLabel" width="250px">Wtd Rem. Term:</td>

<td><asp:Label runat="server" ID="lblWtdRemainingTerm" /></td>

<td class="FieldLabel" width="250px">Wtd LTV:</td>

<td><asp:Label runat="server" ID="lblWtdLTV" /></td>

</tr>

<tr>

<td class="FieldLabel" width="250px">Wtd Seasoning:</td>

<td><asp:Label runat="server" ID="lblWtdSeasoning" /></td>

<td class="FieldLabel" width="250px">Wtd LTV Clean:</td>

<td><asp:Label runat="server" ID="lblWtdLTVClean" /></td>

</tr>

<tr>

<td colspan="4" class="FieldLabel"><hr /></td>

</tr>

<tr>

<td style="text-align: left;"><strong>Payment Period:</strong></td>

<td class="FieldLabel">% Monthly:</td>

<td><asp:Label runat="server" ID="lblPaymentPeriodMonthly" /></td>

<td> </td>

</tr>

<tr>

<td> </td>

<td class="FieldLabel">BW/SM/W:</td>

<td><asp:Label runat="server" ID="lblPaymentPeriodOther" /></td>

<td> </td>

</tr>

</table>

</telerik:RadAjaxPanel>

</div>

<div class="dynamic_box" style="width: 95%">

<telerik:RadAjaxPanel ID="apnlChartOriginalTerm" runat="server" LoadingPanelID="ajaxLoadingPanel">

<telerik:RadChart ID="chartOriginalTerm" runat="server" Skin="Mac" Width="490px" AutoLayout="True" DefaultType="Line" IntelligentLabelsEnabled="True">

<ClientSettings EnableZoom="false" ScrollMode="None" />

<Appearance Corners="Round, Round, Round, Round, 6">

<FillStyle FillType="Image">

<FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip" ImageFlip="FlipX" />

</FillStyle>

<Border Color="138, 138, 138" />

</Appearance>

<Series>

<telerik:ChartSeries Type="Line" Name="Full ILS Profolio" DataYColumn="ProfolioPercent1" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Diamond">

<FillStyle MainColor="55, 167, 226" SecondColor="22, 85, 161">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Type="Line" Name="Import Profolio" DataYColumn="ProfolioPercent2" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Triangle">

<FillStyle MainColor="223, 87, 60" SecondColor="200, 38, 37">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Type="Line" Name="Seller's Profolio" DataYColumn="ProfolioPercent3" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Star3">

<FillStyle MainColor="118, 203, 76" SecondColor="73, 166, 22">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

</Series>

<Legend>

<Appearance Overflow="Row" Dimensions-Margins="1%, 1%, 1%, 1%" Position-AlignedPosition="Top">

<ItemMarkerAppearance Figure="Diamond" >

<Border Color="134, 134, 134" />

</ItemMarkerAppearance>

<FillStyle MainColor="">

</FillStyle>

<Border Color="Transparent" />

</Appearance>

</Legend>

<PlotArea>

<EmptySeriesMessage TextBlock-Text=" No data available" />

<XAxis DataLabelsColumn="Label" Step="1">

<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">

<MajorGridLines Color="209, 222, 227" PenStyle="Solid" />

<TextAppearance TextProperties-Color="51, 51, 51" />

</Appearance>

<AxisLabel>

<TextBlock>

<Appearance TextProperties-Color="51, 51, 51" />

</TextBlock>

</AxisLabel>

<Items>

<telerik:ChartAxisItem TextBlock-Text="<=36" Value="0" />

<telerik:ChartAxisItem TextBlock-Text="37_42" Value="1" />

<telerik:ChartAxisItem TextBlock-Text="43_48" Value="2" />

<telerik:ChartAxisItem TextBlock-Text="49_54" Value="3" />

<telerik:ChartAxisItem TextBlock-Text="55_60" Value="4" />

<telerik:ChartAxisItem TextBlock-Text="61_66" Value="5" />

<telerik:ChartAxisItem TextBlock-Text="67_72" Value="6" />

<telerik:ChartAxisItem TextBlock-Text=">72" Value="7" />

</Items>

</XAxis>

<YAxis IsLogarithmic="false" Visible="true">

<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134" MinorTick-Color="134, 134, 134" MinorTick-Width="0">

<MajorGridLines Color="209, 222, 227" />

<MinorGridLines Color="233, 239, 241" />

<TextAppearance TextProperties-Color="51, 51, 51" />

</Appearance>

<AxisLabel>

<TextBlock Text="% of Portfolio" >

<Appearance TextProperties-Color="51, 51, 51" Position-AlignedPosition="TopLeft" />

</TextBlock>

</AxisLabel>

<Items>

<telerik:ChartAxisItem TextBlock-Text="0%" Value="0" />

<telerik:ChartAxisItem TextBlock-Text="10%" Value="1" />

<telerik:ChartAxisItem TextBlock-Text="20%" Value="2" />

<telerik:ChartAxisItem TextBlock-Text="30%" Value="3" />

<telerik:ChartAxisItem TextBlock-Text="40%" Value="4" />

<telerik:ChartAxisItem TextBlock-Text="50%" Value="5" />

<telerik:ChartAxisItem TextBlock-Text="60%" Value="6" />

<telerik:ChartAxisItem TextBlock-Text="70%" Value="7" />

<telerik:ChartAxisItem TextBlock-Text="80%" Value="8" />

<telerik:ChartAxisItem TextBlock-Text="90%" Value="9" />

<telerik:ChartAxisItem TextBlock-Text="100%" Value="10" />

</Items>

</YAxis>

<Appearance Dimensions-Margins="8%, 6%, 8%, 6%">

<FillStyle FillType="Solid" MainColor="White" />

<Border Color="134, 134, 134" />

</Appearance>

</PlotArea>

<ChartTitle>

<Appearance Position-AlignedPosition="Top" Dimensions-Margins="1%, 1%, 1%, 1%" >

<FillStyle MainColor="">

</FillStyle>

</Appearance>

<TextBlock Text="Original Term (mos)">

<Appearance TextProperties-Font="Tahoma, 13pt" />

</TextBlock>

</ChartTitle>

</telerik:RadChart>

</telerik:RadAjaxPanel>

</div>

<div class="dynamic_box" style="width: 95%">

<telerik:RadAjaxPanel ID="apnlChartRemainingTerm" runat="server" LoadingPanelID="ajaxLoadingPanel">

<telerik:RadChart ID="chartRemainingTerm" runat="server" Skin="Mac" Width="490px" AutoLayout="True" DefaultType="Line" IntelligentLabelsEnabled="True">

<ClientSettings EnableZoom="false" ScrollMode="None" />

<Appearance Corners="Round, Round, Round, Round, 6">

<FillStyle FillType="Image">

<FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip" ImageFlip="FlipX" />

</FillStyle>

<Border Color="138, 138, 138" />

</Appearance>

<Series>

<telerik:ChartSeries Type="Line" Name="Full ILS Profolio" DataYColumn="ProfolioPercent1" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Diamond">

<FillStyle MainColor="55, 167, 226" SecondColor="22, 85, 161">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Type="Line" Name="Import Profolio" DataYColumn="ProfolioPercent2" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Triangle">

<FillStyle MainColor="223, 87, 60" SecondColor="200, 38, 37">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Type="Line" Name="Seller's Profolio" DataYColumn="ProfolioPercent3" DefaultLabelValue="#Y{N0}">

<Appearance ShowLabels="false" PointShape="Star3">

<FillStyle MainColor="118, 203, 76" SecondColor="73, 166, 22">

<FillSettings GradientMode="Vertical" />

</FillStyle>

<TextAppearance TextProperties-Color="Black" />

<LineSeriesAppearance Width="2" PenStyle="Solid" />

</Appearance>

</telerik:ChartSeries>

</Series>

<Legend>

<Appearance Overflow="Row" Dimensions-Margins="1%, 1%, 1%, 1%" Position-AlignedPosition="Top">

<ItemMarkerAppearance Figure="Square">