Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ryan
75
Adding a new series to a composite chart inside an updatepanel
posted

I'm building an application using the UltraWebChart v8.2 in .NET 3.5.  In this application there are Ultracharts inside of UpdatePanels.  One of the requirements of the chart is the ability to add series after the original load of the page.  To do this, I am adding a new layer to the composite chart we are using, and adding the series to that layer.

The problem is that a series added to the chart through a partial page refresh of the containing updatepanel, none of the javascript functions are set up for this series, leading to javascript errors when the events for the series are fired.  The error is a reference to an undefined string, and comes when trying to parse the arguments for the event in the DecodeArguments function.  It is caused becuase the EventData member of the IGChart object does not contain the information for any layers added through partial page refresh.

 To reproduce this problem, do the following: 

  1. Create a page containing an UpdatePanel, which contains a Composite Chart with the following properties:
    • No layers,
    • No series,
    • an x and y axis
    • a clientsideevent handler for ClientOnMouseOver
  2. Add a buttton inside of the UpdatePanel, and in the Button's click handler, add a new scatterchart layer to the chart and a new series to the layer.
  3. Attempt to mouseover the newly added series. 

It seems to me that this problem comes up due to the fact that the javascript for instantiating the IGChart objects is injected directly into the page on page load or postback.  When a partial page refresh creates a new layer or series, the associated javascript object is never created, and thus, the members are not set up correctly.  

 Update:

If you replace the updatepanel with an asyncrefreshpanel, then the errors disapear.

Parents
No Data
Reply
  • 17605
    posted

    I've been trying to reproduce the problem with:

    <head runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript" id="igClientScript">

    <!--

    function UltraChart1_ClientOnMouseOver(this_ref, row, column, value, row_label, column_label, evt_type, layer_id) {

    //Add code to handle your event here.

    }

    // -->

    </script>

    </head>

    <body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

    <div>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

    <igchart:UltraChart ID="UltraChart1" runat="server" BackgroundImageFileName="" BorderColor="Black"

    BorderWidth="1px" ChartType="Composite" EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource"

    Version="8.2">

    <Tooltips Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

    Font-Underline="False" />

    <ClientSideEvents ClientOnMouseOver="UltraChart1_ClientOnMouseOver" />

    <CompositeChart>

    <ChartAreas>

    <igchartprop:ChartArea Key="area1">

    <Axes>

    <igchartprop:AxisItem DataType="Numeric" Key="axis1" OrientationType="X_Axis" SetLabelAxisType="GroupBySeries"

    TickmarkInterval="0">

    <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1"

    Visible="True" />

    <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1"

    Visible="False" />

    <Labels HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center">

    <SeriesLabels HorizontalAlign="Center" Orientation="Horizontal" VerticalAlign="Center">

    </SeriesLabels>

    </Labels>

    </igchartprop:AxisItem>

    <igchartprop:AxisItem DataType="Numeric" Key="axis2" OrientationType="Y_Axis" SetLabelAxisType="GroupBySeries"

    TickmarkInterval="0">

    <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1"

    Visible="True" />

    <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1"

    Visible="False" />

    <Labels HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center">

    <SeriesLabels HorizontalAlign="Center" Orientation="Horizontal" VerticalAlign="Center">

    </SeriesLabels>

    </Labels>

    </igchartprop:AxisItem>

    </Axes>

    <GridPE ElementType="None" />

    </igchartprop:ChartArea>

    </ChartAreas>

    </CompositeChart>

    <ColorModel AlphaLevel="150" ColorBegin="Pink" ColorEnd="DarkRed" ModelStyle="CustomLinear">

    </ColorModel>

    <Effects>

    <Effects>

    <igchartprop:GradientEffect />

    </Effects>

    </Effects>

    </igchart:UltraChart>

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

    </ContentTemplate>

    </asp:UpdatePanel>

    </div>

    </form>

    </body>

    </html>

    ... 

    protected void Button1_Click(object sender, EventArgs e)

    {

    XYSeries series = new XYSeries();

    series.Points.Add(new XYDataPoint(2, 3, "a", false));

    series.Points.Add(new XYDataPoint(3, 2, "b", false));

    series.Points.Add(new XYDataPoint(2, 6, "c", false));

    series.Points.Add(new XYDataPoint(7, 3, "d", false));

    ChartLayerAppearance layer = new ChartLayerAppearance();

    layer.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.ScatterChart;ChartArea area = this.UltraChart1.CompositeChart.ChartAreas[0];

    layer.ChartArea = area;

    layer.AxisX = area.Axes[0];

    layer.AxisY = area.Axes[1];

    layer.Series.Add(series);

    this.UltraChart1.CompositeChart.ChartLayers.Add(layer);this.UltraChart1.CompositeChart.Series.Add(series);

    }

     

    With this code the chart seems to work ok.

    What else do you have on the page? Could you send us the code so we can investigate the problem?

Children
No Data