title: ASP.NET MVC: Bar Chart from JSON Data ViewBag
body: <p>I have a JSON data from database like below to build a dashboard in dashboard ASP.NET MVC. I would like to draw a daily and monthly bar chart with x-axis as datetime (Day) and y-axis as count of activities in a day.</p>
  <p>JSON Data:</p>
  <pre><code> [{&quot;count&quot;:42,&quot;datetime&quot;:&quot;2020-07-18T00:00:00&quot;},{&quot;count&quot;:49,&quot;datetime&quot;:&quot;2020-07-16T00:00:00&quot;},{&quot;count&quot;:90,&quot;datetime&quot;:&quot;2020-07-14T00:00:00&quot;},{&quot;count&quot;:85,&quot;datetime&quot;:&quot;2020-07-17T00:00:00&quot;},{&quot;count&quot;:100,&quot;datetime&quot;:&quot;2020-07-13T00:00:00&quot;},{&quot;count&quot;:38,&quot;datetime&quot;:&quot;2020-07-19T00:00:00&quot;},{&quot;count&quot;:53,&quot;datetime&quot;:&quot;2020-07-15T00:00:00&quot;}]
  </code></pre>
  <p>and i want something like this
  <a href="https://i.stack.imgur.com/oPzEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oPzEO.png" alt="" /></a></p>
  <p>I've tried the following javascript code but can't. JSON data obtained from ViewBag.dataItems</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot; &gt;
  window.onload = function () {
   
  var result = @Html.Raw(ViewBag.dataItems);
  var DataItem =[];
      for (var i = 0; i &lt; result.length; i++){
          DataItem.push({
              x: new Date(result[i].datetime),
              y: result[i].count
          });
  }
  var chart = new CanvasJS.Chart(&quot;chartContainer&quot;, {
      animationEnabled: true,
      data: [{
          type: &quot;column&quot;,
          DataItem: DataItem
      }]
  });
  
  chart.render();
   
  };
  &lt;/script&gt;
  </code></pre>
  <p>ThankYou</p>