title: C# MVC5 View dynamically filled Chart.js dont show up
body: <p>I am trying to implement a chart of the chart.js library into my view. However, i am not able to display the chart as desired.</p>
  
  <p>The particular part in my razor view:</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
              &lt;p class="text-center"&gt;
              &lt;strong&gt;Energy Consumption and Production: 1 Jan, 2016 - 30 Jul, 2016&lt;/strong&gt;
               &lt;/p&gt;
               &lt;div class="chart-responsive"&gt;
               &lt;canvas id="trendChart" width="800" height="400"&gt;&lt;/canvas&gt;
               &lt;/div&gt; @*/.chart-responsive*@ 
  </code></pre>
  
  <p>My Javascript code regarding the line chart:</p>
  
  <pre><code>$(function () {
  
  var datachart = {
      labels: [],
      datasets: [
          {
              label: "Consumption",
              backgroundColor: "rgba(215,220,67,0.3)",
              borderColor: "rgba(220,220,220,0.7)",
              borderWidth: 1,
              hoverBackgroundColor: "rgba(220,220,220,1)",
              hoverBorderColor: "rgba(220,220,220,0.5)",
              data: []
          },
          {
              label: "Production",
              backgroundColor: "rgba(90,193,208,0.3)",
              borderColor: "rgba(151,187,205,0.7)",
              borderWidth: 1,
              hoverBackgroundColor: "rgba(151,187,205,1)",
              hoverBorderColor: "rgba(151,187,205,0.5)",
              data: []
          }
      ]
  };
  
  var trendChartOptions = {
      //Boolean - If we should show the scale at all
      showScale: true,
      //Boolean - Whether grid lines are shown across the chart
      scaleShowGridLines: false,
      //String - Colour of the grid lines
      scaleGridLineColor: "rgba(0,0,0,.05)",
      //Number - Width of the grid lines
      scaleGridLineWidth: 1,
      //Boolean - Whether to show horizontal lines (except X axis)
      scaleShowHorizontalLines: true,
      //Boolean - Whether to show vertical lines (except Y axis)
      scaleShowVerticalLines: true,
      //Boolean - Whether the line is curved between points
      bezierCurve: true,
      //Number - Tension of the bezier curve between points
      bezierCurveTension: 0.3,
      //Boolean - Whether to show a dot for each point
      pointDot: false,
      //Number - Radius of each point dot in pixels
      pointDotRadius: 4,
      //Number - Pixel width of point dot stroke
      pointDotStrokeWidth: 1,
      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
      pointHitDetectionRadius: 20,
      //Boolean - Whether to show a stroke for datasets
      datasetStroke: true,
      //Number - Pixel width of dataset stroke
      datasetStrokeWidth: 2,
      //Boolean - Whether to fill the dataset with a color
      datasetFill: true,
      //String - A legend template
      legendTemplate: "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].lineColor%&gt;\"&gt;&lt;/span&gt;&lt;%=datasets[i].label%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;",
      //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio: false,
      multiTooltipTemplate: "&lt;%= datasetLabel %&gt; - &lt;%= value %&gt;",
      //Boolean - whether to make the chart responsive to window resizing
      responsive: true
  };
  
  $.getJSON("/AdminLte/GetData", function (data) {
      $.each(data, function (i, item) {
          datachart.labels.push(item._DATE);
          datachart.datasets[0].data.push(item.CONSUMPTION);
          datachart.datasets[1].data.push(item.PRODUCTION);
      })
  });
  var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions);
  </code></pre>
  
  <p>});</p>
  
  <p>And my controller method for dynamically filling the data:</p>
  
  <pre><code>public ContentResult GetData()
          {
              List&lt;MeterDataTrendViewModel&gt; meterDataTrend = new List&lt;MeterDataTrendViewModel&gt;();
              var result =
              from s in db.MeterDatas.ToList()
              group s by new { s._DATE } into g
              select new
                  {
                  read_date = g.Key._DATE,
                  CONSUMPTION = g.Sum(x =&gt; Convert.ToInt64(x.CONSUMPTION)),
                  PRODUCTION = g.Sum(x =&gt; Convert.ToInt64(x.PRODUCTION))
                  };
              foreach(var res in result)
              {
                  MeterDataTrendViewModel mdv = new MeterDataTrendViewModel();
                  mdv._DATE = res.read_date;
                  mdv.CONSUMPTION = res.CONSUMPTION.ToString();
                  mdv.PRODUCTION = res.PRODUCTION.ToString();
                  meterDataTrend.Add(mdv);
              }
  
              return Content(JsonConvert.SerializeObject(meterDataTrend), "application/json");
          }
  </code></pre>
  
  <p>I`ve already debugged my js code and the data and labels array is filled correctly therefore my controller action is called. But there is only one datetime string displayed vertically so i guess it´s maybe aligned to the y-axis?</p>
  
  <p>I can also fill the chart with static data and it´s displayed correctly. I cant figure out why my dynamic data isn´t displayed the right way.</p>