Update a dotnet HighCharts Chart every N seconds

Read the post about the HighCharts.net inside an update panel?

Some months ago a reader asked me an help on how to automatically update a chart every N seconds.

This is the original question.

Hi

thank you for your sample, really nice to use it ;)

but I ve a question, I dont know if you know how to refresh the chart via an UpdatePanel control, I mean I d like to use a Timer to refresh the ltrChart1.Text = chart.ToHtmlString(); using an ScriptManager control and a UpdatePanel control (http://msdn.microsoft.com/en-us/library/vstudio/bb386454(v=vs.100).aspx) but….it doesnt work…. is like the Highcharts is not realoaded even when we call Highcharts objects again….

May be do you have the answer ^^, may be not, thank you a lot !!!

The Easy Solution

Now I want to explain to you how to update the chart every N seconds.

As I’ve written on my post, the trick is to place a PostBack trigger inside the Page_load method (or if you prefer inside the webform).

Regarding my friend’s question I’ve prepared a simple example in my code repository.

The Code

As usual let’s insert a Literal control inside an update panel.

Since I want to update the chart every N seconds (let’s suppose 5s) I’ve defined a Timer that calls a Timer_Tick method every 5000ms.

<asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div>
            <asp:Literal ID="chrt" runat="server"></asp:Literal>
        </div>
    </ContentTemplate>

    <%-- Register the trigger as PostBack and not as AsyncPostBack--%>

</asp:UpdatePanel>

Inside the codebehid I’ve registered a PostBack Trigger on the Timer1 control.

protected void Page_Load(object sender, EventArgs e)
{
    //Register the trigger as PostBack and not as AsyncPostBack
    ScriptManager.GetCurrent(this).RegisterPostBackControl(Timer1);
    chart1();
}

The Timer1_Tick method simply calls the chart rendering.

protected void Timer1_Tick(object sender, EventArgs e)
{
    chart1();
}

Finally I render the chart as usual.

private void chart1()
{
    Random rand = new Random((int)DateTime.Now.Ticks);
    Object[] val = new Object[12];

    for (int i = 0; i < 12; i++)
    {
        val[i] = rand.Next(1, 100);
    }

    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .InitChart(new Chart
        {
            DefaultSeriesType = ChartTypes.Column
        })
        .SetTitle(new Title
        {
            Text = "Random Generated numbers",
            X = -20
        })
        .SetSubtitle(new Subtitle
        {
            Text = "balsamino.com",
            X = -20
        })
        .SetXAxis(new XAxis
        {
            Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
        })
        .SetSeries(new Series
        {
            Data = new Data(val)
        });
            
    chrt.Text = chart.ToHtmlString();
}

For further details you can give a look at one of those posts:

• HighCharts databinding in C#
• dotnet HighCharts inside UpdatePanel

You can find the complete example in my bitbucket repository (click on the image)

I hope you can find useful this article.

Feel free to post comments or to ask me for additional info.