Microsoft Chart with XML Data

Exclusive offer: get 50% off this eBook here
Beginners Guide to SQL Server Integration Services Using Visual Studio 2005

Beginners Guide to SQL Server Integration Services Using Visual Studio 2005 — Save 50%

An ideal book and eBook for trainers who want to teach an introductory course in SQL Server Integration Services or, to those who want to study and learn SSIS in a little over two weeks.

$23.99    $12.00
by Jayaram Krishnaswamy | October 2009 | .NET Microsoft

In this article by Dr. Jayaram Krishnaswamy, you will learn how you may display XML data using the Microsoft Chart in ASP.NET 3.5 and add title to the chart as well as the titles to the axes. You will be using both element-centric as well as attribute-centric XML data.

Introduction

SQL 2000 Server provided T-SQL language extensions to operate bi-directionally with relational and XML sources. It also provided two system stored procedures, sp_XML_preparedocument and sp_XML_removedocument, that assist the XML to Relational transformation. This support for returning XML data from relational data using the For XML clause is continued in SQL Server 2005 and SQL Server 2008 although the support for XML is lot more extensive. The shape of the data returned by the For XML clause is further modified by choosing the following modes, raw, auto, explicit, or path. As a preparation for this article we will be creating an XML document starting from the PrincetonTemp table used in a previous article, Binding MS Chart Control to LINQ Data Source Control, on this site.

Creating an XML document from an SQL Table

Open the SQL Server Management and create a new query [SELECT * from PrincetonTemp for XML auto]. You can use the For XML Auto clause to create a XML document (actually what you create is a fragment - a root-less XML without a processing directive) as shown in Figure 01.

Figure 01: For XML Auto clause of a SELECT statement

Microsoft Chart with XML Data

The result shown in a table has essentially two columns with the second column containing the document fragment shown in the next listing.

Listing 01:

<PrincetonTemp Id="1" Month="Jan       " Temperature="4.000000000000000e+001" RecordHigh="6.000000000000000e+001"/>
<PrincetonTemp Id="2" Month="Feb " Temperature="3.200000000000000e+001" RecordHigh="5.000000000000000e+001"/>
<PrincetonTemp Id="3"Month="Mar " Temperature="4.300000000000000e+001" RecordHigh="6.500000000000000e+001"/>
<PrincetonTemp Id="4" Month="Apr " Temperature="5.000000000000000e+001" RecordHigh="7.000000000000000e+001"/>
<PrincetonTemp Id="5" Month="May " Temperature="5.300000000000000e+001" RecordHigh="7.400000000000000e+001"/>
<PrincetonTemp Id="6" Month="Jun " Temperature="6.000000000000000e+001" RecordHigh="7.800000000000000e+001"/>
<PrincetonTemp Id="7" Month="Jul " Temperature="6.800000000000000e+001" RecordHigh="7.000000000000000e+001"/>
<PrincetonTemp Id="8" Month="Aug " Temperature="7.100000000000000e+001" RecordHigh="7.000000000000000e+001"/>
<PrincetonTemp Id="9" Month="Sep " Temperature="6.000000000000000e+001" RecordHigh="8.200000000000000e+001"/>
<PrincetonTemp Id="10" Month="Oct " Temperature="5.500000000000000e+001" RecordHigh="6.700000000000000e+001"/>
<PrincetonTemp Id="11" Month="Nov " Temperature="4.500000000000000e+001" RecordHigh="5.500000000000000e+001"/>
<PrincetonTemp Id="12" Month="Dec " Temperature="4.000000000000000e+001" RecordHigh="6.200000000000000e+001"/>

This result is attribute-centric as each row of data corresponds to a row in the relational table with each column represented as an XML attribute.

The same data can be extracted in an element centric manner by using the directive elements in the SELECT statement as shown in the next figure.

Figure 02: For XML auto, Elements clause of a Select statement

Microsoft Chart with XML Data

This would still give us an XML fragment but now it is displayed with element nodes as shown in the next listing (only two nodes 1 and 12 are shown).

Listing 02:

<PrincetonTemp><Id>1</Id><Month>Jan </Month><Temperature>4.000000000000000e+001</Temperature>
<RecordHigh>6.000000000000000e+001</RecordHigh> </PrincetonTemp>
...
<PrincetonTemp><Id>12</Id><Month>Dec </Month><Temperature>4.000000000000000e+001</Temperature>
<RecordHigh>6.200000000000000e+001 </RecordHigh></PrincetonTemp>

To make a clear distinction between the results returned by the two select statements the first row of data is shown in blue. This has returned elements and not attributes. As you can see the returned XML still lacks a root element as well as the XML processing directive.

To continue with displaying this data in MS Chart Save Listing 2 as PrincetonXMLDOC.xml to a location of your choice.

Create a Framework 3.5 Web Site project

