Chart.js with AngularJS and Web API 2.0 – Part 1

After releasing the other Asp.net MVC/Chart.js articles, I received a fair amount of feedback (thank you for that) including requests for more information around entity framework models and the possibility of using Chart.js with AngularJS. So, I thought the best thing to do would be to do another set of turorials and bring Web API 2.0 into the mix as well. But before I get into these, I would just like to say that the following tutorials do not necessarily represent the best way to do things, they are simply a demonstration of how you could do them.  I will leave it to you to determine what are the best methods and frameworks to use in your own projects.

So that you may jump to the parts that interest you the most, the structure of the articles will be as follows:-

Part 1 – Project setup and Entity Framework Model Creation

Part 2 – Basic Chart.js Implementation

Part 3 – AngularJS implementation

At least, that’s the plan….

Before we start with Chart.js with AngularJS it probably worth a visit to the respective sites to understand what these frameworks are and do. Follow the links below (but please come back). You could also download the code, but in this tutorial we will add them to the project via the Nuget Package Manager.

Chart.js
AngularJS

Web API 2.0

Let’s get started. First thing to do is create a new Web API project.

new visual studio project

Then select Web API and change authorisation to none.

new web api project

Now we have our project we will create a very simple model using Entity Framework.

This isn’t really intended to be an EF tutorial but I will take you through some of the steps in order to create a code-first model.

In the Solution Explorer, right-click on the Models folder and add a new class: call it QualityLog.cs (I primarily work in the manufacturing industry, so we will be creating a graph of simple quality issues – probably should have mentioned that in the intro, but here we are).

using System;

using System.ComponentModel.DataAnnotations;

namespace WebApiChartAngular.Models

{

public class QualityRecord {

public int QualityRecordID { get; set; }

public string PartNumber { get; set; }

public DateTime RecordDate { get; set; }

}

}

Don’t forget to use the “prop tab tab” code snippit short-cut. Also, notice that I have added System.ComponentModel.DataAnnotations but am not actually using them yet – they will come later.

Now we will add a controller. First build the project then right-click on the Controllers folder and select Add -> Controller then select Web API 2.0 Controller with actions:

add web controller

a window will pop up asking for a model and context

select model

Select the QualityRecord model and then, because we have not yet created our data context, we will have Visual Studio create one for us: click on the plus by the Data Context Class. You will then get this window

context class

Click Add to accept the default name, then click add to create the controller.

So now you have a controller and a Entity Framework context, which is quite nice. Go and have a look at the code for those while I wait (the context class will be in your models folder).

Again, this is not an Entity Framework article – there are many goods one out there already – but we will do a few more things before we move on that I will not really explain in much detail. I’m happy to answer questions but I would really recommend you follow some dedicated tutorials. Entity Framework is a lovely thing and you should waste no time learning it!

Back soon with more…..

 

4 thoughts on “Chart.js with AngularJS and Web API 2.0 – Part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.