title: Dynamic charts with MVC and CanvasJS
body: <p>I am trying to generate a CanvasJS bar chart from an MVC model list.
  this seems to generate the objects ok but when I try to render the chart canvasJS complains it cannot find the data array.any ideas please?</p>
  
  <pre><code>&lt;script&gt;
      var yearbargraphchart = new CanvasJS.Chart("chartContainerbar1");
  
      yearbargraphchart.options.title = {
          text: "Year attendance: " + " percent_attend var here " + " %",
          fontWeight: "bolder",
          fontColor: "#008B8B",
          fontSize: 20,
          padding: 10
      };
  
      yearbargraphchart.options.axisX = {
          title: "Axis X Title"
      };
      yearbargraphchart.options.axisY = {
          title: "Axis Y Title"
      };
  
      var fa = [];
      yearbargraphchart.data = fa;              
  &lt;/script&gt;
  
  
  @foreach (var item in Model){
  &lt;script&gt;
      var bp = [];
      var obj = {}
     obj.foo = "test";
     test = [];
  
   bp.push({ label: ' Present: ' + "@(item.Marks_present)" , y: "@(item.Marks_present)" });      
  
      var n = "dps@(item.Month)";            // set dynamic name for sub array:
      var test = { type: "bar", name: n };      
      test.dataPoints = bp;
      fa.push(test);
  
     console.log("post yearbargraphchart.data.push " + JSON.stringify(yearbargraphchart.data));
  &lt;/script&gt;
  }
  
  &lt;script&gt;
  yearbargraphchart.render();
  yearbargraphchart = {};
  &lt;/script&gt;
  </code></pre>