Let us create a web site project and display the chart on the Default.aspx page. 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 Chart_XMLWeb) as shown. Make sure you are creating a .NET Framework 3.5 web site as shown here.

Figure 03: New Framework 3.5 Web Site Project

Microsoft Chart with XML Data

Click on APP_Data folder in the solution explorer as shown in the next figure and click on Add Existing Item… menu item.

Figure 04: Add an existing item to the web site folder

Microsoft Chart with XML Data

In the interactive window that gets displayed browse to the location where you saved the PrincetonXMLDOC.xml file and click Add button. This will add the XML file to the ADD_Data folder of the web site project.

Double click PrincetonXMLDOC.xml in the web site project folder to display and verify its contents as shown in the next figure. Only nodes 1 and 12 are shown expanded. As mentioned previously this is an XML fragment.

Figure 05: Imported PrincetonXMLDOC.xml

Microsoft Chart with XML Data

Modify this document by adding the <root/> as well as the XML processing instruction as shown in the next figure. Build the project.

Figure 06: Modified PrincetonXMLDOX.xml (valid XML document)

Microsoft Chart with XML Data

Beginners Guide to SQL Server Integration Services Using Visual Studio 2005 An ideal book and eBook for trainers who want to teach an introductory course in SQL Server Integration Services or, to those who want to study and learn SSIS in a little over two weeks.
Published: December 2007
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Binding the chart to XML data

Drag and drop a Microsoft Chart control from Toolbox under Data to the Default.aspx page as in the previous cited article. Drag and drop a button and change its Text property to Display Chart as shown.

Figure 07: Chart1 on Default.aspx page

Microsoft Chart with XML Data

Double click the button and to the button's click event insert the listing shown in the page's code.

Listing 03: Code for the button's click event

Imports System.Data

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim ds As New DataSet
'Read xml data to the dataset
ds.ReadXml("C:Documents and SettingsJayaram Krishnaswamy" & _
"My DocumentsVisual Studio 2008Chart_XMLWeb" & _
"App_DataPrincetonXMLDOC.xml")
'code used for verifying necessary strings
'Response.Write(ds.Tables(0).Columns(0).ColumnName.ToString())
'Response.Write(ds.Tables(0).Columns(1).ColumnName.ToString())
'Response.Write(ds.Tables(0).Columns(2).ColumnName.ToString())
'Response.Write(ds.Tables(0).Columns(3).ColumnName.ToString())
Chart1.DataSource = ds
Chart1.Series("Series1").XValueMember = _
ds.Tables(0).Columns(1).ColumnName.ToString()
Chart1.Series("Series1").YValueMembers = _
ds.Tables(0).Columns(2).ColumnName.ToString()
Chart1.Series.Add("Series2")
Chart1.Series("Series2").XValueMember = _
ds.Tables(0).Columns(1).ColumnName.ToString()
Chart1.Series("Series2").YValueMembers = _
ds.Tables(0).Columns(3).ColumnName.ToString()
Chart1.Series(0).Color = Drawing.Color.DarkRed
Chart1.Series(1).Color = Drawing.Color.RoyalBlue
Chart1.ChartAreas("ChartArea1").AxisX.Interval = 1
Chart1.DataBind()

End Sub
End Class

Build the web site project and browse the page on the browser. In the web page that gets displayed click on the Display Chart button. The chart gets displayed as shown in the next figure.

The dataset gets the XML document using ReadXML(). All you need to do is to point to the correct location of the XML Document. The information is parsed and provided to the proper components of the chart(Series and Columns). The commented code was used to verify that the proper association is made to the chart components.

Figure 08: PrincetonTemp Chart

Microsoft Chart with XML Data

While modifying the imported XML file make sure that you add the <root/> element otherwise you will encounter an XML exception as shown.

Figure 09: XML Exception

Microsoft Chart with XML Data

Although we started off with an element-centric XML the ReadXML() method provides the proper nodes of the XML for the chart even for attribute-centric XML Documents.

Adding titles to chart

Although data is central to a chart,titles are absoutely necessary. They can be added at design time using the properties of the chart. They can be added at run time so as to customize them. In the next subsections we will add a title to the chart and the axes as well as set the minimum and maximum values for the Y-axis.

Adding a title to the chart

The chart's title belongs to the titles collection. You first need to add the title element and then format the same providing a text; positional and size information. The following listing shows code used to add a title to the chart. The chart size was increased to 400x400 from its default 300x300 size.

Listing 4: Adding X and Y axes titles to basic chart

Chart1.Height = 400
Chart1.Width = 400
Chart1.ChartAreas("ChartArea1").AxisY.Minimum = 30
Chart1.ChartAreas("ChartArea1").AxisY.Maximum = 90
Chart1.Titles.Add("Title1")
With Chart1.Titles("Title1")
.Text = "Princeton Temperature"
.ForeColor = Drawing.Color.BlueViolet
.TextStyle = DataVisualization.Charting.TextStyle.Emboss
.Font = New Drawing.Font("Broadway", 14, Drawing.FontStyle.Bold)
.Alignment = Drawing.ContentAlignment.TopCenter
.Position.Width = 100
.Position.Height = 25
End With

