This article is written for Silverlight 1.1.
Objective:
This Silverlight demo explains how we draw a graph using Silverlight dynamically by getting data from SQL Server 2005 using Ajax and LinQ. Secondly once the graph is drawn, when the user moves the mouse on the elements of the graph, another call is made to SQL server to get the details pertaining to the element. By doing this we will simulate drill-down-effect in the graph.
Before you start:
• Install Visual Studio 2008. (http://msdn2.microsoft.com/en-us/vstudio/default.aspx)
• Install Silverlight 2.0 (http://silverlight.net/)
• Use if IE 7 preferred
• Install Sql Server 2005 http://www.microsoft.com/sql/downloads/trial-software.mspx
• For the purpose of this demo please reduce the security level of you browser as we will be coding Ajax calls via JavaScript.
For introduction to all the technologies used in this demo please visit the following
Silverlight
http://silverlight.net/GetStarted/
http://msdn2.microsoft.com/en-us/library/bb404713.aspx
Expression Blend at http://silverlight.net/GetStarted/
AJAX
http://asp.net/ajax/
http://www.w3schools.com/ajax/default.asp
LinQ
http://msdn2.microsoft.com/en-us/netframework/aa904594.aspx
http://msdn2.microsoft.com/en-us/vcsharp/aa336746.aspx
SQL Server 2005
http://www.microsoft.com/sql/downloads/trial-software.mspx
(BI related components of SQL Server 2005 are not required for this demo)
Demo Explained
Before we start the demo lets have a look at the output
(Fig -1 )
As you see in fig-1 the bars in the graph will be drawn using data from SQL Serer. Once mouse is moved over any of the “blue” bars, second Ajax call will be made to get more information about the item and display in the table below (table with “Yellow” heading”)
Let’s now dig into the code.
Section 1 :
Create a sample data base and a sample table as given with the source code.
Section 2
Before we create the Silverlight project , we need to create an Aspx server which will give us data.
Hence create the server with sample code below by creating a new ASP.net project.
string requestString = "";
requestString = HttpContext.Current.Request.QueryString["Value"];
if (requestString.Trim() == "GetSummary")
{
LinQSqlDataContext dbCon = new LinQSqlDataContext();
var myQuery = from r in dbCon.ProjectResourceLists
group r by r.RollOnDate into g
select new { RollOnDate = g.Key, RecourceCount = g.Count() };
Response.Write("<table>");
foreach (var rec in myQuery)
{
Response.Write("<tr>");
Response.Write("<td>");
Response.Write(rec.RollOnDate);
Response.Write("</td>");
Response.Write("<td>");
Response.Write(rec.RecourceCount);
Response.Write("</td>");
Response.Write("</tr>");
}//foreach
Response.Write("</table>");
}
else
{
LinQSqlDataContext dbCon = new LinQSqlDataContext();
DateTime receivedDate = Convert.ToDateTime(requestString);
var myQuery = from r in dbCon.ProjectResourceLists
where r.RollOnDate == receivedDate
select r ;
Response.Write("<table border=1>");
Response.Write("<tr bgcolor=rgb(255,255,0) >");
Response.Write("<td>");
Response.Write("Emp #");
Response.Write("</td>");
Response.Write("<td>");
Response.Write("Emp Name");
Response.Write("</td>");
Response.Write("<td>");
Response.Write("Join Month");
Response.Write("</td>");
Response.Write("<td>");
Response.Write("Level");
Response.Write("</td>");
Response.Write("<td>");
Response.Write("Roll On Date");
Response.Write("</td>");
Response.Write("</tr>");
foreach (var rec in myQuery)
{
Response.Write("<tr>");
Response.Write("<td>");
Response.Write(rec.EmpID);
Response.Write("</td>");
Response.Write("<td>");
Response.Write(rec.EmpName);
Response.Write("</td>");
Response.Write("<td>");
Response.Write(rec.JoinMonth);
Response.Write("</td>");
Response.Write("<td>");
Response.Write(rec.Level);
Response.Write("</td>");
Response.Write("<td>");
Response.Write(rec.RollOnDate);
Response.Write("</td>");
Response.Write("</tr>");
}//foreach
Response.Write("</table>");
}
Create an instance of LinQ designer by
Rght click addexisting item LinQ to SQL Classes.
Refer this newly added class to your sample database in the LinQ designer.
Run the page and see that it works with “GetSummary” as query string.
Section 3 :
1. Create a new Silverlight project in VS 2008. ( refer to the code given with this demo)
2. Create a < div> in TestPage.html , this is the div which will host the Silverlight control.
3. Call javascript : drawGraph() ( see attached code )
4. drawGraph() will get data from out Aspx server and store it in an array using Ajax.
5. Now call the createSilverlight() function this will actually draw the Silverlight control.
6. The createSilverlight() is referring to Page.xaml , this the the source from which Silverlight will know what to render.
7. On page load of the silverlight control we call drawlabels() and drawValuebars()
8. Lets examine drawValuebars () in more detail.
axmlBars = "<Rectangle Name='" + Labels[j].toString() + "' " +
"Width='10' " +
"Height='" + newRectangleHeight.toString() + "' " +
"Fill='Blue' " +
"Canvas.Left='" + (10+scaleGap).toString() + "' " +
"Canvas.Top='" + (10 + (yAxisWidth - newRectangleHeight)).toString() + "' " +
"MouseEnter='mouseEnter' />";
_base.children.add(control.content.createFromXaml(axmlBars));
9. the axmlBars string is the dynamic xaml we are creating
10. the _base.clildren.add is to add the object into the existing Silverlight control.
11. Notice that there is a mouse move event declared while creating the blue bars.
12. On mouse over of this blue bar another Ajax call is mode by mouseEnter() which fetches data from the our Aspx server pertaining to that Bar.
Attachments :
(1) Source Code : SourceCode-SilverLight-Ajax-Linq.zip
(2) Presentation : Presentation-SilverLightAJAXLinQInAction.zip