ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
97 
Chapter 7 
Displaying Data in a Chart 
This chapter explains how to display data in a chart. 
In the previous chapters, you learned how to display data manually and in a grid. This chapter explains 
how to display data using the 
Chart
helper. 
What you'll learn: 
How to display data in a chart.  
How to style charts using built-in themes. 
How to save charts and how to cache them for better performance. 
These are the ASP.NET programming features introduced in the chapter: 
The 
Chart
helper.  
The Chart Helper 
When you want to display your data in graphical form, you can use 
Chart
helper. The 
Chart
helper can 
render an image that displays data in a variety of chart types. It supports many options for formatting 
and labeling. The 
Chart
helper can render more than 30 types of charts, including all the types of charts 
that you might be familiar with from Microsoft Excel or other tools — area charts, bar charts, column 
charts, line charts, and pie charts, along with more specialized charts like stock charts. 
Area chart 
Bar chart 
Column chart 
Line chart 
Create bookmarks in pdf - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
add bookmark to pdf reader; adding bookmarks to pdf document
Create bookmarks in pdf - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
pdf create bookmarks; add bookmarks pdf
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
98 
Pie chart 
Stock chart 
Chart Elements 
Charts show data and additional elements like legends, axes, series, and so on. The following picture 
shows many of the chart elements that you can customize when you use the 
Chart
helper. This chapter 
shows you how to set some (not all) of these elements. 
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; 'create optimizing options
edit pdf bookmarks; bookmark template pdf
VB.NET PDF File Split Library: Split, seperate PDF into multiple
file into multiple ones by PDF bookmarks or outlines As String = Program.RootPath + "\\" 1.pdf" Dim outputFileName 1 to (Page Count - 1). ' Create output PDF
how to add bookmarks on pdf; how to bookmark a pdf file
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
99 
Creating a Chart from Data 
The data you display in a chart can be from an array, from the results returned from a database, or from 
data that's in an XML file. 
Using an Array 
As explained in Chapter 2 - Introduction to ASP.NET Web Programming Using the Razor Syntax, an array 
lets you store a collection of similar items in a single variable. You can use arrays to contain the data that 
you want to include in your chart.  
This procedure shows how you can create a chart from data in arrays, using the default chart type. It 
also shows how to display the chart within the page. 
1.
Create a new file named ChartArrayBasic.cshtml.  
2.
Replace the existing code with the following:  
@{ 
var myChart = new Chart(width: 600, height: 400) 
.AddTitle("Chart Title") 
.AddSeries( 
name: "Employee", 
xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
yValues: new[] { "2", "6", "4", "5", "3" }) 
.Write(); 
The code first creates a new chart and sets its width and height. You specify the chart title by 
using the 
AddTitle
method. To add data, you use the 
AddSeries
method. In this example, you 
use the 
name
xValue
, and 
yValues
parameters of the 
AddSeries
method. The 
name
parameter is 
displayed in the chart legend. The 
xValue
parameter contains an array of data that's displayed 
along the horizontal axis of the chart. The 
yValues
parameter contains an array of data that's 
used to plot the vertical points of the chart. 
The 
Write
method actually renders the chart. In this case, because you didn't specify a chart 
type, the 
Chart
helper renders its default chart, which is a column chart. 
3.
Run the page in the browser. (Make sure the page is selected in the Files workspace before you 
run it.) The browser displays the chart.  
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; // create optimizing options
add bookmark pdf file; excel hyperlink to pdf bookmark
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
export excel to pdf with bookmarks; bookmark pdf acrobat
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
100 
Using a Database Query for Chart Data 
If the information you want to chart is in a database, you can run a database query and then use data 
from the results to create the chart. This procedure shows you how to read and display the data that 
you created in the previous example. 
1.
Add an App_Data folder to the root of the website if the folder does not already exist. 
2.
In the App_Data folder, add the database file named SmallBakery.sdf that you created in 
Chapter 5 - Working with Data
3.
Create a new file named ChartDataQuery.cshtml. 
4.
Replace the existing code with the following:  
@{ 
var db = Database.Open("SmallBakery"); 
var data = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
.AddTitle("Product Sales") 
.DataBindTable(dataSource: data, xField: "Name") 
.Write(); 
The code first opens the SmallBakery database and assigns it to a variable named 
db
. This 
variable represents a 
Database
object that can be used to read from and write to the database. 
Next, the code runs a SQL query to get the name and price of each product. The code creates a 
new chart and passes the database query to it by calling the chart's 
DataBindTable
method. This 
method takes two parameters: the 
dataSource
parameter is for the data from the query, and the 
xField
parameter lets you set which data column is used for the chart's x-axis.  
As an alternative to using the 
DataBindTable
method, you can use the 
AddSeries
method of the 
Chart
helper. The 
AddSeries
method lets you set the 
xValue
and 
yValues
parameters. For 
example, instead of using the 
DataBindTable
method like this: 
.DataBindTable(data, "Name") 
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
display bookmarks in pdf; bookmark page in pdf
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields in Visual Basic .NET application.
bookmark pdf documents; bookmarks in pdf
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
101 
You can use the 
AddSeries
method like this: 
.AddSeries("Default", 
xValue: data, xField: "Name", 
yValues: data, yFields: "Price") 
Both render the same results. The 
AddSeries
method is more flexible because you can specify 
the chart type and data more explicitly, but the 
DataBindTable
method is easier to use if you 
don't need the extra flexibility. 
5.
Run the page in a browser.  
Using XML Data 
The third option for charting is to use an XML file as the data for the chart. This requires that the XML 
file also have a schema file (.xsd file) that describes the XML structure. This procedure shows you how to 
read data from an XML file. 
1.
In the App_Data folder, create a new XML file named data.xml. 
2.
Replace the existing XML with the following, which is some XML data about employees in a 
fictional company.  
<?xml version="1.0" standalone="yes" ?> 
<NewDataSet xmlns="http://tempuri.org/data.xsd"> 
<Employee> 
<Name>Erin</Name> 
<Sales>10440</Sales> 
</Employee> 
<Employee> 
<Name>Kim</Name> 
<Sales>17772</Sales> 
</Employee> 
<Employee> 
<Name>Dean</Name> 
.NET PDF SDK - Description of All PDF Processing Control Feastures
Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create.
how to create bookmark in pdf automatically; creating bookmarks in pdf from word
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
how to create bookmark in pdf with; adding bookmarks to pdf
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
102 
<Sales>23880</Sales> 
</Employee> 
<Employee> 
<Name>David</Name> 
<Sales>7663</Sales> 
</Employee> 
<Employee> 
<Name>Sanjay</Name> 
<Sales>21773</Sales> 
</Employee> 
<Employee> 
<Name>Michelle</Name> 
<Sales>32294</Sales> 
</Employee> 
</NewDataSet> 
3.
In the App_Data folder, create a new XML file named data.xsd. (Note that the extension this 
time is .xsd.)  
4.
Replace the existing XML with the following:  
<?xml version="1.0" ?> 
<xs:schema 
id="NewDataSet" 
targetNamespace="http://tempuri.org/data.xsd" 
xmlns:mstns="http://tempuri.org/data.xsd" 
xmlns="http://tempuri.org/data.xsd" 
xmlns:xs="http://www.w3.org/2001/XMLSchema" 
xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" 
attributeFormDefault="qualified" 
elementFormDefault="qualified"> 
<xs:element name="NewDataSet" 
msdata:IsDataSet="true" 
msdata:EnforceConstraints="False"> 
<xs:complexType> 
<xs:choice maxOccurs="unbounded"> 
<xs:element name="Employee"> 
<xs:complexType> 
<xs:sequence> 
<xs:element 
name="Name" 
type="xs:string" 
minOccurs="0" /> 
<xs:element 
name="Sales" 
type="xs:double" 
minOccurs="0" /> 
</xs:sequence> 
</xs:complexType> 
</xs:element> 
</xs:choice> 
</xs:complexType> 
</xs:element> 
</xs:schema> 
5.
In the root of the website, create a new file named ChartDataXML.cshtml. 
6.
Replace the existing code with the following:  
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
103 
@using System.Data; 
@{ 
var dataSet = new DataSet(); 
dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd")); 
dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml")); 
var dataView = new DataView(dataSet.Tables[0]); 
var myChart = new Chart(width: 600, height: 400) 
.AddTitle("Sales Per Employee") 
.AddSeries("Default", chartType: "Pie", 
xValue: dataView, xField: "Name", 
yValues: dataView, yFields: "Sales") 
.Write(); 
The code first creates a 
DataSet
object. This object is used to manage the data that's read from 
the XML file and organize it according to the information in the schema file. (Notice that the top 
of the code includes the statement 
using SystemData
. This is required in order to be able to 
work with the 
DataSet
object. For more information, see the sidebar "Using" Statements and 
Fully Qualified Names.) 
Next, the code creates a 
DataView
object based on the dataset. The data view provides an object 
that the chart can bind to — that is, read and plot. The chart binds to the data using the 
AddSeries
method, as you saw earlier when charting the array data, except that this time the 
xValue
and 
yValues
parameters are set to the 
DataView
object.  
This example also shows you how to specify a particular chart type. When the data is added in 
the 
AddSeries
method, the 
chartType
parameter is also set to display a pie chart. 
7.
Run the page in a browser.  
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
104 
"Using" Statements and Fully Qualified Names 
The .NET Framework that ASP.NET Web Pages with Razor syntax is based on consists of thousands and 
thousands of components (classes). To make it manageable to work with all these classes, they're 
organized into namespaces, which are somewhat like libraries. For example, the 
System.Web
namespace 
contains classes that support browser/server communication, the 
System.Xml
namespace contains 
classes that are used to create and read XML files, and the 
System.Data
namespace contains classes that 
let you work with data. 
In order to access any given class in the .NET Framework, code needs to know not just the class name, 
but also the namespace that the class is in. For example, in order to use the 
Chart
helper, code needs to 
find the 
System.Web.Helpers.Chart
class, which combines the namespace (
System.Web.Helpers
) with the 
class name (
Chart
). This is known as the class's fully-qualified name — its complete, unambiguous 
location within the vastness of the .NET Framework. In code, this would look like the following: 
var myChart = new System.Web.Helpers.Chart(width: 600, height: 400) // etc.
However, it's cumbersome (and error prone) to have to use these long, fully-qualified names every time 
you want to refer to a class or helper. Therefore, to make it easier to use class names, you can import 
the namespaces you're interested in, which is usually is just a handful from among the many 
namespaces in the .NET Framework. If you've imported a namespace, you can use just a class name 
(
Chart
) instead of the fully qualified name (
System.Web.Helpers.Chart
). When your code runs and 
encounters a class name, it can look in just the namespaces you've imported to find that class. 
When you use ASP.NET Web Pages with Razor syntax to create web pages, you typically use the same 
set of classes each time, including the 
WebPage
class, the various helpers, and so on. To save you the 
work of importing the relevant namespaces every time you create a website, ASP.NET is configured so it 
automatically imports a set of core namespaces for every website. That's why you haven't had to deal 
with namespaces or importing up to now; all the classes you've worked with are in namespaces that are 
already imported for you. 
However, sometimes you need to work with a class that isn't in a namespace that's automatically 
imported for you. In that case, you can either use that class's fully-qualified name, or you can manually 
import the namespace that contains the class. To import a namespace, you use the 
using
statement 
(
import
in Visual Basic), as you saw in an example earlier the chapter. 
For example, the 
DataSet
class is in the 
System.Data
namespace. The 
System.Data
namespace is not 
automatically available to ASP.NET Razor pages. Therefore, to work with the 
DataSet
class using its fully 
qualified name, you can use code like this: 
var dataSet = new System.Data.DataSet();
If you have to use the 
DataSet
class repeatedly you can import a namespace like this and then use just 
the class name in code: 
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
105 
@using System.Data;
@{
var dataSet = new DataSet();
// etc.
}
You can add 
using
statements for any other .NET Framework namespaces that you want to reference. 
However, as noted, you won't need to do this often, because most of the classes that you'll work with 
are in namespaces that are imported automatically by ASP.NET for use in .cshtml and .vbhtml pages. 
Displaying Charts Inside a Web Page 
In the examples you've seen so far, you create a chart and then the chart is rendered directly to the 
browser as a graphic. In many cases, though, you want to display a chart as part of a page, not just by 
itself in the browser. To do that requires a two-step process. The first step is to create a page that 
generates the chart, as you've already seen.  
The second step is to display the resulting image in another page. To display the image, you use an 
HTML 
<img>
element, in the same way you would to display any image. However, instead of referencing 
a .jpg or .png file, the 
<img>
element references the .cshtml file that contains the 
Chart
helper that 
creates the chart. When the display page runs, the 
<img>
element gets the output of the 
Chart
helper 
and renders the chart.  
1.
Create a file named ShowChart.cshtml.  
2.
Replace the existing code with the following:  
<!DOCTYPE html> 
<html> 
ASP.NET Web Pages Using The Razor Syntax 
Chapter 7 – Displaying Data in a Chart 
106 
<head> 
<title>Chart Example</title> 
</head> 
<body> 
<h1>Chart Example</h1> 
<p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em>  
file, but is shown in this page.</p> 
<p><img src="ChartArrayBasic.cshtml" /> </p> 
</body> 
</html> 
The code uses the 
<img>
element to display the chart that you created earlier in the 
ChartArrayBasic.cshtml file. 
3.
Run the web page in a browser. The ShowChart.cshtml file displays the chart image based on the 
code contained in the ChartArrayBasic.cshtml file.  
Styling a Chart 
The 
Chart
helper supports a large number of options that let you customize the appearance of the chart. 
You can set colors, fonts, borders, and so on. An easy way to customize the appearance of a chart is to 
use a theme. Themes are collections of information that specify how to render a chart using fonts, 
colors, labels, palettes, borders, and effects. (Note that the style of a chart does not indicate the type of 
chart.) 
The following table lists built-in themes.  
Theme
Description
Vanilla
Displays red columns on a white background.
Blue
Displays blue columns on a blue gradient background.
Green
Displays blue columns on a green gradient 
background.
Yellow 
Displays orange columns on a yellow gradient 
background.
Vanilla3D
Displays 3-D red columns on a white background.
You can specify the theme to use when you create a new chart. 
1.
Create a new file named ChartStyleGreen.cshtml. 
2.
Replace the default markup and code in the page with the following: 
@{ 
var db = Database.Open("SmallBakery"); 
var data = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, 
height: 400, 
Documents you may be interested
Documents you may be interested