Ajax+svg Realize Real-time monitoring chart

Objective

AJAX already has a lot of articles about its principle and its application. But unfortunately there is not a lot of actual project application now. This article combines the application of the project with the use of AJAX and SVG technology to create a variety of exciting features, with the examples and source code that can be run.

This paper needs a certain ajax,svg knowledge and application experience. Of course, they can all be found on the IBM.COM/DEVELOPERWORKS/CN.

The personal advice for AJAX applications is that if the traditional MVC can satisfy the application, there is no need to use AJAX instead, because the only benefit that Ajax can bring is no refresh. AJAX is used to help us achieve functionality that has been difficult to implement with traditional web technologies in the past.

Technical terms

1. Ajax, Ajax (asynchronous JavaScript and XML) is a combination of technologies that standardize rendering with XHTML and CSS, use DOM for dynamic display and interaction, and use XML and Xstl for data interchange and processing, using XMLH Ttprequest object for asynchronous data reading, and uses Javascript to bind and process all data. More importantly, it breaks the usual technology mix of using page overloading, which can be said to be an important weapon for WEB development

2. SVG (Scalable Vector Graphic) is a standard, open vector image format. It allows you to design the Web page can be more exciting, more detailed. Using simple text commands, SVG can even make a variety of common image effects, such as color linear changes, custom placement fonts, transparency, dynamic effects, and mirror effects. SVG images are based on XML (extensible Identification language--the future of the network language), and are organized by the SVG Development Team of the consortium responsible for detailed research and development.

3. Dwr,dwr is an Open-source class library that helps developers develop Web sites that contain AJAX technology. It allows code in the browser to use JAVA functions that run on the WEB server, just as it is in the browser.

It is best to read this article with the following knowledge:

1. AJAX Development and application

2. SVG-related knowledge, especially with JavaScript interaction. (There are very detailed SVG technical articles on the developerworks)

3. DWR Foundation. (Developerwworks has a very detailed DWR framework of technical articles and examples, this article does not end the DWR basic knowledge in detail.) ) For example: http://www.ibm.com/developerworks/cn/java/j-ajax3/

Actual effect

The technical description is again good, as a practical example, we first look at the actual effect. The reader can download the example included with this article and publish it to any SERVLE server that supports JSP1.1, such as Tomcat4.0 or webshpere,weblogic, and then access the page: http://localhost: Port/ajaxsvg/ Dymeter.jsp. (for example, for Tomcat, the port is 8080)

Click on the Start button, and you'll find that the chart's pointers will swing in real time based on the server's data. Similar to a car instrument dashboard, this is the previous CS software or flash can achieve the effect, now we use the form of pure web implementation.

In terms of jargon, it's actually a Dash Board, which is actually seen in a variety of BI (business intelligence) applications, inspired by the dashboard of the car, which is a very intuitive reflection of the state of the current data, such as danger, security, low, etc.

Of course it's not new, and a lot of software can provide this kind of chart, today we are going to use AJAX and SVG to break through the traditional applications, the previous software generated pictures are static, note my static here is that they generated pictures of the pointer will not be like a real car dashboard as the car's various data changes, For example, the speed, oil change and swing, according to the car's real-time speed and swing, but users refresh the page, the software based on server-side data to regenerate the picture and then display to the end user.

Traditional this way for the general BI application is completely enough, but for real-time requirements of higher systems, the use of monitoring systems, it is not possible to require users to refresh the page at any time, or use JavaScript to periodically refresh the page, this effect is very poor, and server-side repeatedly in memory, Or the hard drive to generate pictures, the number of users, the system burden is too heavy.

Let's put aside the technology and think about it, we actually just want to change the position of the pointer, there is no need to generate the entire picture or to pass the entire picture of the data to the client. This setting is very unreasonable, but it is difficult to complete in the past.

Now if we use AJAX technology, we just need to transfer the current data and tell the dashboard where the pointer should be pointing. No page refresh, no need to regenerate the picture, and the network side, server side, the user side of the cost is very small, the previous program inexperienced programmers often lead to memory overflow, now the risk of such a mistake is greatly reduced.