title: Chart.js - Getting data from database using sql server and asp.net mvc5
body: <p>I displayed and styled the chart.js and am also using mock data in the array, I just can't get my head around how to populate the data in the chart.js using MVC 5. I have tried lots of different methods and it's displaying data but not displaying the chart. Ideally, I need two datasets; one is for the weekly expense and one for the monthly expense. Here are the methods I have tried. If anyone can suggest what I am doing wrong or just point me in the right direction it would be much appreciated.</p>
  
  <p>Thank you.</p>
  
  <p><strong>ChartController</strong> </p>
  
  <pre><code>public JsonResult WeeklyExpenseSummary()
      {
          System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart();
  
          DateTime d = DateTime.Today;
  
          var offset = d.DayOfWeek - System.DayOfWeek.Monday;
          offset = (offset &lt; 0) ? 6 : offset;
  
          DateTime FromDate = d.AddDays(-offset);
          DateTime ToDate = FromDate.AddDays(7);
  
          var data = (from a in ExpenseReport
                      join at in Amount on a.ItemName equals at.Amount
                      where a.Date &gt;= FromDate
                            &amp;&amp; a.Date &lt; ToDate
                      group at by at.ItemName into g
                      select new
                      {
                          value = g.Count(),
                          label = g.Key
                      }).ToList();
  
          return Json(JsonConvert.SerializeObject(chart.barChart(data)), JsonRequestBehavior.AllowGet);
      }
   public JsonResult MonthlyExpenseSummary()
      {
          System.Web.UI.DataVisualization.Charting.Chart chart = new System.Web.UI.DataVisualization.Charting.Chart();
  
          DateTime today = DateTime.Today;
  
          DateTime startDate = new DateTime(today.Year, today.Month, 1);
          DateTime endDate = new DateTime(today.Year, today.Month, DateTime.DaysInMonth(today.Year, today.Month));
  
          var data = (from a in ExpenseReport
                      join at in Amount on a.itemName equals at.Amount
                      where a.Date &gt;= FromDate
                            &amp;&amp; a.Date &lt; ToDate
                      group at by at.ItemName into g
                      select new
                      {
                          value = g.Count(),
                          label = g.Key
                      }).ToList();
  
          return Json(JsonConvert.SerializeObject(chart.barChart(data)), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>&lt;div style="width: 80%;"&gt;
          &lt;canvas id="barChart" heigh="400" width="400"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;script&gt;
  
          var chart = document.getElementById("barChart").getContext('2d');
          Chart.defaults.global.animation.duration = 2000;
          var barChart = new Chart(chart,
              {
                  type: 'bar',
                  data: {
                      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                      datasets: [{
                              label: 'Weekly Expenses',
                              fill: true,
                              barTension: 0.1,
                              borderColor: '#2C3E50',  
                              borderWidth: 2,
                              borderCapStyle: 'butt',
                              borderDash: [],
                              borderDashOffset: 0.0,
                              borderJoinStyle: 'miter',
                              pointBorderColor: "#2C3E50",
                              pointBackgroundColor: "#fff",
                              pointBorderWidth: 2,
                              pointHoverRadius: 8,
                              pointHoverBackgroundColor: "#2C3E50",
                              pointHoverBorderColor: "#2C3E50",
                              pointHoverBorderWidth: 5,
                              pointRadius: 10,
                              PointHitRadius:10,
                              data: [20,30,40,50,60,70,80,90,100,120,140,50]
                      },
                          {
                              label: 'Monthly Expenses',
                              fill: true,
                              barTension: 0.8,
                              backgroundColor: '#2C3E50',
                              borderColor: '#f0c419',  
                              borderWidth: 2,
                              borderCapStyle: 'butt',
                              borderDash: [],
                              borderDashOffset: 0.0,
                              borderJoinStyle: 'miter',
                              pointBorderColor: "#f0c419",
                              pointBackgroundColor: "#fff",
                              pointBorderWidth: 1,
                              pointHoverRadius: 5,
                              pointHoverBackgroundColor: "#f0c419",
                              pointHoverBorderColor: "#f0c419",
                              pointHoverBorderWidth: 2,
                              pointRadius: 1,
                              PointHitRadius:1,
                              data: /*[10,20,30,40,50,60,70,80,90,100,110,120]*/ data
                          }
                      ]
                  },
                  options: {
                      scales: {
                          yAxes: [
                              {
                                  ticks: {
                                      beginAtZero: true,
                                  },
                              }]
                      }
                  }
  
              });
      &lt;/script&gt;
  </code></pre>