Use RenderMode.ImageTag 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.5.1 here.
The following is an example that shows how to use a ZedGraphWeb control in a web page with RenderMode="ImageTag". We will create a web page called 'mypage.aspx', and include two ZedGraphWeb controls.
To use this example, you will need to have the two files shown below, plus a 'bin' directory containing the zedgraph.dll and zedgraph.web.dll files, and an empty directory called 'ZedGraphImages' which is used for caching. Here's a list of the files:
- mypage.aspx
- mypage.aspx.cs
- bin/zedgraph.dll
- bin/zedgraph.web.dll
- ZedGraphImages/
Note that the ZedGraphImages directory must be writeable by the webserver user. Although the name of this directory is 'ZedGraphImages' by default, it can be changed with the RenderedImagePath property. Also, the CacheDuration property specifies the validity of the cached image in seconds.
The ImageTag render mode actually creates an image file and stores it in the cache directory. This image file is then referenced by the automatically-generated 'img' tag that is placed in the webpage in place of the ZEDGRAPHWEB tag. The img 'src' reference includes a time property to fool the browser into reloading the image (assuming that it has changed).
The following is what the page will look like:
First, create your web page
The following is the contents of 'mypage.aspx', a simple example of a page that includes two ZedGraphWeb controls rendered in ImageTag mode:
<View the Visual Basic version of this code>
<%@ Page Language="c#" Inherits="ZG1.graph" CodeFile="mypage.aspx.cs" %>
<%@ Register TagPrefix="zgw" Namespace="ZedGraph.Web" Assembly="ZedGraph.Web" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>A Sample Page Using ZedGraph.RenderMode.ImageTag</title>
</head>
<body>
<p>
The default render mode is ImageTag, so it does not need to be
explicitly designated. The RenderMode property is included here
for clarity.<br /><br />
In this mode an IMG tag is generated in-place, and the image is
generated and saved in the specified folder (RenderedImagePath
property, default to ~/ZedGraphImages/). Two charts are included
below to demonstrate how the CodeFile can include multiple charts:
<br /><br />
<ZGW:ZEDGRAPHWEB id="ZedGraphWeb1" runat="server" RenderMode="ImageTag"
Width="300" Height="200"></ZGW:ZEDGRAPHWEB>
<ZGW:ZEDGRAPHWEB id="ZedGraphWeb2" runat="server" RenderMode="ImageTag"
Width="300" Height="200"></ZGW:ZEDGRAPHWEB>
</p>
</body>
</html>
Second, create a codefile to generate the graphs
The following file, mypage.aspx.cs, is an example that generates a bar chart and a line chart:
<View the Visual Basic version of this code>
using System;
using System.Drawing;
using ZedGraph;
namespace ZG1
{
/// <summary>
/// Summary description for graph.
/// </summary>
public partial class graph : System.Web.UI.Page
{
#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.OnRenderGraph1 );
this.ZedGraphWeb2.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler( this.OnRenderGraph2 );
}
#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>
/// <param name="z">And a ZedGraphWeb instance because the event handler requires it</param>
private void OnRenderGraph1( ZedGraph.Web.ZedGraphWeb z, System.Drawing.Graphics g, ZedGraph.MasterPane masterPane )
{
// Get the GraphPane so we can work with it
GraphPane myPane = masterPane[0];
// Set the title and axis labels
myPane.Title.Text = "Cat Stats";
myPane.YAxis.Title.Text = "Big Cats";
myPane.XAxis.Title.Text = "Population";
// Make up some data points
string[] labels = { "Panther", "Lion", "Cheetah", "Cougar", "Tiger", "Leopard" };
double[] x = { 100, 115, 75, 22, 98, 40 };
double[] x2 = { 120, 175, 95, 57, 113, 110 };
double[] x3 = { 204, 192, 119, 80, 134, 156 };
// Generate a red bar with "Curve 1" in the legend
BarItem myCurve = myPane.AddBar( "Here", x, null, Color.Red );
// Fill the bar with a red-white-red color gradient for a 3d look
myCurve.Bar.Fill = new Fill( Color.Red, Color.White, Color.Red, 90f );
// Generate a blue bar with "Curve 2" in the legend
myCurve = myPane.AddBar( "There", x2, null, Color.Blue );
// Fill the bar with a Blue-white-Blue color gradient for a 3d look
myCurve.Bar.Fill = new Fill( Color.Blue, Color.White, Color.Blue, 90f );
// Generate a green bar with "Curve 3" in the legend
myCurve = myPane.AddBar( "Elsewhere", x3, null, Color.Green );
// Fill the bar with a Green-white-Green color gradient for a 3d look
myCurve.Bar.Fill = new Fill( Color.Green, Color.White, Color.Green, 90f );
// Draw the Y tics between the labels instead of at the labels
myPane.YAxis.MajorTic.IsBetweenLabels = true;
// Set the YAxis labels
myPane.YAxis.Scale.TextLabels = labels;
// Set the YAxis to Text type
myPane.YAxis.Type = AxisType.Text;
// Set the bar type to stack, which stacks the bars by automatically accumulating the values
myPane.BarSettings.Type = BarType.Stack;
// Make the bars horizontal by setting the BarBase to "Y"
myPane.BarSettings.Base = BarBase.Y;
// Fill the axis background with a color gradient
myPane.Chart.Fill = new Fill( Color.White,
Color.FromArgb( 255, 255, 166 ), 45.0F );
masterPane.AxisChange( g );
}
/// <summary>
/// Here is a completely independent second graph. In InitializeComponent() above,
/// ZedGraphWeb1 calls OnRenderGraph1, and ZedGraphWeb2 calls OnRenderGraph2.
/// </summary>
private void OnRenderGraph2( ZedGraph.Web.ZedGraphWeb z, System.Drawing.Graphics g, ZedGraph.MasterPane masterPane )
{
// Get the GraphPane so we can work with it
GraphPane myPane = masterPane[0];
// Set the titles and axis labels
myPane.Title.Text = "My Test Date Graph";
myPane.XAxis.Title.Text = "Date";
myPane.YAxis.Title.Text = "My Y Axis";
// Make up some data points from the Sine function
PointPairList list = new PointPairList();
PointPairList list2 = new PointPairList();
for ( int i = 0; i < 36; i++ )
{
double x = new XDate( 1995, i + 1, 1 );
double y = Math.Sin( (double)i * Math.PI / 15.0 );
double y2 = 2 * y;
list.Add( x, y );
list2.Add( x, y2 );
}
// Generate a blue curve with circle symbols, and "My Curve 2" in the legend
LineItem myCurve2 = myPane.AddCurve( "My Curve 2", list, Color.Blue,
SymbolType.Circle );
// Fill the area under the curve with a white-red gradient at 45 degrees
myCurve2.Line.Fill = new Fill( Color.White, Color.Red, 45F );
// Make the symbols opaque by filling them with white
myCurve2.Symbol.Fill = new Fill( Color.White );
// Generate a red curve with diamond symbols, and "My Curve" in the legend
LineItem myCurve = myPane.AddCurve( "My Curve",
list2, Color.MediumVioletRed, SymbolType.Diamond );
// Fill the area under the curve with a white-green gradient
myCurve.Line.Fill = new Fill( Color.White, Color.Green );
// Make the symbols opaque by filling them with white
myCurve.Symbol.Fill = new Fill( Color.White );
// Set the XAxis to date type
myPane.XAxis.Type = AxisType.Date;
myPane.XAxis.CrossAuto = true;
// Fill the axis background with a color gradient
myPane.Chart.Fill = new Fill( Color.White, Color.LightGoldenrodYellow, 45F );
masterPane.AxisChange( g );
}
}
}
