Binding MS Chart Control to LINQ Data Source Control

Build SOA applications on the Microsoft platform in this hands-on with this book and eBook

Introduction

LINQ, short for Language Integrated Query, provides an object oriented approach to not only querying relational databases but also any kind of source such as XML, Collection of objects, etc. LINQ to SQL provides (O/R) object-relational mapping and Visual Studio 2008 IDE provides a (O/R) designer. Visual Studio 2008 also has a web server control called LinqDataSource control. This control requires a DataContext which is provided by the LINQ-to-SQL classes, a class generator that maps SQL objects to the model. Without this control one may have to generate the classes from scratch or by using the SQLMetal.exe utility which generates tables and columns. The readers may benefit by reading my  previous article on Displaying SQL Server Data using a Linq data source. We will continue to use the PrincetonTemp table used in the previous article on MySQL Data Transfer using Sql Server Integration Services. We will map this table to LINQ via LinqDataSource Control and then use it as the source of data for the chart.

Create a Framework 3.5 Web Site project

Open Visual Studio 2008 from its shortcut on the desktop. Click File | New | Web Site...(or Shift+Alt+N) to open the New Web Site window. Change the default name of the site to a name of your choice (herein PieChartWithLinq) on your local web server as shown. Make sure you are creating a .NET Framework 3.5 web site as shown here. This is very similar to creating a web site that can reside on the file system.

WCF Multi-tier Services Development with LINQ

Add a LinqDataControl and provide the data context

Drag and drop a LinqDataSource control from Toolbox | Data shown in the next figure on to the Default.aspx

WCF Multi-tier Services Development with LINQ

This creates an instance of the control LinqDataSource1 as shown.

WCF Multi-tier Services Development with LINQ

The source page Default.aspx will display the  control as shown in the next figure.

WCF Multi-tier Services Development with LINQ

When you try to configure a data source for this control using the smart tasks (see Figure 3) the program would take you to a window which does not allow you create a new data context. But if there are existing items the program allows you to choose.

Create a data context for the LinqDataSource control

We will add a new data context. Right click the web site in Solution Explorer and pick Add New Item... from the drop-down menu. This opens the Add New Item window as shown. Highlight the item Linq to SQL Classes in the Add New Item window. Replace the default name DataClasses.dbml with one of your own. Herein it is replaced with Princeton.dbml.

WCF Multi-tier Services Development with LINQ

When you click OK after renaming you will get a Microsoft Visual Studio warning as shown. Read the message on this window.

WCF Multi-tier Services Development with LINQ

Click Yes to add Princeton.dbml consisting of two items to the App_Code folder on the web site project as shown. One is a layout designer and the other a code page.

WCF Multi-tier Services Development with LINQ

The (O/R) designer containing two panes is shown in the next figure. In the left pane you drag and drop table (s) from the server explorer assuming you a made a connection with a database. To the right you can add a stored procedure from the server explorer. Read the instructions on this page.

WCF Multi-tier Services Development with LINQ

Click (View | Server Explorer) to display the connections in the server explorer as shown. In the next figure you can see the expanded node of TestNorthwind displaying the table PrincetonTemp in the SQL Server 2008 Hodentek2Mysorian. The database and the server names are the ones used for this article and you may have different names in your machine. The connection used is already present but you can create a new connection in the server explorer window if you choose to do so.

WCF Multi-tier Services Development with LINQ

Drag and drop the PrincetonTemp table to the left pane of the (O/R) designer as shown. Build the project. This will make the objects available for the LinqDataSource1 on the default page.

WCF Multi-tier Services Development with LINQ

Configuring the LinqDataSource control

Click on the Smart tasks of the LinqDataSource1 on the Default.aspx page. In the drop-down click on the Configure Data Source...menu item. This opens the "Choose a Context Object" of the Configure Data Source wizard as shown. It has the reference to the new data context item we added earlier. It has concatenated DataContext to the item name we chose.

WCF Multi-tier Services Development with LINQ

Click Next. The Configure Data Selection page of the wizard gets displayed as shown displaying the PrincetonTemp table and its fields. Select all fields by placing check marks. For this tutorial we will not need any of the filtering and ordering that you can carry out on this page.

WCF Multi-tier Services Development with LINQ

Click Finish. We will be returned to the LinqDataSource control instance. The Data Context wizard has created the objects for the PrincetonTemp table as shown in the next figure for the PrincetonTempDataConext class (Princeton.designer.vb). The picture shows a partial view of the code page with collapsed nodes. The reader should expand the nodes to study how the designer has defined the classes.

WCF Multi-tier Services Development with LINQ

Binding the chart to data

Drag and drop a chart control from Toolbox under Data to the Default.aspx page as in the previous cited articles. Associate a data source to this chart by choosing LinqDataSource1 as shown in the next figure. After choosing LinqDataSource1 refresh the schema.

WCF Multi-tier Services Development with LINQ

Click on the chart control to open the properties Window. Click on the line item for Series (Collection) in the Chart Properties window. This opens the Series Collection Editor where you can set the Chart type by picking Pie from the drop-down as shown.

WCF Multi-tier Services Development with LINQ

This immediately gets reflected in the design which changes from the default Chart Type Column to Pie. In the Pie chart we will be plotting the current year's temperature from January to December on a circle "Pie" with each month's temperature occupying a wedge whose area is proportional to the value it represents. The data for Month is (of XValueType is therefore) "String" and the data for "Temperature" is (of YValueType is of type Int32) integer. We make these choices in the Data node of the window as shown.

WCF Multi-tier Services Development with LINQ

In the same window you associate the XValueMember with "Month" as shown. Make sure that Series 1 shows under Members: on the left, sometimes it has been noticed that the Series 1 is not displayed in the left although the right panel displays Series 1.

WCF Multi-tier Services Development with LINQ

In the same window associate the YValueMembers with "Temperature" by clicking on it in the drop-down menu and click OK. With these changes to the properties of the chart, the design view of the chart on the Default.aspx page appears as shown in the next figure.

WCF Multi-tier Services Development with LINQ

Displaying the chart

Build the project and bring up the Default.aspx in either the internal browser or the IE browser. The chart gets displayed as shown in the next figure.

WCF Multi-tier Services Development with LINQ

Listing 1: Default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 
Inherits="_Default" %>

<%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="PrincetonDataContext" TableName="PrincetonTemps"
Select="new (Month, Temperature, Id, RecordHigh)">
</asp:LinqDataSource>
<asp:Chart ID="Chart1" runat="server" DataSourceID="LinqDataSource1">
<series>
<asp:Series ChartType="Pie" Name="Series1" XValueMember="Month"
YValueMembers="Temperature" XValueType="String"
YValueType="Int32">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
</form>
</body>
</html>

It is also very easily possible to change the 2D chart type to 3D chart type in the design stage as suggested in the next figure.

WCF Multi-tier Services Development with LINQ

In default the x values of "Pie" are shown inside the wedges but this can be changed to be shown outside by configuring the PieLabelStyle property in the "Misc" node in the Series Collection Editor window. It can also be altered at run time. However this is not aesthetically pleasing as shown in the next displayed chart on the browser.

WCF Multi-tier Services Development with LINQ

Summary

Binding the MS Chart Control to a LinqDataSource control for a simple example like this is very similar to that of SqlDataSource control. The IDE provides a stable environment for creating the Linq to SQL classes very easily through its wizard. Although most of the times the chart has no problem in displaying I have come across instances of exceptions while the program tries executing ChartImg.axd component. The work around is to close Visual Studio and start afresh. In these instances you may sometimes notice that the Series Editor is not displaying correctly.

Books to Consider

comments powered by Disqus