Series dissappear when chart grid is scrolled?

[dotnettex]

Greetings, All!

I am using ChartFX7 (VS2008) to render a chart image for a web application. I am running into an issue and need your assistance. I have an application which needs to chart 5 values. The X axis is the date of each value, and the Y and Y2 axis plot the values on a log scaled chart. For sake of simplicity, lets call these value columns A, B, C, D, and E.

Initially, I create a FieldMap for each of the DataTable columns (A - E), then tie the DataTable to the chart's DataSource via the DataTableProvider. Since all the values are initially (automattically) tied to the Y axis, I need to re-assign 3 of them to the Y2 axis (B, D, and E).

On my web page, I have 5 chack boxes (representing the 5 columns) with 3 initially checked (A, B, and C). I have a method which reads the checked state of each of the 5 checkboxes and sets each of the 5 series lines visable accordingly (i.e. this.chart1.Series[0].Visible = this.chkBox1.Checked)

This method is fired (via Ajax AsyncPostBack) using each of the checkboxes 'CheckChanged' event. This works great except for a single issue.

I have the grid below the chart showing by default. If you try to scroll or page the grid (using scrollbar), any series line which was not initially visible dissappears from the chart, along with it's associated grid row.

 For example:

Lines A, B, and C are initially shown when the page is first loaded. If I check D or E (or both), a postback is made and a newly composed chart now shows the additional lines. If I go to scroll the grid below the chart, any additional lines dissappear ( along with their associated grid rows) with ony the original 3 remaining (A, B, and C).

 

Is this a bug or am I doing something wrong? I tried playing with the viewstate, to no avail.

 Thanks!

Brian

[Frank]

Looks like a problem with your ViewState.

1) When you click the scrollbar, an AsyncPostback will occur.Are you setting data or any other attributes in the chart when this call occurs? your page code will execute just the same as in a PostBack. Please debug and check whether you are resetting the chart to its original state.

2) Is the AsyncPostBack sent by the checkbox done using an UpdatePanel? If so, is the chart inside of it? Depending on how you are doing this you may be failing to update the chart state.

If you can post a sample app that reproduces the problem I would be able to pinpoint what the problem is and guide you to a solution.

[dotnettex]

1) When you click the scrollbar, an AsyncPostback will occur.Are you setting data or any other attributes in the chart when this call occurs? your page code will execute just the same as in a PostBack. Please debug and check whether you are resetting the chart to its original state.

Yes - I am checking for postback and NOT resetting the chart when it occurs.

The chart is inside an UpdatePanel with the triggering controls (CheckBoxes) outside. Here is the HTML for the chart section:

