title: Load Graph using Chart.js with Dynamic Data ASP.net MVC-Core
body: <p>I am new to ASP.net MVC using Bootstrap to load a graph with dynamic data coming from the database. I use this link as guide and tutorial in starting. <a href="https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/" rel="nofollow noreferrer">https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/</a></p>
  
  <p>I was able to load the graph with static data, right now, I want to fill the graph with data dynamically that comes from the database.</p>
  
  <p>Here's the codes started</p>
  
  <p><strong>patientService.cs</strong> - this will give a result set of patient's vital sign (height, weight and date recorded). One patient may have a multiple recorded vital sign per date. This will be the label and the data of the graph (height and date)</p>
  
  <pre><code>   public IEnumerable&lt;VisitVitalSignVM&gt; GetVisitVitalSignHeight(int patientId)
          {
  
              var patientList = _patient.GetAllPatient().Where(a =&gt; a.patientId.Equals(patientId));
              var registrationList = _registration.Get().Where(a =&gt; a.patientId.Equals(patientId));
              var visitVitalSignList = _visitVitaSign.Get();
              var dataCreatedDate = (from a in visitVitalSignList
                                     join b in registrationList on a.registrationId equals b.registrationId
                                     where a.registrationId == b.registrationId
                                     //select a).ToList();
                                     select new VisitVitalSignVM()
                                     {
  
                                         height = a.height,
                                         weight = a.weight,
                                         lastUpdatedDate = a.lastUpdatedDate
                                     }
                                     ).DefaultIfEmpty();
              return dataCreatedDate;
          }
  </code></pre>
  
  <p>Note that <code>lastUpdatedDate</code> represents the data for the x-axis and <code>height</code> represents the data for the <code>y</code> axis.</p>
  
  <p><strong>patient.cs</strong> - the will pull data from the service layer and forward result in viewModel through partial view. </p>
  
  <pre><code> [HttpGet]
     public IActionResult GetVisitVitalSignDetails(int patientId, string type, string graph)
    {
        var visitSign = _patient.GetVisitVitalSignHeight(patientId);
        return PartialView("_ViewVisitVitalSignGraphDetails", visitSign);
    }
  </code></pre>
  
  <p><strong>_partialViewPatient.cshtml</strong> - this will then receive the data needed to plot the graph. Currently, the code in the javascript are the static one. I am now lost, <strong>on how to plot the data from the VisitVitalSignVM Model to the datasets.</strong></p>
  
  <pre><code>**@using UMP.ClinicalSystem.Models.Models;
  @using UMP.ClinicalSystem.Models.Dto;
  
  @model IEnumerable&lt;VisitVitalSignVM&gt;
  
  @{
      Layout = null;
  }
  
     &lt;div id="chartContainer"&gt; &lt;/div&gt;
  
  
  
  &lt;script src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
      var chart = new CanvasJS.Chart("chartContainer", {
              theme: "theme2",
              animationEnabled: true,
              title: {
                  text: "Simple Column Chart in ASP.NET MVC"
              },
              subtitles: [
                  { text: "Try Resizing the Browser" }
              ],
              data: [
              {
                  type: "line", //change type to bar, line, area, pie, etc
                  dataPoints: [
                  { x: 10, y: 71 },
                  { x: 20, y: 55 },
                  { x: 30, y: 50 },
                  { x: 40, y: 65 },
                  { x: 50, y: 95 },
                  { x: 60, y: 68 },
                  { x: 70, y: 28 },
                  { x: 80, y: 34 },
                  { x: 90, y: 14 }
                  ]
              }
              ]
          });
          chart.render();
  &lt;/script&gt;**
  </code></pre>