angularjs - show dygraph in list items -
can body tell me how display dygraph in listview using json response. here response need make dygraph..i goggled did'nt clue it.
http://piratepad.net/ep/pad/view/ro.y8pksmhlihk/latest
this how doing :-
in index.html :-
<script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <script src="js/dygraph-combined-dev.js"></script> <script src="js/dygraph-combined.js"></script> <!-- app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script>
in home.html :-
<div ng-repeat="entry in listnew"> <div class="bar bar-dark bar-head"> <h2>basestation {{entry.baseid}} {{entry.nickname}}</h2> </div> <ion-list> <div ng-repeat="scout in entry.scouts"> <div class="wrap_home"> <ion-item class="item-accordion" ng-click="togglegroup(scout)" ng-class="{active: isgroupshown(scout)}" ng-init="showgraph(scout.temphistory)"> <div class="row"> <div class="col col-25"> <div class="top_spc"> <b>{{scout.moduleid}}</b> </div> </div> <div class="col col-25"> <div class="top_spc">{{scout.nickname}}</div> </div> <div class="col col-20"> <div class="top_spc temp_mid"> {{scout.temperature}}<sup>o</sup>c </div> </div> <div class="col"> <div class="batt_icon "> <img src="img/battery.png" alt="battery" /> </div> </div> <div class="col"> <div ng-if="scout.power=='0'"> <div class="plug_icon red"> <img src="img/plug.png" alt="plug" /> </div> </div> <div ng-if="scout.power=='1'"> <div class="plug_icon"> <img src="img/plug.png" alt="plug" /> </div> </div> </div> </div> </ion-item> <ion-item class="item-accordion sm-item" ng-show="isgroupshown(scout)"> <div class="sub_detail"> <div class="row"> <div class="col col-50"> <b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}} min ago)</span> </div> <div class="col col-50">{{scout.templow}}(l), {{scout.temphigh}}(a), {{scout.tempavrg}} (avg)</div> </div> <div id=graph> </div> </div> </ion-item> </div> </div> </ion-list> </div>
in controller.js :-
$scope.showgraph = function(data) { g = new dygraph(document.getelementbyid("graph"), // possible data formats, see http://dygraphs.com/data.html // x-values dates, e.g. "2012/03/15" data, { // options go here. see http://dygraphs.com/options.html legend : 'always', animatedzooms : true, title : 'dygraphs chart template' }); };
here data displayed in pirate-pad.
problem getting dygraph @ first item not on remaining.
here go :-
in controller.js define :-
$scope.graphs = [ { data : data(place javascript array here), }, ]; }) .directive( 'graph', function() { return { restrict : 'e', scope : { data : '=', opts : '=' }, template : '<div class="graph"></div><div class="labels"></div>', link : function(scope, elem, attrs) { var graph = new dygraph(elem.children()[0], scope.data, scope.opts); } }; });
in home.html define :-
<ion-list> <div ng-repeat="scout in entry.scouts" > <div class="wrap_home"> <ion-item class="item-accordion" ng-click="togglegroup(scout,scout.temphistory)" ng-class="{active: isgroupshown(scout)}" > <div class="row"> <div class="col col-25"> <div class="top_spc"> <b>{{scout.moduleid}}</b> </div> </div> <div class="col col-25"> <div class="top_spc">{{scout.nickname}}</div> </div> <div class="col col-20"> <div class="top_spc temp_mid"> {{scout.temperature}}<sup>o</sup>c </div> </div> <div class="col"> <div class="batt_icon "> <img src="img/battery.png" alt="battery" /> </div> </div> <div class="col"> <div ng-if="scout.power=='0'"> <div class="plug_icon red"> <img src="img/plug.png" alt="plug" /> </div> </div> <div ng-if="scout.power=='1'"> <div class="plug_icon"> <img src="img/plug.png" alt="plug" /> </div> </div> </div> </div> </ion-item> <ion-item class="item-accordion sm-item" ng-show="isgroupshown(scout)"> <div class="sub_detail"> <div class="row"> <div class="col col-50"> <b>{{scout.equipment_type}} </b><span>({{scout.last_report_at}} min ago)</span> </div> <div class="col col-50">{{scout.templow}}(l), {{scout.temphigh}}(a), {{scout.tempavrg}} (avg)</div> </div> <div > <graph ng-repeat="graph in graphs" data="graph.data" opts="graph.opts"></graph> </div> </div> </ion-item> </div> </div> </ion-list>
dygraph have problem ng-repeat read in link given bellow :-
Comments
Post a Comment