<!-- BEGIN CHART --><td class="estChartArea" colspan="2" style="width: 665px" rowspan="34"> <asp:UpdatePanel ID="updChartPanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional"> <ContentTemplate>   <chartfx7:Chart ID="cfxMain" runat="server" Height="640" Width="660"> <Series> <chartfx7:SeriesAttributes /> <chartfx7:SeriesAttributes /> <chartfx7:SeriesAttributes /> </Series> <LegendBox Dock="Bottom" ContentLayout="Center" />   </chartfx7:Chart> </ContentTemplate>  <Triggers> <asp:AsyncPostBackTrigger ControlID="chkGasPlot" EventName="CheckedChanged" /> <asp:AsyncPostBackTrigger ControlID="chkOilPlot" EventName="CheckedChanged" /> <asp:AsyncPostBackTrigger ControlID="chkWaterPlot" EventName="CheckedChanged" /> <asp:AsyncPostBackTrigger ControlID="chkGORPlot" EventName="CheckedChanged" /> <asp:AsyncPostBackTrigger ControlID="chkLGRPlot" EventName="CheckedChanged" /> </Triggers> </asp:UpdatePanel></td><!-- END CHART -->

 Here is the code behind that is only called when the page is first called:

            dt = ef.GetWellProduction(this.WellNumber, true, true);            //ObjectSerializer.SerializeToFile(string.Format("C:\\Temp\\ProdData_{0}.xml", this.WellName.Replace(" ", "")), dt);            // Map fields            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("PROD_DATE", FieldUsage.XValue));            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("OIL", FieldUsage.Value));            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("GAS", FieldUsage.Value));            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("WATER", FieldUsage.Value));            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("GOR", FieldUsage.Value));            this.cfxMain.DataSourceSettings.Fields.Add(new FieldMap("LGR", FieldUsage.Value));            this.cfxMain.DataSourceSettings.DataSource = new ChartFX.WebForms.DataProviders.DataTableProvider(dt);            // Remove markers & set foreground / border color            this.cfxMain.Gallery = Gallery.Lines;            this.cfxMain.AllSeries.MarkerShape = MarkerShape.None;            this.cfxMain.ForeColor = System.Drawing.Color.Gray;            this.cfxMain.Border = new ChartFX.WebForms.Adornments.SimpleBorder(ChartFX.WebForms.Adornments.SimpleBorderType.Color,                                                                                System.Drawing.Color.Gray);            // Set Grid and Legend defaults            this.cfxMain.DataGrid.Visible = true;            this.cfxMain.LegendBox.Visible = false;            this.cfxMain.RenderFormat = "Image";            // Create Chart Title            TitleDockable title = new TitleDockable(this.WellName);            title.Dock = DockArea.Top;            title.Font = new System.Drawing.Font("Arial", 14);            title.TextColor = System.Drawing.Color.Black;            this.cfxMain.Titles.Add(title);            title = new TitleDockable("( " + _wrk.WorkoverHeader.WellInfo.CompletionInfo.Replace("; ", " / ") + " )");            title.Dock = DockArea.Top;            title.Font = new System.Drawing.Font("Arial", 8);            this.cfxMain.Titles.Add(title);            // Setup X axis            this.cfxMain.AxisX.Title.Text = "TIMESPAN";            this.cfxMain.AxisX.Title.Font = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Bold);            this.cfxMain.AxisX.Title.TextColor = System.Drawing.Color.Black;            this.cfxMain.AxisX.LabelsFormat.Format = AxisFormat.Date;            this.cfxMain.AxisX.LabelAngle = 45;            // Setup Y axis            this.cfxMain.AxisY.Title.Text = "MCFPD@14.65pb";            this.cfxMain.AxisY.Title.Font = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Bold);            this.cfxMain.AxisY.Title.TextColor = System.Drawing.Color.Black;            this.cfxMain.AxisY.LabelsFormat.Format = AxisFormat.Number;            this.cfxMain.AxisY.LogBase = 10;            this.cfxMain.AxisY.Min = 0;            this.cfxMain.AxisY.Max = 1000000;            // Setup Y2 axis            this.cfxMain.AxisY2.Title.Text = "BPD";            this.cfxMain.AxisY2.Title.Font = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Bold);            this.cfxMain.AxisY2.Title.TextColor = System.Drawing.Color.Black;            this.cfxMain.AxisY2.LabelsFormat.Format = AxisFormat.Number;            this.cfxMain.AxisY2.LogBase = 10;            this.cfxMain.AxisY2.Min = 0;            this.cfxMain.AxisY2.Max = 100;            // Connect oil / water / GOR series to Y axis            this.cfxMain.Series[0].AxisY = this.cfxMain.AxisY2; // Oil            this.cfxMain.Series[2].AxisY = this.cfxMain.AxisY2; // Water            this.cfxMain.Series[4].AxisY = this.cfxMain.AxisY2; // Initial axis for LGR            // Assign series colors            this.cfxMain.Series[0].Color = System.Drawing.Color.Green; // Oil            this.cfxMain.Series[1].Color = System.Drawing.Color.Red; // Gas            this.cfxMain.Series[2].Color = System.Drawing.Color.Blue; // Water            this.cfxMain.Series[3].Color = System.Drawing.Color.Cyan; // GOR            this.cfxMain.Series[4].Color = System.Drawing.Color.DarkCyan; // LGR            SetGraphPlots();

The checkboxes will also call the SetGraphPlots() method whenever their OnCheckChange event is raised:

            // Set visible series            this.cfxMain.Series[0].Visible = this.chkOilPlot.Checked; // Oil            this.cfxMain.Series[1].Visible = this.chkGasPlot.Checked; // Gas            this.cfxMain.Series[2].Visible = this.chkWaterPlot.Checked; // Water            this.cfxMain.Series[3].Visible = this.chkGORPlot.Checked; // GOR            this.cfxMain.Series[4].Visible = this.chkLGRPlot.Checked; // LGR            this.cfxMain.RecalculateScale();

As stated earlier, the method which initially sets up the chart (above) is NOT called on subsequent postbacks.

 THANKS!!!

Brian

[dotnettex]

May I assume that your silence suggests a bug?

[Frank]

No. It means that I don;t know what's happening. I has been unable to reproduce this problem on my side.

[dotnettex]

 

If it helps:

 I am using VS 2008 to create a ASP.NET 3.5 application. Also using AjaxControlToolkit for 3.5 framework.

I've noticed (also) that the HTML generated by the ChartFX designer is not as consistant, or as reliable, as it is using VS 2005 / ASP.NET 2.0. Have you guys had a chance to fully test the VS2008 environment (in addition to .NET 3.5 framework)?

I guess until then we will just disable the client side grid on the chart. Thanks! 

Brian