Binding MS Chart Control to LINQ Data Source Control

Exclusive offer: get 50% off this eBook here
WCF Multi-tier Services Development with LINQ

WCF Multi-tier Services Development with LINQ — Save 50%

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

$26.99    $13.50
by Jayaram Krishnaswamy | August 2009 | Microsoft

In this article by Dr. Jay Krishnaswamy, a Microsoft Chart Control will be bound to a Linq Data Source using LinqDataSource control and a pie chart displays the data.

We will be going through the following steps:

  • Create a Framework 3.5 web site project
  • Add a LinqDataControl and provide the data context
  • Add a MS Chart Control and bind it to the LinqDataSource

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

WCF Multi-tier Services Development with LINQ Build SOA applications on the Microsoft platform in this hands-on with this book and eBook
Published: December 2008
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

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.

LINQ Quickly A Practical Guide to Programming Language Integrated Query with C#
Published: November 2007
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Jayaram Krishnaswamy

Jayaram Krishnaswamy studied at the Indian Institute of Science in Bangalore India and Madras University in India and taught at the Indian Institute of Technology in Madras. He went to Japan on a Japanese Ministry of Education Research scholarship to complete his PhD in Electrical Engineering from Nagoya University. He was a Post-Doctoral Fellow at Sydney University in Australia; a Government of India Senior Scientific Officer at the Indian Institute of Science in Bangalore and Indian Institute of Technology at Kanpur; a Visiting Scientist at the Eindhoven Institute of Technology in the Netherlands; a visiting Professor of Physics at the Federal University in Brazil; an Associate Research Scientist at a government laboratory in São Jose dos Campos in São Paulo, Brazil; a visiting scientist at the National Research Council in Ottawa, Canada before coming to USA in 1985. He has also taught and worked at the Colorado State University in Fort Collins and North Carolina State University in Raleigh, North Carolina. He worked with Northrop Grumman Corporation on a number of projects related to high energy electron accelerators and Free Electron Lasers. These projects were undertaken at the Brookhaven National Laboratory in Long Island and in the Physics Department at Princeton University. He has over 80 publications in refereed and non-refereed publications and 8 issued patents. He is fluent in Japanese and Portuguese and lives in Honolulu, Hawaii, USA.

He has been working in IT-related fields since 1997. He was once a Microsoft Certified Trainer in Networking and a Siebel Certified developer. He has worked with several IT related companies, such as the Butler International in their Siebel practice, with several IBM sub-contractors and smaller companies. Presently he is active in writing technical articles in the IT field to many online sites such as http://CodeProject.com, http://APSFree.com, http://DevShed.com, http://DevArticles.com, http://OfficeUsers.org, http://ASPAlliance.com, Egghead Café, http://SSWUG.org, Packt Article Network, http://databasedev.co.uk, http://cimaware.com, and many others. Between 2006 and 2010 he wrote more than 400 articles mostly related to database and web related technologies covering Microsoft, Oracle, Sybase, ColdFusion, Sun, and other vendor products.

He has written four books all published by Packt related to Microsoft Database and Application Development: SQL Server Integration Services Using Visual Studio 2005, Learning SQL Server Reporting Services 2008, Microsoft SQL Azure; Enterprise Application Development, and Microsoft Visual Studio Lightswitch Business Application Development. He regularly writes for his four blogs on Blogger; http://Hodentek.blogspot.com, http://HodentekHelp.blogspot.com, http://HodentekMobile.blogspot.com, and http://HodentekMSSS.blogspot.com. He received the 2011 Microsoft Community Contributor award.

Contact Jayaram Krishnaswamy

Books From Packt

Microsoft Office Live Small Business: Beginner’s Guide [RAW]
Microsoft Office Live Small Business: Beginner’s Guide [RAW]

ASP.NET 3.5 CMS Development
ASP.NET 3.5 CMS Development

Learning SQL Server 2008 Reporting Services
Learning SQL Server 2008 Reporting Services

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Pentaho Reporting 3.5 for Java Developers
Pentaho Reporting 3.5 for Java Developers

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

Programming Microsoft Dynamics NAV 2009
Programming Microsoft Dynamics NAV 2009

C# 2008 and 2005 Threaded Programming: Beginner's Guide
C# 2008 and 2005 Threaded Programming: Beginner's Guide

 

Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
b
W
K
n
6
7
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software