HTML Vertical Bar Chart

/// This is demo to show how HTML Vertical Bar Chart can be generated in ASP.NET 1.1, 
/// with DataTable being the Source of Data
/// Author : Neeraj Saluja 
/// Author Email : neeraj.saluja@gmail.com
/// Article Hosted on CodeProject : http://www.codeproject.com/useritems/HTMLVerticalBarChart.asp
/// Free to use and distribute
/// Created On : November 24, 2006 by Neeraj Saluja

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace HTMLVerticalChartWithASPDOTNET
{
	/// <summary>
	/// Summary description for WebForm1.
	/// </summary>
	public class Default : System.Web.UI.Page
	{
		protected System.Web.UI.WebControls.DataGrid dgTable;
		protected System.Web.UI.WebControls.Button btnDrawChart;		
		protected System.Web.UI.WebControls.RadioButtonList optSameWindow;
		protected System.Web.UI.WebControls.RadioButtonList optSeriesCount;
		protected System.Web.UI.HtmlControls.HtmlForm Form2;
	
		private void Page_Load(object sender, System.EventArgs e)
		{
			// Put user code to initialize the page here
		}

		#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.btnDrawChart.Click += new System.EventHandler(this.btnDrawChart_Click);
			this.Load += new System.EventHandler(this.Page_Load);
		}
		#endregion

		/// <summary>
		/// Populates the DataTable with Random Numbers between 0 and 500		/// 
		/// </summary>
		/// <returns>DataTable with 24 rows with values for X Axis, Y Axis Series 1 and Y Axis Series 2</returns>
		private DataTable GetDataTable()
		{
			// Getting the values from database would have been more practical, 
			//just to keep it simple			
			Random randomMgr = new Random();			

			DataTable dt = new DataTable();
			dt.Columns.Add("XAxisText",Type.GetType("System.String"));
			dt.Columns.Add("YAxisSeries1",Type.GetType("System.Int16"));
			dt.Columns.Add("YAxisSeries2",Type.GetType("System.Int16"));

			DataRow dr;
			string[] arrMonths = {"Jan 06", "Feb 06", "Mar 06", "Apr 06", "May 06", "Jun 06", "Jul 06", "Aug 06", "Sep 06", "Oct 06", "Nov 06", "Dec 06", "Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07"};
			for (int i=0; i<24; i++)
			{
				dr = dt.NewRow();
				dr["XAxisText"] = arrMonths[i].ToString();
				dr["YAxisSeries1"] = randomMgr.Next(0,500);
				dr["YAxisSeries2"] = randomMgr.Next(0,500);
				dt.Rows.Add(dr);
			}

			return dt;
		}

		/// <summary>
		/// Very Important : Convert the DataTable values into string and creates and calls javascript function-call script 
		/// </summary>
		/// <param name="dt">DataTable for Chart with values for X Axis and Y Axis</param>
		private void DrawGraph(DataTable dt)
		{
			// We will concatenate all the values in a string seperated by "|" 
			// and we will generate the desired arrays in javascript by splitting the string 
			string HorXString="", VerYString="", VerY2String="";
			
			// Manually Concatenating the First Row
			HorXString += dt.Rows[0]["XAxisText"].ToString();
			VerYString += dt.Rows[0]["YAxisSeries1"].ToString();
			VerY2String += dt.Rows[0]["YAxisSeries2"].ToString();

			// Further Concatenating all the rows except first Row
			for(int i=1; i<dt.Rows.Count; i++)				
			{
				
				HorXString += "|" + dt.Rows[i]["XAxisText"].ToString();
				VerYString += "|" + dt.Rows[i]["YAxisSeries1"].ToString();
				VerY2String += "|" + dt.Rows[i]["YAxisSeries2"].ToString();
			}		

			// Form the Client Side Script that has to be registered
			string GenerateChartScript = "<script language=javascript>";			
			GenerateChartScript += "GenerateChart('1', '" + optSeriesCount.SelectedValue.ToString() +"','" + HorXString + "','" + VerYString + "','" + VerY2String + "','" +optSameWindow.SelectedValue.ToString() +"');";
			GenerateChartScript += "</script>";

			// Renders the Script on the WebPage which in turn calls the javascript function GenerateChart
			Page.RegisterStartupScript("GenerateChartFuncationCall",GenerateChartScript);	
		}

		/// <summary>
		/// Fills DataTable with Random Values and generates the chart 
		/// </summary>
		/// <param name="sender"></param>
		/// <param name="e"></param>
		private void btnDrawChart_Click(object sender, System.EventArgs e)
		{

			// Get the DataTable filled with XAxis Text and Random Y Axis values
			DataTable dt = GetDataTable();			
			dgTable.DataSource = dt;
			dgTable.DataBind();

			// Generate the graph with the values in the table
			DrawGraph(dt);		
		}
	}
}