Dynamic Line Charts [ASP.NET 2.0]

[kirupa]

Demo here: http://www.kirupafx.com/Chart/Default.aspx (http://www.kirupafx.com/Chart/Default.aspx) (keep refreshing for random values)

To use this, simply copy and paste the following code into an ASP page (mine was called Default.aspx / Default.aspx.cs)

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing.Text;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class Chart_Default : System.Web.UI.Page
{
Graphics gfx;
Bitmap bmp;
protected void Page_Load(object sender, EventArgs e)
{
bmp = new Bitmap(400, 300);
gfx = Graphics.FromImage(bmp);
gfx.Clear(Color.White);
gfx.SmoothingMode = SmoothingMode.AntiAlias;
// Define Points
//int[] p = new int[] { 10, 12, 48, 102, 290, 15, 100, 25, 300, 200, 150, 200, 60, 40, 250 };
int[] p = generateRandomValues();
int[] k = new int[p.Length];
Array.Copy(p, k, p.Length);
Array.Sort(k);
DrawChart(p, k[k.Length - 1], k[0]);
}
private void DrawChart(int[] points, int maxValue, int minValue)
{
int bottomOffset = 50;
int leftOffset = 40;
int topOffset = 30;
int rightOffset = 50;
// Taking care of some bookwork (declaring/initializing variables)
int maxDataPoints = points.Length;
int chartHeight = bmp.Height - bottomOffset;
int chartWidth = bmp.Width - rightOffset;
double adjustedMax = maxValue * .10 + maxValue;
double adjustedMin = minValue - .50 * minValue;
double adjustVerticalRatio = (chartHeight-topOffset) / adjustedMax;
double adjustHorizontalRatio = ((chartWidth - leftOffset) / (maxDataPoints - 1));
int space = (int)bmp.Width / points.Length;
Pen chartPen = new Pen(Color.Orange, 3);
Pen gridLine = new Pen(Color.LightGray, 1);
int minYpos = chartHeight - topOffset;
int maxYpos = 10;
for (int i = 0; i < maxDataPoints - 1; i++)
{
int xPos = Convert.ToInt32(i * adjustHorizontalRatio) + leftOffset;
int xPos2 = Convert.ToInt32((i + 1) * adjustHorizontalRatio) + leftOffset;
int yPos = Convert.ToInt32(chartHeight - adjustVerticalRatio * points[i]);
int yPos2 = Convert.ToInt32(chartHeight - adjustVerticalRatio * points[i + 1]);
if (points[i] == minValue)
{
minYpos = yPos;
}
if (points[i] == maxValue)
{
maxYpos = yPos;
}
gfx.DrawLine(gridLine, new Point(xPos2, topOffset), new Point(xPos2, chartHeight));
gfx.DrawLine(chartPen, new Point(xPos, yPos), new Point(xPos2, yPos2));
gfx.DrawString(i.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(xPos - 4, chartHeight + 10));
}
//Draw Border Lines
Pen borderLine = new Pen(Color.DarkGray, 2);
//Left Border
gfx.DrawLine(borderLine, new Point(leftOffset, chartHeight), new Point(leftOffset, topOffset));
//Bottom Border
gfx.DrawLine(borderLine, new Point(leftOffset, chartHeight), new Point(chartWidth, chartHeight));
//Right Border
gfx.DrawLine(borderLine, new Point(chartWidth, chartHeight), new Point(chartWidth, topOffset));
//Top Border
gfx.DrawLine(borderLine, new Point(leftOffset, topOffset), new Point(chartWidth, topOffset));
//Drawing Vertical Min/Max Values
gfx.DrawString(maxValue.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(leftOffset - 25, maxYpos));
gfx.DrawString(minValue.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(leftOffset - 25, minYpos));
gfx.DrawLine(gridLine, new Point(leftOffset - 25, minYpos), new Point(chartWidth, minYpos));
gfx.DrawLine(gridLine, new Point(leftOffset - 25, maxYpos), new Point(chartWidth, maxYpos));
//Finalizing and Cleaning Up
Response.ContentType = "image/jpeg";
bmp.Save(Response.OutputStream, ImageFormat.Jpeg);
bmp.Dispose();
gfx.Dispose();
Response.End();
}
private int[] generateRandomValues()
{
Random rand = new Random();
int numValues = rand.Next(10, 20);
int[] newArray = new int[numValues];
for (int i = 0; i < numValues; i++)
{
newArray[i] = rand.Next(100, 1000);
}
return newArray;
}
}
I might make a tutorial for the above for .NET or even for Flash, for they are both conceptually similar. Only the syntax varies, so it all depends on how much free time I can find between now and school starting back up :)

:nat:

[JoshuaJonah]

nice work there k-man. I'll see if i can translate it to AS if i get a coupe minutes.

[evildrummer]

Having that in AS would be usefull for flash sites to put when talking about money/similar and even though its random it wont display anything usefull but it would add somethiong cool that people would keep coming back to to check.

[gvozden]

there are good AS charts components on market

this is usefull for people want to start learning ASP