AJAX + SVG Implementation of real-time monitoring chart

ajax| Monitoring | chart

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.

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 XMLHT Tprequest 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/

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.

In fact, the principle is not complex, we use SVG to draw the dashboard, and then use AJAX technology to request the server to update the data (that is, the pointer to the data), if the data is updated, then call the JavaScript script to let the SVG dashboard reposition the pointer, so that the real-time graphics refresh. The following figure describes the use of various techniques in this tutorial.

This example program consists of an SVG file, a JSP file, and a JAVA class:

• Meterremote.java
• Meterchart.svg
• dymeter.jsp

First look at Meterremote.java, which generates the data that the pointer points to, as an example I just generate a random data, in the actual project it should be returned the actual data, for example, the car dashboard is the current car speed. They can be in real projects from the actual project data can be from the database, Jms,web services, EJB and so on.

import java.util.Random;public class MeterRemote {private double curr_value,full_value=200;public double getDegree(){Random r=new Random();curr_value=r.nextInt(200);return curr_value/full_value*270;}}

We then use the DWR engine to publish the Java class so that remote AJAX applications can invoke the Java class Method Getdegree ().

Open Dwr.xml file, in this article provides examples from which you can see it, add the following code:

<allow> <create creator= "new" javascript= "Meterremote" > <param name= "class" value= "Com.nbw.svg.DyChart.ajax.MeterRemote"/> </create> </allow>

So DWR a Java class released, can be in the page through JS can be directly called it, very simple. Like most frameworks, it uses an XML file to complete its own configuration, using the creat tag to publish a Java class, creator=new shows that the creation is created by new to create an instance, the Java class configuration is the same here, Because it supports spring and struts to have different creator. Javascript= "Meterremote" indicates that it is invoked on a page using a Meterremote object (JS object). The param tag defines the name of the specific class. You can also use DWR to specify the permissions that are invoked and the method that specifies the specific Java class, instead of publishing all of the object's methods. Please refer to other articles on IBM for more configuration information.

Restart the server and use the browser to open the following address:
Http://localhost:8080/ajaxSVG/dwr

As shown in the following illustration:

You will see the Meterremote link, which shows that the publication was successful, and clicking the link http://localhost:8080/ajaxSVG/dwr/test/MeterRemote see the test page, which contains how to use it, and the methods that can be invoked.

As shown in the following illustration:

You can click Excute to test the effect so that the page can invoke the Java-side program directly. Then we look at the JSP file.

First import JS, so you can:

1.<script type= ' text/javascript ' src= '/ajaxsvg /dwr/engine.js ' ></script> 2.<script type= ' text/javascript ' src= '/ajaxsvg /dwr/util.js ' ></script> 3.<script type= ' text/javascript ' src= '/ajaxsvg /dwr/interface/meterremote.js ' ></script>

1, 2 lines are the two JS files required by the DWR engine. Line 3rd is the JS file required to import the DWR engine call Pojo java.

function GetValue () { Meterremote.getdegree (Loadinfo); }

The above method gets the data from the server side of the pointer to the dashboard.

The emphasis is on the following code:

function loadinfo(data){DWRUtil.setValue("reply1", data);    curr_degree=data;    var svgDocument = window.sample.getSVGDocument();chart=svgDocument.getElementById("line2");chart.setAttribute( "from", last_degree+",250,250");    chart.setAttribute( "to", curr_degree+",250,250");    chart.beginElement();    last_degree=curr_degree;}

The code above dynamically alters the position of the pointer in the SVG diagram based on the pointer data of the dashboard that was obtained remotely.

which

var svgdocument = window.sample.getSVGDocument ();

Get the SVG object.

Chart=svgdocument.getelementbyid ("Line2");

Gets the pointer object.

Chart.setattribute ("from", last_degree+ ", 250,250"); Chart.setattribute ("To", curr_degree+ ", 250,250"); Chart.beginelement ();

Remotely invokes the resulting dashboard's pointer data to dynamically change the position of the pointer in the SVG diagram.

Finally, let's take a look at the SVG file, which is the part of the code that deserves attention.

<circle cx="250" cy="250" r="150.0" fill="#ffffff"/><path d="M143.93398282201787 356.0660171779821 A150.0 150.0 , 0, 0,1,101.84674891072936 226.53483024396536 L250 250, Z" class="fill1"/><path d="M101.84674891072936 226.53483024396536 A150.0 150.0 , 0, 0,1,181.90142503906804 116.34902137174478 L250 250, Z" class="fill2"/><path d="M181.90142503906804 116.34902137174478 A150.0 150.0 , 0, 0,1,318.098574960932 116.34902137174484 L250 250, Z" class="fill3"/><path d="M318.098574960932 116.34902137174484 A150.0 150.0 , 0, 0,1,398.1532510892706 226.53483024396536 L250 250, Z" class="fill4"/><path d="M398.1532510892706 226.53483024396536 A150.0 150.0 , 0, 0,1,356.06601717798213 356.06601717798213 L250 250, Z" class="fill5"/><circle cx="250" cy="250" r="3" style="fill: #00C"/><line x1="129.7918471982869" y1="370.208152801713" x2="250" y2="250"style="stroke: #F00;stroke-width: 2px" id="finger"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,250,250" begin="run()"  to="20,250,250" dur="2"fill="freeze" style="stroke: #F00;stroke-width: 2px" id="line2"/></line>

In fact, the SVG code above defines a static pointer to a 0-degree instrument panel. It is defined by the <path> tag. It is often produced by software, because there are so many software that can generate SVG diagrams, such as Jfreechart and so on, and the article space limit does not end the SVG diagram in detail.

Conclusion

The principle of using this example has been applied in several practical projects, and the performance and effect are very satisfying from the actual effect of the user's use. Instead of using the CS software to implement real-time monitoring charts, AJAX can now replace the traditional MVC frameworks (such as STRUTS,JSF) without showing its power, especially in the development of AJAX tools and inefficient development testing. But its integration with other technologies, such as SVG, can often be an unexpected effect. AJAX and the emergence of a variety of new Web 2.0 technology has greatly enriched the technical power of web programmers, the past only CS software to achieve the function, not only realized, but also more perfect and efficient.

Embrace AJAX embrace Web 2.0 you can do better!

Download

Click to download source code