Chart Helper in ASP.Net Web API

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"

From the "MVC4 Project" window select "Web API".

Step 2

Open the "HomeController" file. This file exists in:

In the "Solution Explorer".
Select "Controller folder"->"HomeController".

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:

In the "Solution Explorer".
Select the "Views" -> "Home" -> "index.cshtml".

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:

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:

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:

4 Comments

Join the conversation! Your thoughts help the community grow.

Simon Brown5y ago
Is there a reference document for the theme XML tags and attributes, not been able to find anything to allow me to refine charts I am creating?
Eron Namugga6y ago
How to I display the chart in my pages?
Michael Easterbrook9y ago
How do I prevent the chart from starting at zero if I am using a SQL query as the data source? The query returns values starting at 7 but the chart starts at zero.
Murthy Rampalli9y ago
Can we hide gridlines