angularjs - Creating multiple CanvasJS charts inside <div> with ng-repeat -


i trying create multiple canvasjs charts inside div.

the div expects array of data controller, loops through it(using ng-repeat) , displays data in various controls.

now when try put canvasjs chart inside div, chart not render , error see 'chart id not found'

but same chart works outside div.

sample code here: http://jsfiddle.net/dthewebdev/mozfsxpc/7/

app.js

var m = {   "india": "2",   "australia": "3" };  function myctrl($scope) {   $scope.items = m; } var dps = [{   x: 1,   y: 10 }]; //datapoints.   var chart = new canvasjs.chart("chartcontainer", {   title: {     text: "live data"   },   axisx: {     title: "axis x title"   },   axisy: {     title: "units"   },   data: [{     type: "line",     datapoints: dps   }] });  chart.render(); var xval = dps.length - 1; var yval = 15; var updateinterval = 1000;  var updatechart = function() {   yval = yval + math.round(5 + math.random() * (-5 - 5));   dps.push({     x: xval,     y: yval   });   xval--;   chart.render();  }; setinterval(function() {   updatechart() }, updateinterval); 

html:

<h3>match summary:</h3>  <div ng-app ng-controller="myctrl">   <div ng-repeat="(country,goals) in items">     <div id="chartcontainer" style="height: 200px; width: 100%;"></div>     <h2>{{country}}: {{goals}} </h2>   </div> </div> 

tried search similar problem, no luck.

thanks time , in advance.

the flow of program should taken care of. throws error 'chart id not found' chart tried being rendered on div element doesn't exist yet. also, ids of different div elements should different. can use code similar append dynamic id.

<div ng-repeat="(country,goals) in items">      <div id="chartcontainer-{{country}}" style="height: 200px; width: 100%;"></div> <h2>{{country}}: {{goals}} </h2> </div> 

here working jsfiddle


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -