Home » .NET » Update a dotnet HighCharts Chart every N seconds

About Francesco Balsamo

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.

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.

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:

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

balsaminonewLogo

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.
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a sysadmin Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Introduction to NGINX
2. Apache HTTP Server Cookbook
3. VirtualBox Essentials
4. Nagios Monitoring Cookbook
5. Linux BASH Programming Cookbook
6. Postgresql Database Tutorial
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments