Update a dotnet HighCharts Chart every N seconds

9ecd376e5371efaef9aad9bc9143aed8_LRead 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.


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">
            <asp:Literal ID="chrt" runat="server"></asp:Literal>
    <%-- Register the trigger as PostBack and not as AsyncPostBack--%>

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

The Timer1_Tick method simply calls the chart rendering.

protected void Timer1_Tick(object sender, EventArgs e)

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:

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.

Reference: Update a dotnet HighCharts Chart every N seconds from our NCG partner Francesco Balsamo at the balsamino.com blog.

Francesco Balsamo

Francesco is a senior electronic engineer working in Telecom domain. He has a wide experience as software and applications development as well as business analysis. Founder of the balsamino.com blog as a way to share knowledge.

Related Articles

Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
Back to top button