Chart Representation of Data in ASP.Net Web Pages 2

Introduction

Today, we'll learn about the data presentation in the graphical format. The graphical format representation of data is done by Chart Helper in Microsoft WebMatrix using ASP.NET Web Pages 2. If you are not familiar with WebMatrix then refer to Create Website using WebMatrix.

The Chart helper can render an image that displays the data in various chart types. There are 30 types of charts, like area chart, bar chart, column chart, stock chart and so on available to represent the data in graphical format. You probably are already familiar with them; they are also used in Microsoft Excel and other tools.

So, let's proceed with the following:

• Create a Chart
• Display Chart in a Webpage
• Style the Chart

Creating Chart

The data to display in graphical form can be stored in the array, the database or the XML file.

Chart Representation Using Array

Now, here we use an array to represent the data using the following procedure.

Step 1: Create a new folder named Chart Representation in the website.

Step 2: Create a new CSHTML File in the folder.

Enter the name as ArrayChartPage.

Step 3: Now enter the following code in the code block:

@{
    var ChartSample=new Chart(width: 500, height: 300)
        .AddTitle("Chart Sample")
        .AddSeries(
            name: "Cricketers",
            xValue: new[] {"Sachin", "Ricky", "Wasim","Brian", "Saurav"},
            yValues: new[]{"10", "8", "9", "6", "7"}).Write();
}

In the code above the chart is created with the mentioned width and height. The title is specified with AddTitle and we use AddSeries to add data. The xValue and yValue are the parameters. The Write method is used to render the chart with its default column chart because we didn't specify the chart type.

Step 4: Now launch the page in the browser and you'll see the Column chart representation of your data: 

Chart Representation Using Database

Here we use a database to represent the data. We can run a query to fetch the data from the database and represent the results of data in the graphical format. Use the following procedure to do that.

Step 1: Add a folder named App_Data to work with the database, if the folder does not already exist. You can refer to Working with Database.

Step 2: Add a new file named DataChartPage in the Chart Representation folder and enter the following code in the code block:

@{
   var CricDb= Database.Open("Cricketer Site");
   var DbQuery = CricDb.Query("Select Name, ODI from CricketerStatistics");
   var DataChart = new Chart(width: 500, height: 300)
                       .AddTitle("Cricketer Statistics")
                       .AddSeries("Cricketers",
                         xValue: DbQuery, xField: "Name",
                         yValues: DbQuery, yFields: "ODI")
                       .Write();
}

In the code above the Cricketer Site is the database and the data is retrieved from the database to represent the CricketerStatistics table data. The code runs a query to fetch the Name and ODI details of each Cricketer. Next the chart is created with the AddSeries method. This is very flexible because we can specify the chart type and data more explicitly.

We can also use the DataBindTable method to bind the data as in the code shown below:

@{
  var CricDb= Database.Open("Cricketer Site");
  var DbQuery = CricDb.Query("Select Name, ODI from CricketerStatistics");
  var DataChart = new Chart(width: 500, height: 300)
                       .AddTitle("Cricketer Statistics")
                       .DataBindTable(dataSource: DbQuery, xField: "Name")
                       .Write();
}

But the same chart is rendered with the both code.

Step 3: Launch the page in the browser: 

Chart Representation Using XML

In this section, we use XML to represent the data in the graphical format. This requires that the XML file also have a schema file (.xsd file) that describes the XML structure. Use the following procedure to do that.

Step 1: Create a new XML file named XmlData.xml in the App_Data folder.

Step 2: Enter the following code to it:

<?xml version="1.0" encoding="utf-8" ?>
<NewDataSet xmlns="http://tempuri.org/XMLData.xsd">
   <Cricketer>
       <Name>Sachin</Name>
       <OdiRuns>18500</OdiRuns>
       <TestRuns>15550</TestRuns>
   </Cricketer>
   <Cricketer>
       <Name>Ricky</Name>
       <OdiRuns>13500</OdiRuns>
       <TestRuns>12550</TestRuns>
   </Cricketer>
   <Cricketer>
       <Name>Jacques</Name>
       <OdiRuns>12500</OdiRuns>
       <TestRuns>13550</TestRuns>
   </Cricketer>
   <Cricketer>
       <Name>Saurav</Name>
       <OdiRuns>10500</OdiRuns>
       <TestRuns>11550</TestRuns>
   </Cricketer>
</NewDataSet>

Step 3: Now again create a new XML file named XmlData.xsd in the App_Data folder.

Step 4: Enter the following code into it:

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema id="NewDataSet" targetNamespace="http://tempuri.org/XMLData.xsd"
          xmlns:mstns="http://tempuri.org/XMLData.xsd"
          xmlns="http://tempuri.org/XMLData.xsd"
          xmlns:xs="http://www.w3.org/2001/XMLSchema"
          xmlns:msdata="urn:schemas-micrososft-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="Cricketer">
                   <xs:complexType>
                       <xs:sequence>
                           <xs:element name="Name"
                                       type="xs:string"
                                       minOccurs="0" />
                           <xs:element name="TestRuns"
                                       type="xs:int"
                                       minOccurs="0" />
                       </xs:sequence>
                   </xs:complexType>
               </xs:element>
           </xs:choice>
       </xs:complexType>
   </xs:element>
</xs:schema>

Step 5: Add a new file named XmlChartPage in the Chart Representation folder and enter the following code in the code block:

@using System.Data;
@{
   var DbSet= new DataSet();
   DbSet.ReadXmlSchema(Server.MapPath("~/App_Data/XMLData.xsd"));
   DbSet.ReadXml(Server.MapPath("~/App_Data/XMLData.xml"));
   var DbView = new DataView(DbSet.Tables[0]);
   var XmlChart= new Chart(width: 500, height: 300)
                       .AddTitle("Test Runs")
                       .AddSeries("Cricketer", chartType: "Column",
                       xValue: DbView, xField: "Name",
                       yValues: DbView, yFields: "TestRuns")
                       .Write();
}

In the code above the DataSet object is created to fetch the data from the XML file and organize it depending on the data in the schema file. Next the code uses the DataView object to bind the data and display it in the Pie Chart.

Step 6: Launch the page in the browser.

Displaying Chart in Webpage

In this section we'll create a page to display the chart representation of data.

Step 1: Create a new CSHTML file named ChartPage in the folder and add the following code:

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <h1>Chart Example</h1>
        <p>The following chart is generated by the
        <em>DataChartPage.cshtml</em> file:</p>
        <p><img src="DataChartPage.cshtml" alt="Cricketers"/> </p>
   </body>
</html>

Step 2: Launch the page in the browser: 

Styling Chart

Use the following procedure to represent the data by customizing it.

Step 1: Open the DataChartPage.cshtml page and modify the code with the highlighted code below: 

varDataChart=newChart(width:500,height:300,theme:ChartTheme.Blue)

Step 2: Now launch the page in the browser: 

Summary

This article will help you to learn how to represent the data in graphical format. You can also use a different data source to display it with the chart representation. Thanks for reading.