Can any one help with an example illustrating web api calls in mvc

See more:

MVC

WebAPI

I want to have an example that can clearly explain me, when or how the first thread is getting detached from a web api call till it receives the data and at which point or how a new thread is being assigned to catch the data and bind back to the browser?

My requirement : I have to display 2 charts in a view, both charts has the web api call to the same controller. But finally only 1 charts data is getting binded in a view.

Please suggest.

Controller action methods :

public async Task<ActionResult> Index()
       {
           return View(await db.Users_Chrt_DataMapping.Where(a=>a.UserName=="Test").ToListAsync());
       }

       // GET: ChartsDashAsync1/Details/5
       public async Task<ActionResult> Details(int? id)
       {
           if (id == null)
           {
               return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
           }
           Users_Chrt_DataMapping users_Chrt_DataMapping = await db.Users_Chrt_DataMapping.FindAsync(id);
           if (users_Chrt_DataMapping == null)
           {
               return HttpNotFound();
           }
           return PartialView(users_Chrt_DataMapping);
       }

Details Partial view calling a web api for the chart data :

$(function (){
      var chtid = '@Model.ChartId';
      alert(chrtdivid);

      $.ajax({
          type: "GET",
          url: "/api/ChartsAPI/" + chtid,
          // data: { chartid: 2 },
          dataType: "json",
          success: function (seriesData) {
              console.log(seriesData);

When i have the action methods as normal unlike async, then i am able to bind only 1 chart in the browser irrespective of how many every charts data.
I have made sure that the div ids are distinct.