Auto Refresh Highcharts graph in regular intervals using ASP.NET

In last post we discussed how to render multiple series using highcharts. In this article we will look at how to refresh the chart in regular intervals. This feature can be used to refresh data in graph or to show real time data in graph using ASP.NET

We will use ‘updatepanel’ and ‘scriptmanager’ to do “AJAX” post back- so that the whole page will not be refreshed every time graph changes.

1. If have already haven’t done this- Do the steps in my previous post.

2. Add “ScriptManager” and “UpdatePanel” controls. Place the container div inside the update panel. Also add a timer inside update panel. We need timer to refresh graph in regular intervals

So controls will look like –

<asp:ScriptManager runat="server" id="scriptManager1"></asp:ScriptManager>

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

        <ContentTemplate>

            <!--Hidden controls for storing x and y axis data-->

            <asp:HiddenField runat="server" ID="hdnXaxis" />

            <asp:HiddenField runat="server" ID="hdnYaxis" />

            <!-- Container to render highchats graphs -->

            <div style="width:800px;height:400px;" id="container" > </div >

            <!-- Timer to refresh graph in regular intervals -->

            <asp:Timer runat="server" ID="graphRefreshTimer" Interval="5000"

                ontick="graphRefreshTimer_Tick" ></asp:Timer>

        </ContentTemplate>

    </asp:UpdatePanel>

3. In code behind page add code for timer tick event to refresh the graph

   protected void graphRefreshTimer_Tick(object sender, EventArgs e)

        {

            LoadData();

            ScriptManager.RegisterStartupScript(graphRefreshTimer, graphRefreshTimer.GetType(), "scriptname", "DrawMyGraph1();", true);

        }

That’s it! Run the app and the graph will refresh every 5 seconds without full page postback. You can change the data in ‘LoadData()’ method to show the updated data. You can connect to SQL database in the LoadData() method to show updated stats.