Real-time Monitoring charts using Ajax + SVG

Introduction:Ajax has been introduced in many articles. However, unfortunately, there are not many practical projects. This article describes how to use Ajax and SVG technology to create various exciting features, along with examples and source code that can run.

Preface

Ajax has been introduced in many articles. However, unfortunately, there are not many practical projects. This article describes how to use Ajax and SVG technology to create various exciting features, along with examples and source code that can run.

This article requires some Ajax and SVG knowledge and application experience. Of course, they can all be found on ibm.com/?works/cn.

My personal suggestion for Ajax applications is that if the traditional MVC can meet the needs of applications, there is no need to use Ajax instead, because the only benefit of Ajax here is that it is not refreshing. Ajax is used to help us implement functions that were previously difficult to implement using traditional Web technologies.

Technical Term

1. ajax, Ajax (Asynchronous JavaScript and XML) is a combination of multiple technologies. It uses XHTML and CSS for standardized presentation and Dom for Dynamic Display and interaction, use XML and xstl for data exchange and processing, use XMLHTTPRequest object for asynchronous data reading, and use JavaScript to bind and process all data. More importantly, it breaks through the conventional technical combination of page overloading. It can be said that Ajax has become an important weapon for web development.

2. SVG (Scalable Vector Graphic) is a standard open vector image format. It makes the webpage you designed more exciting and meticulous. Using simple text commands, SVG can even make a variety of common image effects, such as linear color changes, custom placement fonts, transparency, dynamic effects, and image effects. SVG images are based on XML (eXtensible identification language-Future Network Language) and are carefully researched and developed by the SVG development team organized by W3C.

3. DWR and DWR are open-source class libraries that help developers develop websites that contain Ajax technology. It allows the code in the browser to use Java functions running on the Web server, just as it is in the browser.

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

1. Ajax Development and Application

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

3. DWR basics. (Technical Articles and examples of the DWR framework are provided in wide wworks. This article does not detail the basic knowledge of DWR .) For example:

Http://www.ibm.com/developerworks/cn/java/j-ajax3/

Actual Effect

The best technical description is not as good as a practical example. Let's first look at the actual results. You can download the examples attached to this article and publish them to any servle server that supports jsp1.1, such as tomcat4.0, webshpere, and weblogic. Then visit the page: http: // localhost: port/ajaxsvg/dymeter. JSP. (Take Tomcat as an example. The port is 8080)

Click the start button and you will find that the chart pointer will swing in real time based on the server data. Similar to a car instrument dashboard, this is the effect achieved by CS software or flash in the past. Now we have implemented it in the form of pure web.

Technically, it is actually a dash board. In fact, it can be seen in various Bi (Business Intelligence) applications. It is inspired by the car dashboard, it intuitively reflects the status of the current data, such as being in danger, secure, or too low.

Of course, it is not new. Many software products can provide such charts. Today we will use Ajax and SVG to break through traditional applications. The images generated by software in the past are static, note that the static here means that the pointer on the images they generate will not change as the real car dashboard changes with the various data of the car, such as the speed and fuel volume changes, A user refreshes the page according to the real-time speed of the car, and the software generates an image based on the server data and then displays it to the end user.

The traditional method is sufficient for common bi applications. However, for systems with high real-time requirements, it is impossible for users to refresh the page at any time using the monitoring system, you can also use JavaScript to regularly refresh the page, which has very poor results and the server repeatedly generates images in the memory or hard disk. When the number of users is large, the system will be too heavy.

Let's leave aside the technology and think about it. We only need to change the pointer position. There is no need to generate the entire image or transmit the data of the entire image to the client. This setting is unreasonable, but it is technically difficult to complete in the past.

Now, with Ajax technology, we only need to transmit the current data and tell the dashboard where the pointer should point. There is no need to refresh pages, no need to regenerate images, and there is very little overhead on the network, server, and client. programmers who have no experience in previous solutions often cause memory overflow, the risk of using this solution is greatly reduced.

Back to Top

Principle

In fact, the principle is not complex. We use SVG to draw a dashboard, and then use Ajax technology to regularly request the server to update the data (that is, the data pointed to by the pointer). If the data is updated, the Javascript script is called to relocate the pointer of the SVG dashboard, so as to refresh the chart in real time. Describes the use of various technologies in this tutorial.

Back to Top

Code details

The example program consists of an SVG file, a JSP file, and a Java class:

• Meterremote. Java
• Meterchart. SVG
• Dymeter. jsp

First, let's take a look at meterremote. java, which generates the data pointed to by the pointer. As an example, I only generate a random data. In actual projects, it should return actual data, for example, the vehicle dashboard is the speed of the current car. In actual projects, data in actual projects can come from databases, JMS, Web Services, and ejbs.

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;}}

Then we use the DWR engine to publish the Java class so that remote Ajax applications can call the Java class method getdegree ().

Open the DWR. xml file. In the example provided in this article, you can see it and add the following code:

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

In this way, DWR releases a Java class, which can be called directly through JS on the page, which is very simple. Like most frameworks, it uses an XML file to complete its own configuration. You can use the creat tag to publish a Java class. creator = new indicates that the creation method is to create an instance through new, java classes have the same configuration, because they support spring and Struts to have different creators. Javascript = "meterremote" indicates that it is called using the meterremote object (JS object) on the page. The param label defines the name of a specific class. Using DWR, you can also specify the call permission and specific Java class methods, instead of releasing all object methods. For more configuration information, see other articles on IBM.

Restart the server and open the following address in the browser:

Http: // localhost: 8080/ajaxsvg/DWR

As shown in:

The meterremote link is displayed, indicating that the post is successful. Click the link http: // localhost: 8080/ajaxsvg/DWR/test/meterremote to view the test page, which contains how to use it, and can be called.

As shown in:

You can click excute to test the effect, so that the web page can directly call Java programs. Next let's take a look at the JSP file.

Import JS first so that:

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>

Line 2 and line 2 are the two JS files required by the DWR engine. Line 2 is the JS file required to import the DWR engine to call pojo Java.

function getValue(){ MeterRemote.getDegree(loadinfo); }

The above method obtains the pointer data of the dashboard from the server.

The focus 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 above code dynamically changes the pointer position in the SVG Graph Based on the pointer data of the dashboard obtained by remote call.

Where:

var svgDocument = window.sample.getSVGDocument();

Obtain the SVG object.

chart=svgDocument.getElementById("line2");

Get the pointer object.

chart.setAttribute( "from", last_degree+",250,250"); chart.setAttribute( "to", curr_degree+",250,250");chart.beginElement();

Remotely call the pointer data of the dashboard to dynamically change the pointer position in the SVG diagram.

Finally, let's take a look at the SVG file. below is the code part worth 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 above SVG Code defines a static pointer pointing to a 0-degree dashboard. It is defined by the <path> label. It is often produced through software, because there are a lot of software that can generate SVG charts, such as jfreechart, and the article space limit does not end the SVG chart in detail.

Back to Top

Conclusion

The principles of this example have been applied in several practical projects. The performance and effectiveness are satisfactory in terms of the user's actual use. It replaces the real-time chart monitoring function that users can use CS software in the past. Now, Ajax cannot represent the power of traditional MVC (such as Struts and JSF) frameworks, especially in the Development of Ajax tools, the development and testing efficiency is low. However, its integration with other technologies, such as SVG, often achieves unexpected results. The emergence of Ajax and various emerging Web 2.0 technologies has greatly enriched the technical strength of web programmers. In the past, only the CS software was able to implement the functions, not only but also more perfect and efficient.

Embrace Ajax and embrace Web 2.0. You can do better!