Application of zedgraph graphical controls in Web Development

Author: Dreamliner

Email: jupiter@yeah.net

Introduction

Zedgraph is a powerful graphic control that allows you to create 2D curves, bars, and pie diagrams based on any dataset. It can be either in Windows form or in ASP. net web form. Zedgraph has a high degree of flexibility. We can customize almost every aspect of the image and provide default values for all features, so we can get started quickly. Zedgraph is compatible with. NET 2.0 and Visual Studio 2005.

This article describes how to use the updatepanel, zedgraph control, and Web Service technology in Visual Studio 2005 to develop a simple real-time monitoring web application, we will present the simulated data to users in real time. At the same time, we will use web services instead of full-page backhaul to control certain parameters to improve user experience.

Use Visual Studio 2005 to create a new website

Select File> new web site in Visual Studio 2005. The dialog box shown in Figure 1 is displayed. select ASP. net Ajax-enabled web site template (note: in Visual Studio 2005, You need to download the aspajaxextsetup package to see this template). Here we use file system, name the website zedgraphdemo and click OK.

Figure 1 create an ASP. NET Ajax-enabled website

Add zedgraph control to toolbox

Right-click the blank area of the Toolbox panel and choose items ..., In the pop-up choose toolbox items dialog box, click the Browse button to go to The zedgraph. Web. dll Assembly file (this article uses zedgraph_dll_v5.1.2.880 ).

Switch to default. in the design view of aspx, drag and drop the updatpanel and timer from the toolbox. (Note that the timer control must also be placed inside the updatepanel control. Otherwise, it will cause the whole page to be returned, rather than the part we want to return) and the zedgraphweb control, the design view should look like Figure 2 at this time. Set the interval attribute of timer1 to 1000, that is, refresh every second.

Figure 2 Design view

Zedgraph control attribute settings

Zedgraph allows you to modify attributes of a graph in multiple ways. You can also use the Visual Studio attribute panel for visual modification, or use programming methods to modify the source code. The attributes listed in Table 1 are all set through the Visual Studio attribute panel.

Height	300
Width	400
Renderedimagepath	~ /Zedgraphimages/
Chartfill. Color	Black
Chartfill. Type	Solid
Tmpimageduration (Gets or sets a value that determines the duration (in hours) of a temporary file generated by control in mode "imagetag ")	0 Note that the unit here is hour. If you are not careful, a lot of junk files will be generated on the server side.

Table 1 set the zedgraph control using the Visual Studio attribute panel

In the solution browser, right-click the project, select new folder, and name it zedgraphimages. zedgraph uses this folder to store the images presented to the client. This folder must be added.

Data Model

Add a datasource. CS file and use it to simulate the displayed data. When adding the source file, Visual Studio will prompt whether to create the app_code folder and select "yes. This folder is used to store source files. when building a website application, Visual Studio automatically compiles the source files. Note that we use the pointpairlist type, so we need to use using zedgraph; To introduce the zedgraph namespace. The source code is as follows:

Here we only use random numbers for simulation.

Namespace datamodal

{

Public class datasource

{

Private datasource () {datapoints = 101 ;}

Public static readonly datasource instance = new datasource ();

Private random ran = new random ();

// Store the sample data

Public pointpairlist databuffer = new pointpairlist ();

/// <Summary>

/// Trigger a sampling and obtain the sample data

/// </Summary>

/// <Param name = "datas"> </param>

Public void getdata ()

{

Double [] ydata = new double [datapoints];

// Obtain the sample data

For (INT I = 0; I <datapoints; I ++)

{

Ydata [I] = 100 * ran. nextdouble ();

}

// Fill the buffer

Double [] xdata = new double [datapoints];

For (INT I = 0; I <datapoints; I ++)

{

Xdata [I] = I;

}

Databuffer = new pointpairlist (xdata, ydata );

}

/// <Summary>

/// Number of sampling points

/// </Summary>

Private uint32 datapoints;

Public uint32 datapoints

{

Get {return datapoints ;}

Set {datapoints = value ;}

}

}

}

