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:
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. |