Search code examples
angularjs-ng-repeatchartist.jsangular-chartist.js

Dynamics charts using chartist and angular with ng-repeate


I now and I can show a chart with dynamic data but a fixed number of chart. When I want to show a dynamic number of charts, something happens with ng-repeate. I said something happens, because if in mycharts[0].container.outerHTML I had the html that I need to show the graph (generated by the library), and if I copy and paste in a fixed place in my html, it will show the graph. My ng-repeate code looks as follow:

<div class="row" ng-controller="nodesDataTablesCtrl as nodeCtrl" >
  <div  ng-repeat="(index, node) in nodeCtrl.nodes"  on-finish-render>
    <div class="row">
      <div class="col-lg-12">
        <div id="{{ node.name }}_MEMORY" class="ct-chart snp_dynamic_chart"></div>
      </div>
    </div>
  </div>
</div>


Solution

  • I found a solution, I'm not sure if is a bug of ng-repeate or Chartist.

    In my ng-repeate I use nodeCtrl.nodes, which is an array that I receive from an http.get, my solution was create an range function, wich is, a function that receive a Number and return a list from 0 to n-1. Instead of passing the nodeCtrl.nodes which is updated everytime I make a request, I update a variable numberOfNodes with the range function, I mean, my new ng-repeat will be as follow:

    <div  ng-repeat="(index, node) in nodeCtrl.numberOfNodes"  on-finish-render>
    

    and in the success function of my request I do:

    numberOfNodes = range(nodeCtrl.nodes.length)
    

    which from my point of view make that ng-repeate don't update in some way internally.

    Is important to se that programatically it shouldn't be differen but ...