how to show chars on default page? - html

Question

I page web aplication with index.html file where is my login page. after succes log in I want to load page with routeProvider where i am using charts to draw diagrams . I have Error when i am loading just index.html for logg in not even this page where i am using charts.
my error looks like
Error: Please set height and width for the chart element
i#http://localhost:8080/pos/js/angular-charts.min.js:1:12049
Y/<#http://localhost:8080/pos/js/angular.min.js:70:91
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
ngViewFillContentFactory/<.link#http://localhost:8080/pos/js/angular-route.js:983:7
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
I/<#http://localhost:8080/pos/js/angular.min.js:52:283
l#http://localhost:8080/pos/js/angular.min.js:56:293
update#http://localhost:8080/pos/js/angular-route.js:933:25
Pe/this.$get</l.prototype.$broadcast#http://localhost:8080/pos/js/angular.min.js:128:120
commitRoute/<#http://localhost:8080/pos/js/angular-route.js:616:15
f/<#http://localhost:8080/pos/js/angular.min.js:112:20
Pe/this.$get</l.prototype.$eval#http://localhost:8080/pos/js/angular.min.js:125:301
Pe/this.$get</l.prototype.$digest#http://localhost:8080/pos/js/angular.min.js:122:390
Pe/this.$get</l.prototype.$apply#http://localhost:8080/pos/js/angular.min.js:126:56
l#http://localhost:8080/pos/js/angular.min.js:81:169
S#http://localhost:8080/pos/js/angular.min.js:85:301
vf/</D.onload#http://localhost:8080/pos/js/angular.min.js:86:315
<div data-ac-chart="'pie'" data-ac-data="cityData" data-ac-config="cityConf" class="chart ng-isolate-scope" id="chart">
here is my html file where i have charts
<div class="row-fluid maginTopDiv">
<div class="span4">
<h2>City</h2>
<div
data-ac-chart="'pie'"
data-ac-data="cityData"
data-ac-config="cityConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Type</h2>
<div
data-ac-chart="'pie'"
data-ac-data="termTypeData"
data-ac-config="termTypeConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Program ID</h2>
<div
data-ac-chart="'pie'"
data-ac-data="programIdData"
data-ac-config="programIdConf"
class="chart" id="chart">
</div>
</div>
</div>
here is my css content for this divs
.chart{
width: 100%;
height: 200px;
}
my config for routing
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/dashboard', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/archive',{
templateUrl: 'problemArchive.htm',
controller: 'mainController'
})
.otherwise({
templateUrl: 'home.htm',
controller: 'mainController'
});
});
and in controller i am defining data for this charts after successuly logg in and after login i am getting data on the page except this charts.
why i have this errors when i even not loading this page i just have index.html page where i am not using charts, just after log in