Implementation of real-time chart in ASP.NET

Implementation of real-time chart in ASP.NET

[

Traditional Chinese / BIG5] [

Simplified Chinese / GB]

Article Category: ASP.NET instances Posted: 2004-11-14 Sunday | Recommended: Website Counter Application | URL Category

Border = "0" Name = "ABC" src = "http://www.knowsky.com/mysql/manual_mysql_floss_license_exception.html" frameborder = "0" width = "336" scrolling = "no" height = "280">

Transfer from: Dynamic Network Production Guide www.knowsky.com

Zhao Weimin, Yizheng Chemical Fiber Co., Ltd., is analyzed in comparison of large quantities of data, and the most commonly used performance method is to draw trend charts. In general, we use Excel to make various types of trend charts, but they are all based on static data, that is, data is in advance instead of dynamic generation. If you are published online, you can only post the drawing chart in a static GIF image, which cannot fundamentally meet the needs of different users on different data. ASP is good at server-side Web programming, and the background database is its strength. But use ASP to make a real-time database chart is a bit difficult because the ASP itself does not support chart feature, which can only be developed with third-party controls, such as VB's MSChart control. Microsoft launched .NET Framework better solved this problem. Microsoft integrates real-time database chart production components - WEC (Microsoft Office Web Components) on the .NET platform. By calling OWC in the ASP.NET page, we can easily draw various types of real-time charts. OWC supports nearly 50 kinds of chart types, including graphs, line charts, histograms, area diagrams, K-line maps, etc. Compared with Mschart, the OWC is powerful and easy to operate. In addition, since the OWC is based on the server, Mschart can only be applied to the client, so Mschart is inferior to OWC in Web development. The following author will specifically explain the application in the ASP.NET page, this example is a subsystem in the project "Chemical Fiber Products and Raw Material Market Analysis System" developed by the author, and the author uses OWC in the project. Fully enjoy the convenience of the power of OWC to development work. The three-layer structural system integral architecture employs the B / S three-layer structural mode, divides the system into a user interface (also known as a performance layer), the business logic layer (also known as functional layer) and database service layer (also known as data Layer), the development platform uses .NET Framework, effectively reduces the system's requirements to clients, avoiding difficulties in distributing applications and version control on clients. ● User interface layer: User interface is ASP.NET technology. The application of ASP.NET technology enhances the versatility of the system, and the client needs to install any of the browsers such as IE or Netscape, without having to load any components. ● Business Logic Layer: The technology of the .NET Framework calls OWC can quickly obtain the data dynamically generated chart in the database according to the user's requirements. The system can support complex retrieval conditions, the retrieval speed is fast, and the response time is short. ● Database service layer: Database service layer can use any relational database. In this project, the author uses SQL Server, which can be seamless with .NET Framework. ADO.NET is used in data inventory. Here we will focus on the implementation of business logic layers. Introduction to the chart element, a complete chart consists of several elements, we must understand them, in order to do so, fully freely control the chart, and better understand this procedure. The author makes a simple chart, labeled the program's name and the name of the main parts and elements involved in the figure, thereby helping the reader to master the OWC and understand the code referenced herein. The source code involved in this section is taken from the "Chemical Fiber Products and Its Raw Material Market Analysis System", which is passed in the Window 2000 / XP Simplified Chinese Professional Edition, .NET FRAMEWROK 1 .0 Environment. The steps to use the OWC component are as follows: 1. Newly build a subdirectory Chart of the chart file in the current directory, simultaneously assign the "Modify" permission to the directory to the ASP.NET account.

The specific steps are as follows: Right-click the Chart directory name, select the "Properties" menu item, click the "Security" tab in the "Chart" property dialog box, then click the Add button, find ASP.NET Account, give "Modify" permissions, click the "OK" button to end. This way, ASP.NET can be written to the chart file in the chart directory. 2. Define a server-side image image control that attribute ImageURL is directed to dynamically generated chart file at the end of the program, so there is no need to assign it for it. 3. Add OWC reference. Before using OWC, you must first add an OWC's reference to the Solution Explorer. The specific steps are as follows: Open the Solution Explorer panel, right-click "Reference", select Add Reference menu, click "COM" card in the "Add Reference" dialog box, find "Microsoft Office Web Components 9.0 ", click" Select "and" OK "buttons, OWC is added to the reference. 4. Define the OWC space and add an OWC chart OWCCHART in this space. Dim Owcchartspace as owc.chartspace = new owc.chartspace () Dim Owcchart as owc.wcchart = OWCCHARTSPACE.PHARTD 5. Use SQL search criteria to retrieve the database, and assign the search results to OWCCHART in the RECORDSET dataset. OWC only supports the Recordset dataset, does not support the DataSet dataset, so you cannot use SQLCommand, SqlDataAdapter, etc. when retrieved, you can only use the RecordSet object to retrieve. 'Open the connection connector ConnADO.Open (connectionString) RecordsetADO.ActiveConnection = ConnADO' sets the cursor to a static cursor RecordsetADO.CursorType = ADODB.CursorTypeEnum.adOpenStatic RecordsetADO.CursorLocation = ADODB.CursorLocationEnum.adUseClient 'stored in the variable strSQL standard SQL search condition RecordsetADO .Open (strsql) then assigns the RecordSet data to the OWC object: OWCCHARTSPACE.DASOURCE = RecordSetado In this example, we assume that the data retrieved with the SQL statement has a total of three fields: product, date and price. The values ​​of these three fields correspond to the curves in the chart, and the data classified (X) axis and the value (Y) axis corresponds. 6. Determine the curve type and determine the field name that distinguishes different curves. First determine the type of curve is a smooth curve. OWCCHART.TYPE = OWC.CHARTCHARTTYPEENUM.CHCHARTTYPESMOOTHLINE OWC supports two or more curves in the same chart. Therefore, we must give the basis for different curves, which is the value of the "product" field. Specifically, there are several different values ​​in the Product field, and several different curves will be generated.

