Charts In AngularJS Using Web API

In the development world, you may get a requirement from your client, which might be weekly, quarterly or yearly charts. You always think, how can I make charts with the use of AngularJS? Today, in this article, we are going to learn the following.

How to create charts in AngularJS, using WebAPI.
Higcharts.js

In this example, our requirement is that we have a drop-down list of the student names.

If the user selects any student, it will show the selected student's marks in the form of charts.

What are Highcharts?

HighCharts is a new Rich javascript based chart library. With the use of high charts, you can create the interactive charts as per your requirement.

Below is the cdn for Highcharts.

<script src="https://code.highcharts.com/highcharts.js"></script>

HighChart Features

We know HighCharts is a JavaScript based library, so HighCharts uses features in JSON format. Thus, I am going to describe some features of HighCharts.

title
It is used to show the title in the header part.
Subtitle
It is used to show sub title in the header part.
xAxis
You can define here in the form of an array.
yAxis
It defines y axis.
legend
It helps in setting alignment and layout of the chart.
Chart
Here you can define type, like what type of charts you want, For example - Column, Area, Line, Pie etc.
Series
This is the main feature. This is the place, where we define the data in the form of an array.
Highcharts.chart
This is used to show the charts. Here, we have to define the Id name of div. For example, I use here Highcharts.chart('container'). Here, the container is used as div Id. To call this, we have to create it.
1. <div id='container'>
2. </div>
3. Highcharts.chart('container', { title: { text: 'Monthly Examination Summary', x: -20 //center }, subtitle: { text: 'Source: ST. Thomas School', x: -20 }, xAxis: { categories: ['Hindi', 'Maths', 'English', 'Science'] }, yAxis: { title: { text: 'Marks' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: $scope.studentMarks[0].Name, data: [$scope.studentMarks[0].Hindi, $scope.studentMarks[0].Maths, $scope.studentMarks[0].English, $scope.studentMarks[0].Science] }] });

Now, let's come to the code and understand more in regards to how we can use Highcharts.

Step 1

Open Visual Studio.

Step 2

File>>New>> Project.

Programming

Choose ASP.NET Web Application.

Step 3

Select WebAPI.

Click OK button.

Check Solution Explorer.

In this article, we have StudentMarksMaster table.

Now, let's create an ADO.NET Entity Data Model file to connect the tables.

Click Add button. Create an EDMX file, which is based on Wizard.

Once you click on the finish button, your screen looks, as shown below.

Now, let's talk about code.

First of all, we want to display the student's name in the drop-down list. For this, I am going to create a StudentModel class.

StudentModel.cs

public class StudentModel {
public int StudentId {
get;
set;
}
public String StudentName {
get;
set;
}
}

You can see, in the code, mentioned above, we need this data in our drop-down list. Thus, we will use StudentId for the value and StudentName for the text.

Now in the next step, I am going to write code for StudentController class to fetch the data into drop-down list.

StudentController.cs

using AngularwithWebAPI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace AngularwithWebAPI.Controllers {
public class StudentController: ApiController {
DbContext.StudentEntities studentEntities = new DbContext.StudentEntities();
public IHttpActionResult GetStudents() {
var query = studentEntities.StudentMarksMasters.Select(x => new StudentModel {
StudentId = x.Id, StudentName = x.Name
}).ToList();
return Ok(query);
}
public IHttpActionResult GetStudentMarks(int studentId) {
var query = studentEntities.StudentMarksMasters.Where(x => x.Id == studentId).ToList();
return Ok(query);
}
}
}

Script.js

angular.module('myModule', [])
.controller('myController', function ($scope, $http) {
$http.get('http://localhost:50623/api/student/getstudents').then(function(response) {
$scope.students = response.data;
$scope.studentId = $scope.students[0].StudentId;
$scope.studentChange($scope.students[0].StudentId);
});
$scope.studentChange = function(studentId) {
$http.get('http://localhost:50623/api/student/getstudentmarks', {
params: {
studentId: studentId
}
}).then(function(response) {
$scope.studentMarks = response.data;
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Examination Summary',
x: -20 //center
},
subtitle: {
text: 'Source: ST. Thomas School',
x: -20
},
xAxis: {
categories: ['Hindi', 'Maths', 'English', 'Science']
},
yAxis: {
title: {
text: 'Marks'
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: $scope.studentMarks[0].Name,
data: [$scope.studentMarks[0].Hindi, $scope.studentMarks[0].Maths, $scope.studentMarks[0].English, $scope.studentMarks[0].Science]
}]
});
});
}
});

index.html

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="Scripts/js/Script.js"></script>
</head>
<body ng-controller="myController">
<table>
<tr>
<td>
Select Student
</td>
<td>
<select ng-model="studentId" ng-change="studentChange(studentId)">
<option data-ng-repeat="st in students" value="{{st.StudentId}}">{{st.StudentName}}</option>
</select>
</td>
</tr>
</table>
<br />
<div id="container"></div>
</body>
</html>

Now, the time has come to run the code.

Programming

You can see in the code, mentioned above, first I create studentcontroller.cs and make two methods.

GetStudents() For getting students in dropdownlist.
GetStudentMarks(int studentId) on change event of dropdownlist this funcion will gives you data of students subjectwise.

Now, in script.js, I called these two methods after which I called highcharts.charts and the Id div. chart information store in $scope.studentMarks. We have to call this into series data property. One more thing here is, I am using chart:{type:line}. You can see in the output, mentioned above, it shows Line chart. If you want to change this, just simply change here. For example, if you want to create Column graph, just put column and your output will look, as shown below.

Now, in index.html, call <div id='container'></div>

That's it. Your chart is created, I hope you enjoyed this article. If you have any suggestions, please send your valuable comments. Happy programming.