Adding titles to X and Y axis (shown for X axis)

Chart axes titles are essential for any chart. The chart axes are a property of the chart areas in the MS Chart Control. All axes properties are easily accessible as shown in the next figure. For a Column type chart there are two X and two Y axes.

Figure 10: Chart axes properties

Microsoft Chart with XML Data

Code for adding and formatting the axes

The code shown in the following listing will add the titles for the X and Y axes for the basic columnar chart of Figure 09. The code snippet can be inserted in the click event of the button.

Listing 5: Adding X and Y axes titles to basic chart

With Chart1.ChartAreas("ChartArea1")
.AxisX.Title = "Month"
.AxisX.TitleFont = New Drawing.Font("Broadway", 12, Drawing.FontStyle.Bold)
.AxisX.TitleForeColor = Drawing.Color.DarkMagenta
.AxisY.Title = "Temperature in Deg F"
.AxisY.TitleFont = New Drawing.Font("Verdana", 12, Drawing.FontStyle.Bold)
.AxisY.TitleForeColor = Drawing.Color.DarkMagenta
End With

Setting the maximum and minimum values for an axis

Sometimes it may be necessary to change the displayed maximum and minimum values for the axes in order to better bring out the details and reduce the chart size. For example the program has used the default of 0 and 100 as the minimum and maximum values for the graph in Figure 08. This could be changed using the Maximum and Minimum properties of the axes as shown in the next listing.

Listing 6:Maximum and Minimum of the axes

Chart1.ChartAreas("ChartArea1").AxisY.Minimum = 30
Chart1.ChartAreas("ChartArea1").AxisY.Maximum = 90

Adding all the titles and setting the minimum and maximum as above the chart gets rendered as shown in the next figure.

Figure 11: Chart with axes and chart titles added

Microsoft Chart with XML Data

Basic Chart Code in C#

Add a web page SharpChart.aspx with language attribute for the page as C#. Use the existing PrincetonXMLDOC.xml file as the source of data. Add a MS Chart control from the Toolbox on to the SharpChart.aspx page. Add a button control as well. To the click event of the button add the code shown in Listing 6.

Listing 7:SharpChart.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;


public partial class SharpChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{


}
protected void Button1_Click(object sender, EventArgs e)
{
DataSet ds = new DataSet();
ds.ReadXml("C:Documents and SettingsJayaram KrishnaswamyMy DocumentsVisual Studio 2008Chart_XMLWebApp_DataPrincetonXMLDOC.xml");
//Response.Write(Convert.ToString(ds.Tables[0].Columns[0].ColumnName));
Chart1.Series.Add("Series2");
Chart1.Series[0].XValueMember=Convert.ToString(ds.Tables[0].Columns[1].ColumnName);
string colname = Convert.ToString(ds.Tables[0].Columns[1].ColumnName);
Chart1.Series["Series1"].XValueMember = colname;
Chart1.Series["Series2"].XValueMember = colname;
Chart1.Series["Series1"].YValueMembers = Convert.ToString(ds.Tables[0].Columns[2].ColumnName);
Chart1.Series["Series2"].YValueMembers = Convert.ToString(ds.Tables[0].Columns[3].ColumnName);
Chart1.ChartAreas[0].AxisX.Interval = 1;
Chart1.ToolTip=("Princeton's current year and record high temperatures");
Chart1.DataSource = ds;

}
}

The extra item you see in this code is Chart's tooltip property that displays "Princeton's current year and record high temperatures" when you hover over the chart.

Summary

Binding the MS Chart Control to XML data was carried out using code. Creating a dataset is all that is necessary. The XML data is obtained from an XML Document which is read with the ReadXML() method. Chart area's properties were explored while adding X and Y axes titles to the chart. Also the chart title and the range of Y axis values were set using code.

If you have read this article you may be interested to view :

 

Beginners Guide to SQL Server Integration Services Using Visual Studio 2005 An ideal book and eBook for trainers who want to teach an introductory course in SQL Server Integration Services or, to those who want to study and learn SSIS in a little over two weeks.
Published: December 2007
eBook Price: $23.99
Book Price: $39.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

ASP.NET MVC 1.0 Quickly
ASP.NET MVC 1.0 Quickly

Asterisk 1.4 – the Professional’s Guide
Asterisk 1.4 – the Professional’s Guide

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

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

Programming Microsoft Dynamics NAV 2009
Programming Microsoft Dynamics NAV 2009

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

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

Apache Maven 2 Effective Implementation
Apache Maven 2 Effective Implementation

Your rating: None Average: 1 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
H
H
Z
2
6
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