Graph Disappears after update.

Nov 19, 2013 at 4:50 PM
I am new to the DotNet.Highcharts API. I want to create multiple charts on a single page.

These graphs are placed in an update panel and i want to trigger an AsyncPostBack call when ever the reload button is pressed or the timer reaches a certain time, lets say 5 minutes. The Problem that i am facing is that when ever the update panel is updated, the graph disappears. I am unable to understand the reason of this.

Please note that when ever a complete Postback is done, no issue is faced. The issue arises when an AsyncPostBack is triggered. PFB a sample code



Aspx
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:Button ID="DrawChart1" runat="server" Text="1" OnClick="DrawChart1_Click"/>
        <asp:Button ID="DrawChart2" runat="server" Text="2" />
        <asp:Button ID="DrawChart3" runat="server" Text="3" />
        <asp:Button ID="DrawChart4" runat="server" Text="4" />
        <div style="height:450px; width:auto; background-color:black">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Literal ID="TransactionCountGraph" runat="server"></asp:Literal>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="DrawChart1" EventName="Click"/>
                </Triggers>
            </asp:UpdatePanel>            
        </div>

        <div style="height:450px; width:auto; background-color:green">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                                
                <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="2500"></asp:Timer>
                    <asp:Literal ID="LiveData" runat="server"></asp:Literal>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

        <div style="height:450px; width:auto;  background-color:blue">
        <asp:Literal ID="Plot_Sessions" runat="server"></asp:Literal>

        </div>

        <div style="height:450px; width:auto;  background-color:yellow">
        <asp:Literal ID="JMXApp1" runat="server"></asp:Literal>
        </div>

    </div>
    </form>
Code Behind
        protected void Page_Load(object sender, EventArgs e)
        {
            testing111();
            testing222();
            testing333();
            testing444();
        }

        private void testing111()
        {
            DotNet.Highcharts.Highcharts chart111 = new DotNet.Highcharts.Highcharts("chart111")
                    .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
                    .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    })
                    
                .InFunction("DrawChart1")
                .AddJavascripVariable("colors", "Highcharts.getOptions().colors")
                .AddJavascripFunction("TooltipFormatter",
                                      @"var s;
                    if (this.point.name) { // the pie chart
                       s = ''+
                          this.point.name +': '+ this.y +' fruits';
                    } else {
                       s = ''+
                          this.x  +': '+ this.y;
                    }
                    return s;");

            JMXApp1.Text = chart111.ToHtmlString();
        }


        private void testing222()
        {
            DotNet.Highcharts.Highcharts chart222 = new DotNet.Highcharts.Highcharts("chart222")
                    .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
                    .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

            TransactionCountGraph.Text = chart222.ToHtmlString();
        }


        private void testing333()
        {
            DotNet.Highcharts.Highcharts chart333 = new DotNet.Highcharts.Highcharts("chart333")
                    .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
                    .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

            LiveData.Text = chart333.ToHtmlString();
        }

        private void testing444()
        {
            DotNet.Highcharts.Highcharts chart444 = new DotNet.Highcharts.Highcharts("chart444")
                    .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
                    .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

            Plot_Sessions.Text = chart444.ToHtmlString();
        }

        protected void DrawChart1_Click(object sender, EventArgs e)
        {
            testing111();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            testing111();
        }
Please note that this code was just a test run. I just need to know what change is to be made in order to get this code running.