Drawing

1.Introduce namespace

In the default. aspx. CS file, to use services provided by zedgraph and data sources, you need to introduce their name controls, including using system. Drawing; using zedgraph. Web ;.

2.Add static domain

Add two static members to the _ default class, representing the curves and Data Source objects respectively. The reason why static variables are used is that we want all customers to see the same data.

Static lineitem mycurve;

Static datamodal. datasource OSC = datasource. instance;

3.Subscribe to the zedgraph control rendergraph event

Now we have prepared the data sources. How can we use zedgraph to display them? In fact, it is very easy to subscribe to its rendergraph event. On the Properties Panel of the zedgraph control, select the "event" option and double-click the rendergraph entry. Visual Studio automatically creates an event processor for us. Open the default. aspx. CS file and you can see an empty
Protected void zedgraphwebjavasrendergraph (zedgraph. Web. zedgraphweb webobject, system. Drawing. Graphics g, zedgraph. masterpane pane ){}
There we are waiting for us. Zedgraph provides you with a masterpane instance. By default, it contains a masterpane instance, which can be accessed through pane [0.

Before setting various attributes of a curve, let's take a look at which attributes zedgraph provides for us to better control the display of the curve (note: this section explains the help document from the visifire Graphic Control (an open-source Silverlight control). At first, to understand the meaning of these parameters, I spent a lot of effort viewing the help document of zedgraph, if zedgraph can also be attached with such a picture, it would be nice. For Web applications, visifire has better performance than zedgraph. In zedgraph, we obtain data from the server and display the data in the graph. Then, the image is sent to the client and displayed in the browser. The load on the server is relatively large. If we can obtain data by calling the Web service method, and then analyze and process the data on the client and present it to the user, the server load will be greatly reduced. Which method should be used to analyze specific issues and balance the servers with customers .)

Figure 3 shows various graphic control attributes in visifire. Although they are represented in visifire, zedgraph also provides these attributes. Table 2 briefly describes the meaning of the attribute. Note that the attribute values of X and Y axes can be set separately.

Figure 3 coordinate axis control attributes

Scale. Max	Maximum scale value
Scale. Min	Min scale value
Majorstep	The scale step size for this scale (the increment between labeled axis values) The step value of the scale, that is, the number of values to mark at intervals. If the scale is 0, 1, 2 ,... 100, and you want to display 10 main TiC (Major TiC), you can set majorstep to 10, that is, each 10 data shows a master scale.
Scale. basetic	The scale value at which the first major tic label will appear Specifies the position marked by the first primary scale label.
Majorgrid. isvisible	Visible grid lines
Majorgrid. Color	Grid line color
Majorgrid. dashoff	The dash off length is defined in points (1/72 inch) Set it to 0 to show the solid line effect.
Scale. Mag	Scale multiplication factor, that is, if the reading on the coordinate axis isX, The actual value isX * 10mag

Table 2 meaning of each coordinate axis attribute

In the zedgraphweb1_rendergraph method, set various attributes and add the curve to mypane. zedgraph will help us complete the remaining painting.

Protected void zedgraphwebjavasrendergraph (zedgraph. Web. zedgraphweb webobject, system. Drawing. Graphics g, zedgraph. masterpane pane)

{

Graphpane mypane = pane [0];

// Start X axis scale setting

// Range of X axis coordinates

Mypane. xaxis. Scale. max = datasource. instance. datapoints-1;

Mypane. xaxis. Scale. min = 0;

// Where does the first master scale start?

Mypane. xaxis. Scale. basetic = 0;

// X axis main step value

Mypane. xaxis. Scale. majorstep = (datasource. instance. datapoints-1)/10;

// Whether the x-axis reading is visible

Mypane. xaxis. Scale. isvisible = true;

// Set the multiplication factor of the abscissa, for example, ^ 1,

// Mypane. xaxis. Scale. Mag = 1;

// Start y axis coordinate settings

// Set the range of Y axis coordinates

Mypane. yaxis. Scale. max = 110;

Mypane. yaxis. Scale. min = 0;

// Where does the first master scale start?

Mypane. yaxis. Scale. basetic = 0;

// X axis main step value

Mypane. yaxis. Scale. majorstep = 10;

// Whether the x-axis reading is visible

Mypane. yaxis. Scale. isvisible = true;

// Add a grid line

Mypane. xaxis. majorgrid. isvisible = true;

Mypane. yaxis. majorgrid. isvisible = true;

Mypane. xaxis. majorgrid. Color = color. lightgray;

Mypane. yaxis. majorgrid. Color = color. lightgray;

Mypane. yaxis. majorgrid. dashoff = 0;

Mypane. xaxis. majorgrid. dashoff = 0;

// Add a curve

Mycurve = mypane. addcurve ("curve chart", OSC. databuffer, color. Yellow, symboltype. None );

}

4.Subscribe to the tick event of the timer control

In the tick event processor, we only need to get the data and then trigger the drawing event. As for how to draw the event and hand it over to zedgraph for processing, isn't it very easy.

Protected void timereffectick (Object sender, eventargs E)

{

// Obtain and fill in data

Datasource. instance. getdata ();

// Trigger the drawing event

This. zedgraphweb1.axischanged = true;

}

5. Verify

Now try to run your zedgraphdemo website application. It looks like Figure 4:

Figure 4 running effect after the first attempt

Use web services to control data sources

First, add a web service entry. In the dialog box shown in figure 5, select the Web Service template and name it webcontrolservice.

Figure 5 add a web service entry

Add two methods to the webcontrolservice. CS file to obtain and set the sampling points respectively. To be able to operate datasource, You need to introduce the name control datamodal. To use JavaScript scripts on the client to call our web services, you need to apply the [scriptservice] feature for the webcontrolservice class. You also need to add using system. Web. Script. Services ;. In addition, we also need to register our web service in scriptmanager. The final scriptmanager is as follows:

<Asp: scriptmanager id = "scriptmanager1" runat = "server">

<Services>

<Asp: servicereference Path = "webcontrolservice. asmx"/>

</Services>

</ASP: scriptmanager>

[Webmethod]

[Scriptmethod]

Public void setpoints (string points)

{

Datasource. instance. datapoints = convert. touint32 (points );

}

[Webmethod]

[Scriptmethod]

Public uint32 getpoints ()

{

Return datasource. instance. datapoints;

}

Add a label and text box to the defualt. aspx file for you to enter the sample point setting value.

<Asp: literal id = "literal1" runat = "server" text = "sampling points"> </ASP: literal> <br/>

<Input id = "txtpoints" type = "text" onchange = "ontxtpointsvaluechange ()"/>

To respond to user input, we need to add a Javascript script file script. js and introduce it in default. aspx (Add the following code in the <SCRIPT type = "text/JavaScript" src = "script. js"> </SCRIPT> ).

Run the zedgraphdemo application again. This time it looks like Figure 6:

Figure 6 Final Running Effect

At this point, you can enter the number of sampling points in the text box, for example, 120 (no input validation function is added, so do not bother yourself), and click elsewhere to make the text box lose the input focus, then, let's look at it again. Does the number of sampling points change to 120?

Of course, this is just a simple demo program. On this basis, you can add other interesting functions for it. Here I just explained several important curve configuration parameters in zedgraph. Of course, you can also use hundreds of other zedgraph attributes to make the graphic display more beautiful.

The program source code can be downloaded here...

I hope this article will help you.

Mourning for the victims of the Wenchuan earthquake in Sichuan... Postscript

Here we use the updatepanel control to obtain partial refresh results, but to use it in a project, we must evaluate it before deciding whether to use it. Using JavaScript scripts to call web services should be a different option for updatepanel in most cases.

It took me nearly five hours to write such a long article for the first time. I want to complete the demo according to the above steps, but if there is still a problem, you can download the entire project, and leave a message or email to contact me.