Need help. I am doing a very simple application do create a Ignite UI chart in the AngularJS app consuming data from Web API
Always getting the error as shown in the image below :
For reference codes used are given below:
Service
var app = angular.module('dataservice', []);
app.factory('populationData', ['$http', function ($http) {
var populationData = {};
populationData.data = function () {
alert("hi");
return $http.get('http://localhost:56649/API/CITIES');
};
return populationData;
}]);
Controller
var myapp = angular.module('myapp', ['igniteui-directives', 'dataservice']);
myapp.controller('dataChartController', ['$scope', 'populationData', function ($scope, populationData) {
getData();
function getData() {
populationData.data()
.success(function (cities) {
$scope.a = cities;
console.log($scope.a);
alert($scope.a);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log('error');
});
}
View
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Ignite UI Chart in AngularJS Demo</title>
<!--For IG Chart-->
<link href="Content/Infragistics/css/structure/infragistics.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/modernizr-2.7.2.js"></script>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>
<script src="Scripts/Infragistics/js/infragistics.core.js"></script>
<script src="Scripts/Infragistics/js/infragistics.dv.js"></script>
<script src="Scripts/Infragistics/js/infragistics.lob.js"></script>
<script src="Scripts/angular.js"></script>
<script src="igniteui-angular.js"></script>
<script src="Service.js"></script>
<script src="default.js"></script>
</head>
<body class="container">
<div class="row" ng-controller="dataChartController">
<h1>Ignite UI + AngularJS</h1>
<h2>Countries Population</h2>
<div class="row">
<table>
<tr ng-repeat="c in a">
<td>{{c.Name}}</td>
<td>{{c.Population01}}</td>
</tr>
</table>
</div>
<ig-data-chart id="datachart1" data-source="a">
<axes>
<axis name="NameAxis"
type="categoryX"
title="Name"
label="Name"></axis>
<axis name="PopulationAxis"
type="numericY"
minimumvalue="0"
title="Milions of People"></axis>
</axes>
<series>
<series name="2001Population"
type="column"
is-highlighting-enabled="true"
is-transition-in-enabled="true"
x-axis="NameAxis"
y-axis="PopulationAxis"
value-member-path="Population01">
</series>
</ig-data-chart>
<!--<ig-zoombar target="#datachart1"></ig-zoombar>-->
</body>
</html>
Any help ? or connect me with someone who can help !
Hello Dhananjay,
You can set initially the dateSource to be empty array, in order the chart to be bound to a valid object.
1 2 3 4 5
myapp.controller('dataChartController', ['$scope', 'populationData', function ($scope, populationData) { $scope.a = []; ... }]);
Let me know if you need further assistance.
Thanks it is working !