Home/ Questions/Q 6690991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:42:01+00:00

I have a standard webpage containing an UpdatePanel, and a button. Upon loading the

  • 0

I have a standard webpage containing an UpdatePanel, and a button. Upon loading the page some javascript is set and the page renders a chart (using Highcharts from here http://www.highcharts.com/products/highcharts).

When I reload the UpdatePanel using a button, dropdown etc the chart does not re-render.

For brewity I have shortened the code, but normally I have an UpdatePanel with a dropdown where users can select various charts, then data is fetched from a database and the results are sent back to the page.

Can anybody explain why it does not work / load the chart when I click on the button – and how to fix it?

The chart can be download here: http://www.highcharts.com/products/highcharts – simply add this to a folder called /js/highcharts.js

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    string jschart = "var chart;$('" + up1.ClientID + "').ready(function() {chart = new Highcharts.Chart({"
             + "title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} },"
             + "chart:{renderTo: 'container', defaultSeriesType: 'column'},";
    litChartData.Text = String.Format("{0} {1}", jschart, getData());
}

private string getData()
{
    // this is normally coming from a database...

    return "xAxis:{title:{text:'Date'}, type:'datetime'}, yAxis:{title:{text:'Hits'}},"
        + "series:  [{ name:'Impressions',type:'column',"
        + "data: [ "
        + "[Date.UTC(2011,7,18),13],"
        + "[Date.UTC(2011,7,24),21],"
        + "[Date.UTC(2011,8,30),60]]"
        + "}] }) });";
}
</script>

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scr" />

    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate> 
        <script type="text/javascript">
            <asp:Literal ID="litChartData" runat="server" />
        </script>

        <div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
        <center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the chart is rendered on the client side upon jquery’s Ready event, but the event is not re-fired upon ajax calls. the solution might be emitting different scripts depending on whether the request is initial or subsequent one (ajax).
    on initial call just emit the script you have in jschart var.
    on subsequent calls emit the same script but without wrapping it into Ready event binding.

    UPDATE:
    i totally forgot update panel does not execute nested scripts after updating.
    the solution for that is registering scripts via script manager. try the following code. note there is no script literal in the update panel anymore.

    <%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    string jschart =
             "if (window.chart) { window.chart.destroy(); }" +
             "window.chart = new Highcharts.Chart(" +
             "{title: { text: 'Traffic',x: 0, style: {fontSize:'13px'} }," +
             "chart:{renderTo: 'container', defaultSeriesType: 'column'}," +
             getData() +
             "});";
  ScriptManager.RegisterStartupScript(this, this.GetType(), "chart", jschart, true);
}

private string getData()
{
    // this is normally coming from a database...

    return
        "xAxis:{title:{text:'Date'}, type:'datetime'}, "
        + "yAxis:{title:{text:'Hits'}},"
        + "series:  [{"
        + "name:'Impressions',"
        + "type:'column',"
        + "data:"
        + "[[Date.UTC(2011,7,18),13],"
        + "[Date.UTC(2011,7,24),21],"
        + "[Date.UTC(2011,8,30),60]]"
        + "}]";
}
</script>

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="/js/highcharts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="scr" />

    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate> 

        <div id="container" style="width:700px;height:300px;margin:0 auto;background-color:#eee"></div>
        <center><asp:Button ID="btn" runat="server" Text="Ajax postback" /></center>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>
    • 0