Creating Different Types of Charts in ASP.NET MVC

Introduction

Creating charts and displaying them in a Web page is a common requirement. As a developer, you might think “What is chart? And, how do I create charts in an ASP.NET application?”

One of the popular chart libraries is canvas.js. The canvas.js library is a simple and robust JavaScript API for the HTML5 <canvas> element. This library could be used to generate interactive 2D graphs in a Web browser, by using lines, shapes, paths, images, and text. In this article, we will see how to use canvas.js to create various charts, such as Line, Column, Area, and Pie for ASP.NET MVC applications.

Sample Application to Add a Chart to an MVC Page

To add a chart to a Web page, we will create an MVC application in Visual Studio. For that, create a new project in Visual Studio 2017, named “ProjectChart,” by clicking File → New → Project.

Select Visual C# → Web → ASP.NET Web Application. In the “Name:” field, type the name “ProjectChart”, and then click “OK”, as shown in Figure 1.

New ASP.NET MVC Application
Figure 1: New ASP.NET MVC Application

On the next screen, select “Empty” on the “Select a template” menu. Then, under “Add folders and core references for:”, check the “MVC” checkbox, as you can see in Figure 2.

Select ASP.NET MVC Empty Project Template
Figure 2: Select ASP.NET MVC Empty Project Template

Once the MVC project is created, your empty ASP.NET MVC solution would look like Figure 3.

ASP.NET MVC Blank Solution
Figure 3: ASP.NET MVC Blank Solution

If you execute the project now, you will get a 404 error because there’s no “Controller” or “View” to browse to. We have just created a structure of an ASP.NET MVC project.

To add a simple Controller and View in the MVC project, right-click the “Controller” folder and select “Add” → “Controller”, as depicted in Figure 4.

Add a New Controller in the Project
Figure 4: Add a New Controller in the Project

On the “Add Controller” screen, type “ChartController” in the “Controller name” text box and select “Empty MVC controller”, as shown in Figure 5. Then, click “Add”, as shown in Figure 6.

Select a Controller Type
Figure 5: Select a Controller Type

Enter Name of a Controller
Figure 6: Enter Name of a Controller

Once the controller is added, you will see the “ChartController.cs” class being added to the “Controllers” folder. Double-click the “ChartController.cs” file & right-click the “Index()” method and select “Add View” (see Figure 7).

Add a New View
Figure 7: Add a New View

Uncheck the “Use a layout or master page” checkbox. Accept the default settings. MVC uses conventions so the view has the same name as the method name in the “ChartController.cs” file, which is “Index()”; then, click “Add”, as shown in Figure 8.

Enter a View Name
Figure 8: Enter a View Name

In the “Views” folder, you see that the “Chart” folder has been created with the view “Index.cshtml”. The .cshtml extension means that the view uses the C# syntax (Razor).

Finally, copy and paste the following HTML code on the Index.cshtml page.

To create the chart, you need to include CanvasJS Script in the header. That’s why I have added the following JavaScript library reference.

<script src="https://canvasjs.com/assets/script/canvasjs.min.js">

Once the script is added, I have created a div element inside the body and set its ID as chartContainer. This is where the chart will be rendered.

<div id="chartContainer"></div>

The JavaScript function will create the chart inside the window’s onload event.

@{
   ViewBag.Title = "ChartView";
}

<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Chart View</title>
   <script
      src="https://canvasjs.com/assets/script/canvasjs.min.js">
   </script>

   <script type="text/javascript">

      window.onload = function () {
         var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
               text: "My Sample Column Chart Created in ASP.NET
                      MVC"
            },
            subtitles: [
               { text: "Resize the Browser" }
            ],
            data: [
               {
                  // change type to bar, line, area, pie, etc.
                  type: "bar",
                  dataPoints: [
                     { x: 10, y: 71 },
                     { x: 20, y: 55 },
                     { x: 30, y: 50 },
                     { x: 40, y: 65 },
                     { x: 50, y: 95 },
                     { x: 60, y: 68 },
                     { x: 70, y: 28 },
                     { x: 80, y: 34 },
                     { x: 90, y: 14 }
                  ]
               }
            ]
         });
         chart.render();
      };
   </script>
</head>
<body>
   <div id="chartContainer">
   </div>

</body>
</html>

The following controller code returns the Index view.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ProjectChart.Controllers
{
   public class ChartController : Controller
   {
      // GET: Chart
      public ActionResult Index()
      {
         return View();
      }
   }
}

Now, execute the code. It should display the chart shown in Figure 9 in your browser.

The chart produced by your hard work
Figure 9: The chart produced by your hard work

Conclusion

In this article, you have learned how to create charts, using canvas.js. I hope you enjoyed the reading this article. Stay tuned.

That’s all for today. Happy coding!

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read