Click here to Skip to main content
15,879,535 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using chart.js to create chart from the data i recive using linq query in my controler and return those values as json but so far i have tried this and isnt getting those values of the json, Here is what i Have tried so far:-

This is my Controller:-

C#
[HttpPost]
        public JsonResult MonthlyTurnover(string info)
        {
            var list = (from c in NMSDC.DataSends
                        where c.UserID == Session["UserID"].ToString() && c.RCommission != null && c.DT.Month == DateTime.Now.Month
                        group c by new { c.UserID, c.DT.Date } into g1
                        orderby g1.Key.Date descending
                        select new MonthlyTurnoverChart
                        {
                            Amount = g1.Sum(item => item.value),
                            NoOfTransaction = (int)g1.Count(),
                            //Date = g1.Key.Date.ToShortDateString()
                        }).ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }


and the View and My Javascript are As Follows:-

HTML
<div class="col-md-6" style="margin-removed 2em;">
       <!-- Line CHART -->
       <div class="box box-primary">
           <div class="box-header with-border">
               <h3 class="box-title">Monthly Turnover</h3>
               <div class="box-tools pull-right">
                   <button class="btn btn-box-tool" data-widget="collapse"></button>
               </div>
           </div>
           <div class="box-body">
               <div class="chart">
                   <canvas id="lineChart" height="200" width="200"></canvas>
               </div>
           </div>
           <!-- /.box-body -->
       </div>
       <!-- /.box -->
   </div>


Now the Javascript that i wrote:-

JavaScript
$(function () {
    var path = window.location.href;
    if (path == "http://localhost:55261/Retailer") {
        var info = $("#lbllogininfo").val();
        alert(info);
        $.ajax({
            type: "POST",
            url: '/Retailer/MonthlyTurnover',
            data: JSON.stringify({ info: info }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (list) {             <<<---------------The Problem Is Here 
                     I am Getting Values as 
                     [[object] [Object],[object] [Object],[object] [Object],[object] [Object]]------>>

                alert("all data recivcd :" + list);
                var alldata = $.each(list, function (data) {
                    alldata = "'" + data.Amount + "'";
                });
                var lbl = alldata[0];
                var dataset1 = alldata[1];
                var dataset2 = alldata[2];


                var cdata = {
                    labels: lbl,
                    datasets: [{
                        label: "My First Dataset",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: dataset1
                    },
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: dataset2
                    }]

                };
                alert("AllData: " + alldata);
                alert("Chart Data: " + list);
                Chart.defaults.global.responsive = true;
                var ctx = $("#lineChart").get(0).getContext('2d');
                var linechart = new Chart(ctx).Line(cdata, {
                    bezierCurve: false
                });
            },
            error: function (data) {
                alert("Chart Error: " + data);
            }
        });
    }
});

and the Model Is as Follows:
C#
public class MonthlyTurnoverChart
    {
        public decimal Amount { get; set; }
        public Nullable<int> NoOfTransaction { get; set; }
        public string Date { get; set; }
    }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900