Pie Chart in Silverlight with WCF - (Part 3 of Many)

So Lets start creating a web service and calling the web service in our siverlight application. We use LINQ to SQL to access data from the database. As we just said the data is will be on the server side we need to create a web service on the server side project that Visual studio created for us “PieChart.Web”. Follow the below steps to create a web service.
1. Right click on “PieChart.Web” project and click on Add Item to add a new “LINQ to SQL” file.


You can give any name to the file, but I am just going with the default name “DataClasses1.dbml”.
Click on OK, this adds “DataClasses1.dbml” file to our Web project and also opens a window where you were asked to select the database and its tables that we wanted to use for our project.


Make sure the window is named “DataClasses1.dbml” and one the left it should say “Server Explorer” . In case if you cant see this window , you can always click on “Server Explorer” link in the center of the screen.
2. Once you have the server explorer window on the left, right click on “ Data Connections” and select Add Connection. This opens the following window where you can select the type of database


Click on Continue , which opens a new window that asks us to select the database from our database server. Which looks like this,


Select the Server Name from the list and select the database from the bottom list. Click on OK that shows the database in the “Server Explorer” window to our left.
After it shows your database in the server explorer window, you select the database and go down to select the necessary database (in our case it is ExpensesDatabase) and drag the table from the left to the right window. Which will look like below.


3. As the data is at the server side and the calls are made from the client side we need to make the talking searlizable so click on the white part of the window and in the properties window select the below selected option.
Below is how your window should look after you make the connection searlizable.


4. Now that we added the database to our project, we have to add a web service that contacts the database and sends data to us. So right click on the web project “PieChart.Web” and select Add item to add “Silverlight Enabled WCF Service”. You can give any name you want to name the service but in this case I am just going with the default name.


Click on Add to add a WCF Service to your project.

5. Right after you added the WCF Service it gives you a default code that helps you to work further on it. The default code window looks like this


6. Please copy and paste the following code in the appropriate position so that we will be ready to call our web service and use the data in our PieChart.
Code:
public ExpenseTable[] GetExpense()
{
DataClasses1DataContext expenseCTX = new DataClasses1DataContext();
var expense = from exp in expenseCTX.ExpenseTables
select exp;
return expense.ToArray();
}
And after adding the above code the Service1.svc file looks like this.


7. Now that we have our WCF Done and Database done, its time to design a simple UI, with just a Button “Generate” and a Pie Chart Control to display the data.
Follow is the code that we have to put in the MainPage.XAML file in order to get the UI done.
In Silverlight the button control can be found by default but the Pie chart control is a special user control that can be only found by adding a reference to the .dll file in our Silverlight project.
Add “System.Window.Controls.Data.dll” and “System.Window.Controls.DataVisualization.dll”.
Right click on the “PieChart\References” and select Add reference and go to “Browse” tab and browse to the following path,
C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Toolkit\Jul09\Bin\System.windows.Controls.DataVisualization.dll
If you don’t see jul09 or toolkit folder, don’t panic or feel bad about it, just download the jul09 Silverlight Toolkit.

Add the following code in the “MainPage.xml” in the between the columns. StackPanel is one of the Silverlight control that stacks various other controls that are put in the , in our case we put in a Button Control and a Chart Control in the stack panel.


This is how the above code looks when you run the program,


Checkout the Address, it shows the test project “PieChart.Web” that was created by Visual Studio.
And also look at the stack panel , how it stacked the controls up, a button and a chart control.

Next Part Continues...
To See all parts for Pie Chart in Silverlight with WCF, please click on the link to the right that says it.
You can download the final version of the project and full version of the post in a word document in the final part of this post.
Please do comment or leave any suggestions or questions below, I will reply immediately. You may also leave any requests for new posts.