Chart.js - 使用 sql server 和 asp.net mvc5 从数据库中获取数据

Question

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.

Thank you.

ChartController

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 < 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 >= FromDate
                          && a.Date < 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 >= FromDate
                          && a.Date < 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);
    }

Index.cshtml

<div style="width: 80%;">
        <canvas id="barChart" heigh="400" width="400"></canvas>
    </div>
    <script>

        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,
                                },
                            }]
                    }
                }

            });
    </script>

Answer 1

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>