Use RenderMode.RawImage in a web page
From ZedGraphWiki
NOTE: The code on this page is for ZedGraph version 5. You can view the code for version 4 here.
The following is an example that shows how to use a ZedGraphWeb control in a web page with RenderMode="RawImage". We will create a web page called 'mypage.html', and include a ZedGraphWeb control. The following is what the page will look like:
To use this example, you will need to have the three files included below, plus a 'bin' directory containing the zedgraph.dll and zedgraph.web.dll files. All these files should be together in the same directory. Here's a list of the files:
- mypage.html
- mygraph.aspx
- mygraph.aspx.cs
- bin/zedgraph.dll
- bin/zedgraph.web.dll
Contents |
First, create your html page
The following is the contents of mypage.html, a simple example of a page that includes a ZedGraphWeb control
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<p>
Here is an ordinary HTML page that includes some html tags,
plus a ZedGraphWeb control rendered in RawImage mode.<br />
In raw mode the image is generated and sent to the browser on the fly
(right click the image, select properties and look at the URL).<br /><br />
<img src="mygraph.aspx" /><br /><br />
Of course, you can place other items on the page as well.
</p>
</body>
</html>
Second, create an aspx page for the graph called mygraph.aspx
The following is the entire contents of the mygraph.aspx file:
<%@ Page Language="c#" Inherits="ZG1.graph" CodeFile="mygraph.aspx.cs" %> <%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %> <ZGW:ZEDGRAPHWEB id="ZedGraphWeb1" runat="server" width="500" Height="375" RenderMode="RawImage" />
This file uses the newer syntax for the .Net 2.0 version.
SPECIAL NOTE: If you include any other html tags, particularly before the ZEDGRAPHWEB tag, then you won't be able to see the graph. This page needs to be devoted entirely to the ZEDGRAPHWEB tag.
Third, create a codefile to generate the graph
The following file, mygraph.aspx.cs, is an example that generates a bar chart:
using System;
using System.Drawing;
using ZedGraph;
using ZedGraph.Web;
namespace ZG1
{
/// <summary>
/// Summary description for graph.
/// </summary>
public partial class graph : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.ZedGraphWeb1.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);
}
#endregion
/// <summary>
/// This method is where you generate your graph.
/// </summary>
/// <param name="masterPane">You are provided with a MasterPane instance that
/// contains one GraphPane by default (accessible via masterPane[0]).</param>
/// <param name="g">A graphics instance so you can easily make the call to AxisChange()</param>
private void OnRenderGraph(ZedGraphWeb zgw, System.Drawing.Graphics g, ZedGraph.MasterPane masterPane)
{
// Get the GraphPane so we can work with it
GraphPane myPane = masterPane[0];
myPane.Title.Text = "Sales By Region";
myPane.XAxis.Title.Text = "Region";
myPane.YAxis.Title.Text = "Gross Sales, $Thousands";
PointPairList list = new PointPairList();
PointPairList list2 = new PointPairList();
PointPairList list3 = new PointPairList();
Random rand = new Random();
for ( double x=0; x<5; x+=1.0 )
{
double y = rand.NextDouble() * 1000;
double y2 = rand.NextDouble() * 1000;
double y3 = rand.NextDouble() * 1000;
list.Add( x, y );
list2.Add( x, y2 );
list3.Add( x, y3 );
}
BarItem myCurve = myPane.AddBar( "Blue Team", list, Color.Blue );
BarItem myCurve2 = myPane.AddBar( "Red Team", list2, Color.Red );
BarItem myCurve3 = myPane.AddBar( "Green Team", list3, Color.Green );
myPane.XAxis.MajorTic.IsBetweenLabels = true;
string[] labels = { "Africa", "Americas", "Asia", "Europe", "Australia" };
myPane.XAxis.Scale.TextLabels = labels;
myPane.XAxis.Type = AxisType.Text;
myPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);
myPane.Chart.Fill = new Fill(Color.White, Color.LightGoldenrodYellow, 45.0f);
masterPane.AxisChange(g);
}
}
}
