show dygraph in list items - angularjs

Question

Can any body tell me how to display dygraph in listview using json response.
Here is my response from which i need to make dygraph..i goggled about it but its did'nt get any clue about it.
http://piratepad.net/ep/pad/view/ro.y8PksMhLIhk/latest
this is how i am doing :-
In My Index.html :-
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/dygraph-combined-dev.js"></script>
<script src="js/dygraph-combined.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
In My 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 my controller.js :-
$scope.showGraph = function(data) {
g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be 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 is which i displayed in pirate-pad.
The problem is I am getting dygraph only at first item but not on remaining.

Answer 1

Here you go :-
In Your Controller.js Define :-
$scope.graphs = [
{
data : data(Place your 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 your 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 some problem with ng-repeat As I read in the link given bellow :-
Dygraphs not working with ng-repeat