Near Realtime data in charts using AngularJS

Whenever we develop an Web Application for displaying realtime or near realtime charts there would be a need to refresh the page at regular intervals to fetch the data and display. This is essential for the following reasons:

  1. To ensure that we display the latest details to the end users
  2. To provide interactive update which gives good look & feel for the end users
  3. Will help in avoiding taking wrong decisions or delayed information
  4. Can help in analyzing the current situation instead of past history

In one of the recent initiatives I was working on I have to refresh the chart for displaying the current data available at a manufacturing facility in near-real time. The user interface was developed with HTML5 + CSS3 and AngularJS. I came across this post found in by Shahid Shaikh which helps to refresh the DIV using the interval. Very useful post indeed.

I used ChartJS + AngularJS for my own implementation. I used REST API developed based on Web API 2 with Dapper ORM to interact with my Datawarehouse.