ASP.Net Web API 2 and AMCHARTS

Amcharts is one of the best js base chart service out there today.   Amcharts takes JSON data and display all sorts of neat charts.  Here, I am generating JSON data through ASP.Net Web API 2 and show AmCharts graphs.

I followed tutorial document from Amcharts (https://www.amcharts.com/tutorials/using-data-loader-to-connect-charts-to-mysql-data-base/).  This tutorial goes over how to query data from mySQL then generate JSON data then display charts in PHP, but we don’t have to worry about MySQL or PHP, we just create and fetch JSON data from API and goes from there.

First, we will have to know what type of data you want to generate.  We can generalize shape of data we want to work with.  Graphs usually are generated from table of data (or in this case JSON data that fits in table).  If you are to work with 2D graphs, then we will need to generate 2 dimensions of data, x and y. And that’s what we do today.

Let’s start with something simple.  I have system log stored in my DB,  X being time, call it category, Y being some value of some log properties, call it value1 and value2.

Create Model (ASP.Net Web API AmCharts)

I open new Web API project from your visual studio and then;

I create Model first like below;

Create Controller (ASP.Net Web API AmCharts)

Then I go to controller.  I am adding some random values first. (I will worry about fetching actual data later).

This is it, now you have API.  Now I am use Postman to check and see if I get JSON data I expect when I call GET: /api/AmCharts/.

スクリーンショット_020616_115849_AM

Goody, I got it.

Before going to View,

In order to call ASP.Net API in AmChart Data Loader, you have to enable CORS else you will get error like “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://localhost:’ is therefore not allowed access.”.

You can read http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api for more detail about enabling CORS. Or here, http://enable-cors.org/server_aspnet.html.

To enable CORS, you will need to install WebApi.Cors from your NuGet and go to /App_Start/WebApiConfig.cs and add lines like below;

You can enable CORS per Action, Controller, or Globally.  Above code enables globally inside WebAPI.config.  You can be specific about which origin can call your API, but for now I use wild card *, which isn’t the most recommend way in production environment.

Create View (ASP.Net Web API AmCharts)

Here is my View;

Then you should get view like below;

スクリーンショット_020616_115111_AM

Good, it’s working.

OKi I will cover more advance graphs in data next.

5 Replies to “ASP.Net Web API 2 and AMCHARTS”

Leave a Reply