title: Having trouble fetching data from database for chart in ASP .NET Core
body: <p>I have troubles with loading data from my Azure SQL database to a chart I'm creating using chartJS. I am trying to fetch data from columns &quot;hrPlan&quot;, &quot;hrSub&quot; and &quot;hrFact&quot; for the year 2021 from the &quot;workTS&quot; table, but it is currently working incorrectly.<br/>If I try to get values from hrPlan,hrSub or hrFact in a log directly from chart function like this: <code>console.log(&quot;hrPlan=&quot; + hrPlan);</code> I'm getting the following error: <code>Uncaught ReferenceError: hrPlan is not defined</code>
  I think i didn't properly gave data values to my chart function, but I might be wrong.<br/>  Here's how it supposed to look like (all data is hardcoded):<a href="https://i.stack.imgur.com/x3qki.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x3qki.jpg" alt="enter image description here" /></a>
  Here's how it looks now:<a href="https://i.stack.imgur.com/IxqRn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IxqRn.jpg" alt="enter image description here" /></a>
  dbo.workTS:<a href="https://i.stack.imgur.com/d716h.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d716h.jpg" alt="enter image description here" /></a>
  My code for the workTS model:</p>
  <pre><code>public class WorkTS
      {
          public string? org { get; set; }
          public DateTime? dt { get; set; }
          public decimal? hrFact { get; set; }
          public decimal? hrPlan { get; set; }
          public decimal? hrReestr { get; set; }
          public DateTime? dtSynchro { get; set; }
          public DateTime? dtMonth { get; set; }
          public decimal? hrSub { get; set; }
          public decimal? hrFactWSub { get; set; }
      }
  </code></pre>
  <p>Context:</p>
  <pre><code>public class AzureDBContext : DbContext
      {
          public DbSet&lt;WorkTS&gt; WorkTs { get; set; }
  
          protected override void OnModelCreating(ModelBuilder modelBuilder)
          {
              modelBuilder.Entity&lt;WorkTS&gt;(builder =&gt;
              {
                  builder.HasNoKey();
                  builder.ToTable(&quot;workTS&quot;);
              });
          }
  
          public AzureDBContext(DbContextOptions&lt;AzureDBContext&gt; options)
              : base(options)
          {            
          }
          protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
          {
              optionsBuilder.UseSqlServer(&quot;{database connection string}&quot;);
          }
      }
  </code></pre>
  <p>Controller:</p>
  <pre><code>private readonly AzureDBContext _azdb;
  
          public HomeController(ILogger&lt;HomeController&gt; logger, AzureDBContext azcontext)
          {
              _logger = logger;
              _azdb = azcontext;
          }
  
          public async Task&lt;ActionResult&gt; OnGetWorkTSData_MTK()  
          {            
              var plan = _azdb.WorkTs.Where(w =&gt; w.org == &quot;ООО \&quot;МТК\&quot;&quot;).Where(w =&gt; w.dtMonth.Value.Year == 2021).Select(w =&gt; w.hrPlan).ToArray();
              var sub = _azdb.WorkTs.Where(w =&gt; w.org == &quot;ООО \&quot;МТК\&quot;&quot;).Where(w =&gt; w.dtMonth.Value.Year == 2021).Select(w =&gt; w.hrSub).ToArray();
              var fact = _azdb.WorkTs.Where(w =&gt; w.org == &quot;ООО \&quot;МТК\&quot;&quot;).Where(w =&gt; w.dtMonth.Value.Year == 2021).Select(w =&gt; w.hrFact).ToArray();
              return new JsonResult(new { hrPlan = plan, hrSub = sub, hrFact = fact });
          } 
  </code></pre>
  <p>And finally, code for the chart:</p>
  <pre><code>            &lt;div&gt;
                  &lt;canvas id=&quot;workTSChart&quot;&gt;&lt;/canvas&gt;
              &lt;/div&gt;
              &lt;script&gt;console.log(&quot;This is first debug line&quot;);&lt;/script&gt;
              &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
              &lt;script&gt;
                  $(document).ready(function () {
                      $.ajax({
                          type: &quot;Get&quot;,
                          url: '@Url.Action(&quot;OnGetWorkTSData_MTK&quot;,&quot;home&quot;)',
                          contentType: &quot;application/json&quot;,
                          dataType: &quot;json&quot;,
                          success: function (response) {                            
                              var data = response.hrPlan;
                              var data2 = response.hrSub;
                              var data3 = response.hrFact;
                                                          
                              var ctx = document.getElementById(&quot;workTSChart&quot;);
                              var workTSChart = new Chart(ctx, {
                                  type: 'bar',
                                  data: {
                                      labels: [
                                          'ООО &quot;МТК&quot;',
                                      ],
                                      datasets: [{
                                          label: 'Plan hours',
                                          data: data,
                                          backgroundColor: 'rgb(161, 221, 239)',
                                          borderColor: 'rgb(161, 221, 239)',
                                      },
                                      {
                                          label: 'Sub hours',
                                          data: data2,
                                          backgroundColor: 'rgb(254, 171, 133)',
                                          borderColor: 'rgb(254, 171, 133)',
                                      },
                                      {
                                          label: 'Fact hours',
                                          data: data3,
                                          backgroundColor: 'rgb(127, 137, 138)',
                                          borderColor: 'rgb(127, 137, 138)',
                                      }]
                                  },
                                  options: {
                                      responsive: true,
                                      plugins: {
                                          legend: {
                                              position: 'top',
                                          },
                                          title: {
                                              display: true,
                                              text: 'Test chart'
                                          }
                                      }
                                  },
                              });
  
                          },
                          error: function (response) {
                              alert(response.responseText);
                              console.log(&quot;This is ERROR line&quot;);
                          }
                      });
                  });
  </code></pre>