Introduction
In this article I will show you Chart Helper in the ASP.NET Web API, including the use of Chart Helper for creating charts. The Chart Helper is used for showing data in graphical form. Here I describe how to create a chart in the ASP.NET Web API.
The methods used in Chart Helper are:
- Addtitle: This method adds the tile to the chart.
- Addseries: It is used for providing data points and series of attributes for the chart.
- SetXAxis: It sets the value for the horizontal axis (X-Axis).
- SetYAxis: It sets the value for the vertical axis (Y-Axis).
- Save: By using this method we can save the chart image to the specified file.
- SaveToCache: It saves the chart image in the system cache.
We use the "Chart" constructor that creates a new instance. The namespace is "System.web.Helpers".
Now the procedure for creating the chart.
Step 1
Create a Web API project.
- Start Visual Studio 2012.
-
From the start window select "New Project".
-
In the Template Window select "Installed" -> "Visual C#" -> "Web".
-
Select "ASP.NET MVC 4 Web Application" and click on "OK"
![chart5.jpg]()
- From the "MVC4 Project" window select "Web API".
![chart6.jpg]()
Step 2
Open the "HomeController" file. This file exists in:
- In the "Solution Explorer".
- Select "Controller folder"->"HomeController".
![chart3.jpg]()
Add this code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Helpers;
namespace Web_APIcharter.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult CharterHelp()
{
new Chart(width: 500, height: 300)
.AddTitle("Chart for languages")
.AddSeries (chartType: "column",
xValue: new[] { "ASP.NET", "HTML5", "C Language","C++" },
yValues: new[] { "90", "100", "80", "70" })
.Write("bmp");
return null;
Step 3
Now in the "index.cshtml" file. This file exists in the:
![chart4.jpg]()
Add the following lines of code:
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
<img src="@Url.Action("CharterHelp")" alt="Chart" />
</div>
</body>
</html>
Step 4
Execute the application by pressing "F5". The application looks like this:
![chart.jpg]()
Step 5
In the preceding image, the chart has the default theme. We can add a theme to the chart. Here we add the "Blue" theme.
The code of is as in the following:
public ActionResult CharterHelp()
{
new Chart(width: 500, height: 300,theme:ChartTheme.Blue)
.AddTitle("Chart for languages")
.AddSeries(
chartType: "column",
xValue: new[] { "ASP.NET", "HTML5", "C Language", "C++" },
yValues: new[] { "90", "100", "80", "70" })
.Write("bmp");
return null;
The image looks such as:
![chart2.jpg]()
Step 6
We can create a custom theme for our chart. The code for creating the custom theme is as in the following:
string style =
@"<Chart BackColor=""LightGray"" ForeColor=""Blue"">
<ChartAreas>
<ChartArea Name=""Default"" BackColor=""Pink""></ChartArea>
</ChartAreas>
</Chart>";
new Chart(width: 500, height: 300, theme: style)
.AddTitle("Chart for languages")
.AddSeries(
chartType: "column",
xValue: new[] { "ASP.NET", "HTML5", "C Language", "C++" },
yValues: new[] { "80", "90", "78", "68" })
.Write("bmp");
return null;
The Image looks such as:
![chart1.jpg]()