Using
Chart Control .NET with ASP.NET
|
Click
here to get sample solution for .NET Framework 1.1 (VS 2003).
Click here to get sample solution for .NET Framework 2.0 (VS 2005).
|
| It’s actually not too difficult, but little tricky. Below you can find brief
description how you can do it. |
-
Create ASP.NET where you’d like put chart image.
-
Drag and drop Web Form Image control
to
your page. The following code will appear in your YourForm.aspx file:
<asp:Image id="chartImage" style="Z-INDEX: 101; LEFT: 16px; POSITION:
absolute; TOP: 24px" runat="server" Width="464px" Height="392px"
ImageUrl=""></asp:Image>
-
Currently you can create ASP.NET page that will create actual chart. Lets name
it as CreateChartForm.aspx. You can use any query string parameters to identify
desirable chart type, its size and parameters. Put desirable URL to the
ImageUrl attribute of the <asp:Image> element in your main page.
Currently it could looks like the following:
<asp:Image id="chartImage" style="Z-INDEX: 101; LEFT: 16px; POSITION:
absolute; TOP: 24px" runat="server" Width="464px" Height="392px" ImageUrl="CreateChartForm.aspx?width=464&height=392"></asp:Image>
-
Now prepare code for CreateChartForm.aspx. This page will not have any controls
or html content on it. It will have only executable part. Below you can find C#
sample code:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;
using Manco.Chart;
namespace TestWeb
{
/// <summary>
/// Summary description for CreateChartForm.
/// </summary>
public class CreateChartForm : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
// Get char width and height from the query string
string sWidth = Request.QueryString["width"];
string sHeight = Request.QueryString["height"];
Size imageSize = new Size(200, 200);
try
{
imageSize.Width = int.Parse(sWidth);
}
catch(Exception)
{
}
try
{
imageSize.Height = int.Parse(sHeight);
}
catch(Exception)
{
}
// Create instance of the Chart Control
ChartControl control = new ChartControl();
control.HttpServer = this.Server;
control.Size = imageSize;
// In this sample I've loaded chart XML from the file system.
// You can prepare using any other way (from DataSource using XSLT or somehow else).
XmlDocument xmlChartDocument = new XmlDocument();
ResourceLoader.WebServer = this.Server;
Stream stream = ResourceLoader.GetFileStream("DemoChart.xml");
xmlChartDocument.Load(stream);
stream.Close();
// Assign chart XML document to the chart control.
control.ChartDocument = xmlChartDocument;
// Drow chart
control.Draw();
// make a memory stream to work with the image bytes
MemoryStream imageStream = new MemoryStream();
// put the chart image into the memory stream
control.Image.Save(imageStream, System.Drawing.Imaging.ImageFormat.Png);
// make byte array the same size as the image
byte[] imageContent = new Byte[imageStream.Length];
// rewind the memory stream
imageStream.Position = 0;
// load the byte array with the image
imageStream.Read(imageContent, 0, (int)imageStream.Length);
// return byte array to caller with image type
Response.ContentType = "image/png";
Response.BinaryWrite(imageContent);
// Don't forget to dispose chart control after use.
control.Dispose();
}
#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.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
|
Click
here to get sample solution for .NET Framework 1.1 (VS 2003).
Click here to get sample solution for .NET Framework 2.0 (VS 2005).
Back to main page of
.Net Chart |