Post
Ask Question

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"

    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:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Helpers;  
  7. namespace Web_APIcharter.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         public ActionResult CharterHelp()  
  16.         {  
  17.             new Chart(width: 500, height: 300)  
  18.             .AddTitle("Chart for languages")  
  19.                  .AddSeries (chartType: "column",  
  20.                    xValue: new[] { "ASP.NET", "HTML5", "C Language","C++" },  
  21.                      yValues: new[] { "90", "100", "80", "70" })  
  22.                    .Write("bmp");  
  23.             return null;  
  24.         }  
  25.     }  
  26. } 

Step 3

Now in the "index.cshtml" file. This file exists in the:

  • In the "Solution Explorer".

  • Select the "Views" -> "Home" -> "index.cshtml".

    chart4.jpg

Add the following lines of code:

  1. <html>  
  2. <head>   
  3.     <title>Index</title>  
  4. </head>  
  5. <body>  
  6.     <div>  
  7.         <img src="@Url.Action("CharterHelp")" alt="Chart" />  
  8.     </div>  
  9. </body>  
  10. </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:

  1. public ActionResult CharterHelp()  
  2. {  
  3.     new Chart(width: 500, height: 300,theme:ChartTheme.Blue)  
  4.     .AddTitle("Chart for languages")  
  5.          .AddSeries(  
  6.               chartType: "column",  
  7.            xValue: new[] { "ASP.NET", "HTML5", "C Language", "C++" },  
  8.              yValues: new[] { "90", "100", "80", "70" })  
  9.            .Write("bmp");  
  10.     return null;  
  11. } 

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:

  1. string style =  
  2.          @"<Chart BackColor=""LightGray"" ForeColor=""Blue"">  
  3.                       <ChartAreas>  
  4.                              <ChartArea Name=""Default"" BackColor=""Pink""></ChartArea>  
  5.                        </ChartAreas>  
  6.              </Chart>";  
  7.             new Chart(width: 500, height: 300, theme: style)  
  8.             .AddTitle("Chart for languages")  
  9.                  .AddSeries(  
  10.                       chartType: "column",  
  11.                    xValue: new[] { "ASP.NET", "HTML5", "C Language", "C++" },  
  12.                      yValues: new[] { "80", "90", "78", "68" })  
  13.                    .Write("bmp");  
  14.             return null; 

The Image looks such as:

chart1.jpg


Similar Articles