Chart Web Helper in ASP.NET MVC 3 Beta
Posted by: Malcolm Sheridan ,
on 10/28/2010,
in
Category ASP.NET MVC
Abstract: The following article demonstrates how to use the chart helper that is part of the Microsoft Web Helpers library in ASP.NET MVC 3 Beta
Adding charts to your application has always been a non trivial exercise. Charts can be hard to implement, but thanks to the new Microsoft Web Helpers library, adding charts to your website is simple. This library can be downloaded through NuPack. NuPack is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. This article will show you how to download the library and start using some of these new helpers.
Before moving on, you need to download ASP.NET MVC 3 Beta and NuPack. Click here to download and install them using the Microsoft Web Platform Installer.
Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 Beta dialog can be seen below.
Choose Razor as the view engine and click OK.
The next step is to download the Microsoft Web Helpers library through NuPack. Right click the website and choose Add Package Reference.
The Add Package Reference dialog will open. Search for Microsoft in the search box in the top right corner. Upon completion you'll see microsoft-web-helpers option. Select that option and click Install.
Click Close to return to the project. Check the references and you'll see that the library has been added to the project. The screenshot below displays the newly added reference.
Let’s start coding. There are many ways to get the chart to work, and one way is to have an action method render the chart to the view. Here’s some sample code:
public ActionResult GetRainfallChart()
{
var key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "bar",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" })
.Write();
return null;
}
First in the code above I’m creating a new Chart object called key. From there I’m using the AddSeries method to add things such as the chart type, x and y values and also the legend. Because the chart is rendered as an image, to use the action you need to add an HTML image to your page like this:
<!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>
<title>Index</title>
</head>
<body>
<h1>Test Chart</h1>
<div>
<img src="/Home/GetRainfallChart" />
</div>
</body>
</html>
The chart is displayed on the page as follows.
If you wanted to change the chart to a pie chart, just modify the chartType property:
public ActionResult GetRainfallChart()
{
var key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "pie",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" })
.Write();
return null;
}
To pass a data source that isn’t hard coded, you can use the DataBindTable method. It accepts any value that returns an IEnumerable object.
public ActionResult GetMonths()
{
var d = new DateTimeFormatInfo();
var key = new Chart(width: 600, height: 400)
.AddSeries(chartType: "column")
.DataBindTable(d.MonthNames)
.Write(format: "gif");
return null;
}
There are six types of charts at this stage. There may be more in future releases. Here’s the list.
-
Area
-
Bar
-
Column
-
Line
-
Pie
-
Stock
To use any of these just modify the chartType property.
As you can see these helpers are new to the Microsoft.Web.Helpers library and can be used in ASP.NET MVC 3 Beta. This chart helper makes it easy to add charts to your website.
The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @
malcolmsheridan