SITEMAPPED WEB DIRECTORY » Article Details
Realize Data Display With HighCharts |
|
| Date Added: June 14, 2018 06:01:10 PM | |
| Author: Deborah Crowley | |
| Category: Computers: Software | |
| In many industrial control systems, real-time data such as temperature, pressure, and torque are often collected in real-time. These data are of great guiding value for monitoring personnel to perform on-site situational awareness and to predict future trends. If the engineering control personnel only read a large amount of data reports, it will be very difficult to control the entire situation of the site. Therefore, it is often desired to display with some charts, of which the trend chart is one of the commonly used real-time data display methods. At present, many tools for realizing trend graphs and graphs are also mature. Some of them are developed through the CS model. The software must be installed on the computers operated by engineering control personnel. This method has its own unique advantages, but sometimes it is inconvenient. local. So some of the modes based on the BS mode are naturally applied widely. Using the BS mode of presentation The engineering control personnel can use any available PC that can connect to a Web server to view various index parameters of the current environment in real time file replication windows time through a common browser. The convenience is obvious. Now I will introduce the real-time data display curve of this BS mode. Since the purpose of this article is not to implement an application product that is available in the field environment, it is only to explain the involved technology and play a guiding role. Therefore, the reference person should optimize the code used in this article according to the actual needs of his project. There are many options for implementing trend graphs and graphs through the BS system. This article is mainly implemented through Highcharts.com's Highcharts API package. Since this package is implemented via JS scripting, individuals think that the adaptation surface may be better relative to it, and of course, such tools as jFreeChart are also achievable. Closer to home, let's explain how to use the Highcharts API to implement trend graphs on the page. First of all, we need to simply plan the architecture of our system. Due to the realization of the trend graph of real-time data, the system can be roughly designed into three layers: display layer, logic layer, and data source. As shown below: The display layer is the presentation page that presents data to the engineering control personnel. This layer is mainly composed of JSP, JS, CSS and other files. The engineering control personnel can directly see the desired graph through the browser (such as IE, Firefox, etc.). . The display layer is only responsible for displaying, and the data required for display is after certain cleaning and normalization. After the display layer gets the data conforming to the standardization requirements, it can directly display and respond to human interaction. The data cleaning and normalization work is implemented in the logic layer. The logic layer performs necessary data logic conversion, data cleaning, and data normalization processing through the acquired data source information. Data source is a complex and important, it can be directly from the lower computer data communication, it can be lower machine to store data in the intermediate database, it can be a series of data files. In this article, it is only an analog data source, and it does not implement data source reading. Corresponding logical layer processing has also been ignored. This part of the content is related to the specific data acquisition, cleaning, conversion, and standardization, and has a greater relationship with the needs of specific project projects, and is not the center of this plan, so this Part of the code design to achieve this article is not involved. The implementation of the display layer involves JSON, JQuery, and Highcharts. We first set up a standard Web application (in fact, if you use an html file as an example, I plan to extend this case later to implement some subsequent logical layers. Functionality, therefore building a Web application project, a bit of a superfluous, but please forgive me). I use Netbeans IDE 7.2 version development (how to use Netbeans IDE to develop Web applications, please refer to my other articles), so after the completion of the project structure is as follows: To use Highcharts, we need to import the highcharts.js file. Highcharts.js file can be obtained from Highcharts official website (official website address: http://www.highcharts.com/), the compressed file downloaded from the official website contains the highcharts.js file we need for development, it also contains some other files , such as example files. | |
|
|
|