OWCCHART.SETDATA (OWC.CHARTDIMENSIONSENUM.CHDIMSERIESNAMES, 0, "Product") 7. Determine the field corresponding to the Classification (X) axis tag and the value (Y) axis tag. First, you need to define the set of OWCSeries to the OWC, and then traverse each curve in the chart, assign the value of the Date field to the Classification (X) axis as the X-axis scale tag, assign the value of the "Price" field to the value ( Y) axis as a Y-axis scale label. If we can determine that there is only one curve in the chart, it can also save the process of traverse, but this will undoubtedly reduce the versatility of the program. Dim owcSeries As OWC.WCSeries For Each owcSeries In owcChart.SeriesCollection owcSeries.SetData (OWC.ChartDimensionsEnum.chDimCategories, 0, "date") owcSeries.SetData (OWC.ChartDimensionsEnum.chDimValues, 0, "price") Next 8. coordinate The attribute of the axis is set. This part of the code has beautified graphic by setting the text content, color, size, main and secondary scale and its label, mainly and secondary network lines. If the reader is a bit blurred in this paragraph code, you can refer to the chart provided by the previous part. Please refer to the following code. 'First define AXIS for the coordinate axis set Dim axis as owc.wcaxis' traversal axis set for Each Axis in occhart.axes 'display axle headline AXIS.hastitle = true' First Set IF AXIS.TYPE = OWC.ChartAxisTypeEnum. chCategoryAxis Then axis.HasTickLabels = True 'shows the X-axis scale labels axis.Position = OWC.ChartAxisPositionEnum.chAxisPositionBottom' header text display position axis.Title.Font.Color label = "blue" 'X-axis color axis .Title.font.size = "9" The title text size axis.title.caption = "Date Range" The title text content ELSE 'for the value (Y) axis sets Axis.majorgridlines.Line. Color = "Silver" 'Y axis Main Network Line Colors Axis.majortickMarks = Owc.ChartTickMarkenum.chtickmarknone' does not display Y-axis main scale marker Axis.hastickLabels = true 'Display Y-axis scale label axis.title.font.color = " Blue "'Y axis title text color AXIS.TILE.FONT.SIZE =" 9 "' Y axis title text size axis.title.caption =" Price (thousands / ton) "'Y axis title text content END IF next 9. Output chart in GIF image format and assigns the image file name to the Image control.

'With a random number to generate a random file name Randomize () Dim nFileNameSuffix As Integer Dim sFileNameSuffix As String nFileNameSuffix = 100000 * Rnd () sFileNameSuffix = System.Convert.ToString (nFileNameSuffix)' output in GIF format a chart, the size of 500 * 300, The file name of the chart is: polyesterprice_ random number .GIF, store OWCCHARTSPACE.EXPORTPICTURE (MAPPATH ("Chart / PolyesterPrice_") SFileNameSuffix ".gif", "GIF", 500, 300) ' The URL of the control points to the chart file imgchart.imageURL = "chart / polyesterprice_" sfilenamesuffix ".GIF" through the above nine steps, we have completed the generation and display of a real-time database chart. It should be pointed out here that the above nine steps only generate a basic process of a chart, and can better control the generation and display mode of the chart by setting OWC's other attributes, more accurately controlling the generation and display mode, such as the legend, lines Coarse and color, coordinate axis scale and label display frequency, network line, etc. This part of the author is no longer introduced, please refer to the source code of the fourth part of this article. The chart effects generated by this document are shown below. Optimizing all real-time chart files in the above are stored in the Chart folder, because these files are not covered with each other because the random file name is used. But so much month, more and more documents not only occupy hard drive, but also hinder management and reduce performance. Can we automatically delete the previous chart file in the program? The answer is yes. As long as we place the following segment in the Page_Load () function of the code file, the program is automatically deleted when the program is running. In this way, the chart file stored in the Chart folder is always generated on the day, thereby effectively avoiding file garbage. 'First get a list of files in the Chart folder DIM FileEntries () AS String = system.io.directory.getFiles ("Chart") DIM SFILE AS STRING' Traverse File List for Each Sfile In FileEntries' Generation of files Date is compared with the system date, if it is a file generated before the day, delete it if DateTime.Compare (SFile) .addday, DateTime.Now) <0 Then System.IO.File . Delete (sfile) end if next Although the chart features generated by OWC, it is beautiful, but it also has a lot of defects. First, OWC does not support the DataSet dataset, so we cannot use the DataGrid display data table while generating the chart, unless we use the loop to remove all the data in the Recordset recordset, or use the same search criteria to perform two Secondary retrieval, but this is undoubtedly to increase the burden on the server. Second, the curve drawn in the same chart can only be the same type, or is the same as a smooth graph, or the same as a histogram, which cannot display different types of curves in the same chart. Finally, in some details, such as the setup (X) axis settings, OWC cannot provide a more detailed and user-friendly setting pathway.