title: How to bind data from Controler to chartjs line chart to create it as dynamic?
body: <p>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:-</p>
  
  <p>This is my Controller:-</p>
  
  <pre><code> [HttpPost]
      public JsonResult MonthlyTurnover(string info)
      {
          var list = (from c in NMSDC.DataSends
                      where c.UserID == Session["UserID"].ToString() &amp;&amp; c.RCommission != null &amp;&amp; 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 =&gt; item.value),
                          NoOfTransaction = (int)g1.Count(),
                          //Date = g1.Key.Date.ToShortDateString()
                      }).ToList();
          return Json(list, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>and the View and My Javascript are As Follows:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-6" style="margin-left: 2em;"&gt;
    &lt;!-- Line CHART --&gt;
    &lt;div class="box box-primary"&gt;
      &lt;div class="box-header with-border"&gt;
        &lt;h3 class="box-title"&gt;Monthly Turnover&lt;/h3&gt;
        &lt;div class="box-tools pull-right"&gt;
          &lt;button class="btn btn-box-tool" data-widget="collapse"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box-body"&gt;
        &lt;div class="chart"&gt;
          &lt;canvas id="lineChart" height="200" width="200"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.box-body --&gt;
    &lt;/div&gt;
    &lt;!-- /.box --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the Javascript that i wrote:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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) { &lt;&lt; &lt; ---------------The Problem Is Here
          I am Getting Values as
            [[object][Object], [object][Object], [object][Object], [object][Object]] ------ &gt;&gt;
  
            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);
        }
      });
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>and the Model Is as Follows:</p>
  
  <pre><code>public class MonthlyTurnoverChart
  {
      public decimal Amount { get; set; }
      public Nullable&lt;int&gt; NoOfTransaction { get; set; }
      public string Date { get; set; }
  }
  </code></pre>