Web-based Real-time Information Tracking

I am working on a project required web-based real-time status tracking on a big automobile plant. Supervisors need to check if some events such as “incidents happen using a browser. The browser needs to update the information in a few seconds based on the setting. The status information such as “incidents” are stored in a database with information of “start time”, “end time”, “duration”, etc. We decided to use Dundas Charts to generate the information images, and use JavaScript to populate the real-time images. We thought about two approaches for dynamic loading Dundas images on the fly.

1. Image generated in the server

• Advantage: browser friendly without any client side requirement
• Disadvantage: increase the workload in server and more traffic in the network if images are big

2. Image generated in the client

• Advantage: less overhead in server and network
• Disadvantage: require ActiveX enabled in the browser and more overhead in the client

The first method uses JavaScript to update the images regularly. To avoid the page flicker, and the page only reloads the image instead of the whole page (change the image source inside JavaScript):

Consider the image generated in the server may take a bit time (retrieving data from database and building chart image), we could use image buffering in the server: the page image at client only loaded when it’s ready at server. We can buffer image in memory or in files:

The second method also uses JavaScript, but the JavaScript gets the real-time data from server instead of binary images. To do this, we create XMLDOM object inside JavaScript. The data is retrieved from server by XMLHTTP object, and filled into ActiveX object (Dundas chart), then we redraw the chart, as shown in following figure:

There is a sampling rate issue for plotting data in a chart when the unit of X-value in chart is different from that of the data from database. A simple solution for that is to plot the data when there is an incident inside that time slot. As depicted in below figure, three incidents are all plotted between the time shot 2 and shot 3:


(Nov. 2005 update) The first approach (generating images from the server) has been implemented with memory buffering mechanism. The client is quite satisfied what we delivered.