Post
Ask Question

Adding Dynamic Chart In ASP.NET MVC 6

Introduction

Dynamic Chart displays live data to ASP.NET MVC projects through API and databases. Many javascript libraries have been used to implement charts, like Chart.js, CanvasJS, etc. However, I will be using CanvasJS in this article. 

In this article, I will describe the following points:

  1. What is CanvasJS?
  2. Creating an ASP.NET MVC 6 Project
  3. Using CanvasJS in ASP.NET MVC 6 Project
  4. Inserting Live API Data in Chart
  5. Formatting Chart 

Prerequisites:

  1. Visual Studio 2022 installed on your machine
  2. Basic knowledge of JavaScript

What is CanvasJS?

CanvasJS is a JavaScript library with rich UI and multiple functionalities. It allows us to implement charts in our ASP.NET MVC project. We can provide both static and dynamic data to render in charts. CanvasJS generates multiple types of charts, like Line Chart, Bar Chart, Area Chart, Donut Chart, and a lot more. To know more about CanvasJS, please refer here.

Creating an ASP.NET MVC Project

To create an ASP.NET MVC Project, please refer to my previous article, linked below:

Using CanvasJS in ASP.NET MVC Project

To implement the chart, you need to follow the steps given below.

  •  First, you will add the CanvasJS JavaScript file link in the _Layout.cshtml file as given below: 
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    JS File link insert image

  • Now, add the chart inside Home View using JavaScript as given below:

    <script type="text/javascript">

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text: "My First Chart in ASP.NET MVC"              
		},
		data: [              
		{
			// Change type to "doughnut", "line", "splineArea", etc.
			type: "column",
			dataPoints: [
				{ label: "apple",  y: 10  },
				{ label: "orange", y: 15  },
				{ label: "banana", y: 25  },
				{ label: "mango",  y: 30  },
				{ label: "grape",  y: 28  }
			]
		}
		]
	});
	chart.render();
}
</script>
  • You need to create a <div> tag inside the <body> tag, having id chartContainer to render the the function given above. 
    <div id="chartContainer" style="height: 400px; width: 60%;"></div>
    Set the height and width according to your needs, as given in the above code.

Output

chart rendering output image

Inserting Live API Data in Chart

Above, we used static data to represent the chart. Now we will use live API data. We have created a demo sale API that contains data on monthly sales. To read about how to create an API in ASP.NET MVC, please refer to the article Create Simple Web API In ASP.NET MVC. To insert the API data, we will follow the steps given below:

Let's see the data which we are getting from our API.

[
  {
    "id": 1,
    "month": "Jan",
    "sale": 10
  },
  {
    "id": 2,
    "month": "Feb",
    "sale": 20
  },
  {
    "id": 3,
    "month": "Mar",
    "sale": 50
  },
  {
    "id": 4,
    "month": "April",
    "sale": 30
  }
]

First, we will consume the API in our project as given below:

HttpClient httpClient = new HttpClient();
[HttpGet]
public IActionResult Index()
{
  string baseUrl = "https://localhost:7243/api/Values";     // API URL
  List<SaleData> saleData = new List<SaleData>();

  var response = httpClient.GetAsync(baseUrl);
  response.Wait();
  var test = response.Result;
  if (test.IsSuccessStatusCode)
  {
      var display = test.Content.ReadAsAsync<List<SaleData>>();
      display.Wait();
      saleData = display.Result;
  }
  ViewBag.Data = JsonConvert.SerializeObject(saleData.Select(prop => new {label = 
  prop.Month, y=prop.Sale}).ToList());  //assigning values to the chart datapoints(label,y) and 
                                        //storing inside ViewBag 
                                      
  return View(saleData);
}

In the above code, we have used live API and after mapping the chart data points (label, y) with (month, sale), stored the data inside the ViewBag. 

Now, we will make changes to the JavaScript code in our View as given below:

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text: "My First Chart in ASP.NET MVC"              
		},
		data: [              
		{
			// Change type to "doughnut", "line", "splineArea", etc.
			type: "column",
			dataPoints:@Html.Raw(ViewBag.Data)
			//[
			//	{ label: "apple",  y: 10  },
			//	{ label: "orange", y: 15  },
			//	{ label: "banana", y: 25  },
			//	{ label: "mango",  y: 30  },
			//	{ label: "grape",  y: 28  }
			//]
		}
		]
	});
	chart.render();
}

Output

Dynamic Chart Output Image

Formatting Chart

We can show our data in any form, like a line chart, area chart, etc. if we change the type to the line as given below:

data: [              
		{
			// Change type to "doughnut", "line", "splineArea", etc.
			type: "line",
			dataPoints:
			@Html.Raw(ViewBag.Data)
			//[
			//	{ label: "apple",  y: 10  },
			//	{ label: "orange", y: 15  },
			//	{ label: "banana", y: 25  },
			//	{ label: "mango",  y: 30  },
			//	{ label: "grape",  y: 28  }
			//]
		}
		]

Output

Line Chart Output Image

This Article In a Nutshell:

  1. First, you need to create an ASP.NET MVC  project in Visual Studio 2022.
  2. Add the CanvasJs JavaScript file link in your View from here.
  3. Now, add the JavaScript code to your View.
  4. Map the API data with the Chart data points and store it in the ViewBag.
  5. Use ViewBag data inside JavaScript code.

Conclusion

In this way, you can add charts to your ASP.NET MVC project. The most important part is mapping the API data to the chart data points so that you can easily store that into ViewBag. Then, you can use it inside JavaScript code.

Thank you and Stay Tuned for More

More Articles from my Account:


Similar Articles