Chart.js - Getting data from database using sql server and asp.net mvc5

A few months ago when i was in a project, i did smth like this. We had a calendar on website. When the date changes we refresh charts by using ajax.

First, Use ViewModel, then on your Index.cshtml render partialview with Model. Secondly, send ajax request to grab data from service. OnSuccess Method fill the id of div with data.

On your Controller return PartialView with Model.

On your partialview, create empty array to store data. then fill the array from Model then use it on chart.

try this.

Code Of Index.cshtml

@model ProjectName.Models.MyViewModel

<div id="DataZone">
   @{
        Html.RenderPartial("your_partialview",Model);
     }
</div>



 <script>
   ..
       $.ajax({
                    url: "request_url",
                    method: "post",
                    data: {
                        param1: yourval,
                        param2: yourval2
                    },
                    success: function (data) {
                       $("#dataZone").html(data);
                    },
                    error: function(data) {
                       console.log(data);
                    }
                });
    });
    <script>

ex Code of Controller

    [HttpPost]
        public ActionResult GetData(DateTime param1,DateTime param2)
        {
            ExampleService es= new ExampleService ();
            ExampleViewModel evm = new ExampleViewModel ();
           evm.ListForChart = es.GetWeekly(param1,param2);
           evm.ListForChart2 = es.GetMothly(param1,param2);
..
return PartialView("your_partialviewname", evm);
}

ex code of ExampleViewModel

   public class MarketViewModel
        {
            public List<YourModel> ListForChart { get; set; }
            public List<YourModel> ListForChart2 { get; get;}
    }

example Service from your code:
public class YourService{
 private List<YourModel> exampleList;
 public YourService(){
  exampleList = new List<YourModel>();
}

 public List<YourModel> GetWeekly(param1, param2)
   // data is List of your model. return this.
   var data = (from a in ExpenseReport
                    join at in Amount on a.ItemName equals at.Amount
                    where a.Date >= FromDate
                          && a.Date < ToDate
                    group at by at.ItemName into g
                    select new
                    {
                        value = g.Count(),
                        label = g.Key
                    }).ToList();

return data;

}
}

example code of PartialView

<div id="chart-gonna-be-here"></div>

<script type="text/javascript">
  $(document).ready(function() {
        CreateChart();
}

CreateChart = function(){
  var data= []; // You will fill data from Model.
 @foreach (var item in Model.ListForChart.OrderBy(c => c.Date))
        {
            @:data.push(@item.YourModelObj.ToString();
        }
}

// Then Create chart

      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: /**/ data <<--- data will be here
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            }]
                    }
                }

            });
</script>