در این مقاله قصد داریم یک چارت Jquery زیبا را با استفاده از اطلاعات بانک اطلاعاتی بسازیم

سلام دوستان

در این مقاله قصد داریم یک چارت Jquery زیبا را با استفاده از اطلاعات بانک اطلاعاتی بسازیم

ابتدا یک بانک با نام ChartDemo بسازید

نام جدول Sales است

اسکریپت ساخت جدول هم

CREATE TABLE [dbo].[Sales]( [id] [int] IDENTITY(1,1) NOT NULL, [name] [nvarchar](50) NOT NULL, [sales] [varchar](50) NOT NULL, [expences] [varchar](50) NOT NULL, CONSTRAINT [PK_Sales] PRIMARY KEY CLUSTERED ( [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO

خب در برنامه متدی وجود داره با نام GetData که اطلاعات را از بانک اطلاعاتی واکشی کرده و به متد BindChart تحویل میدهد

DataTable dt = new DataTable(); string cmd = "select * from Sales"; SqlDataAdapter adp = new SqlDataAdapter(cmd, conn); adp.Fill(dt); return dt;

در بالای صفحه باید رفرنس زیر را اضافه کنید

<mce:script type="text/javascript" src="https://www.google.com/jsapi" mce_src="https://www.google.com/jsapi"></mce:script>

و متد بایند کردن و ساختن چارت هم در زیر آمده

DataTable dt = new DataTable(); try { dt = GetData(); str.Append(@"<mce:script type=text/javascript><!-- google.load( *visualization*, *1*, {packages:[*corechart*]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'name'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expences'); data.addRows(" + dt.Rows.Count + ");"); for (int i = 0; i <= dt.Rows.Count - 1; i++) { str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["name"].ToString() + "');"); str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["Sales"].ToString() + ") ;"); str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["Expences"].ToString() + ") ;"); } str.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));"); str.Append(" chart.draw(data,{isStacked:true, width:600, height:350, hAxis: {showTextEvery:1, slantedText:true}});}"); str.Append(" // --></mce:script>");

و در صفحه یک کامپوننت Litreral وجود داره که پس از ساخته شدن HTML نهایی چارت به آن متصل خواهد شد

<asp:Literal ID="lt" runat="server"></asp:Literal>

نمونه هم ضمیمه شده

امیدوارم خوشتون اومده باشه

موفق و پیروز باشید