My HTML code:
In this section of my HTML code, I am fetching fields (key) from a JSON file and displaying them as options in the selection dropdown. When an option is chosen from the dropdown, it is sent to my Angular script via the nvd3 directive data option (
data="drawData(data.repeatSelect1)"<div ng-controller="chartCtrl">
<label for="repeatSelect1"> Field 1: </label>
<select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1">
<option ng-repeat="(key, val) in jsondata[0]">{{key}}</option>
</select>
<br />
<strong>Selected Field:</strong> {{data.repeatSelect1}}<br />
<div class="col-md-6">
<div class="well well-lg">
<h2><kbd>Chart 1</kbd></h2>
<nvd3-pie-chart
data="drawData(data.repeatSelect1)"
showLabels="true"
labelType="percent"
showValues="false"
tooltips="true"
x="xFunction()"
y="yFunction()"
donut="true"
donutRatio=".5"
labelThreshold = "0.05"
showLegend="true"
donutLabelsOutside="false"
transitionDuration = "500">
</nvd3-pie-chart>
</div>
</div>
</div>
Here is my Angular script code :
angular.module('myapp').factory("test",['$http',function($http){
var obj = {};
obj.fetchdata=function(){
return $http.get('http://localhost:8080/data/my_json_file.json');
}
return obj;
}]) .controller('chartCtrl',function($scope,test){
test.fetchdata().success(function(data){
$scope.jsondata = data;
$scope.drawData = function(tobeselected){
d3.nest()
.key(function(d)
{
console.log(tobeselected);
return d[tobeselected];
})
.rollup(function(v){return v.length;})
.entries(data)
}
$scope.xFunction = function() {
return function(d) {
return d.key;
};
}
$scope.yFunction = function() {
return function(d) {
return d.values;
};
}
});
})
And here is my JSON file named 'my_json_file.json'
[{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{..}...]}
The code is functioning correctly without any errors.
For example, when I select the "Serial" field from the dropdown, it is properly displayed in the AngularJS script (using console.log(tobeselected)), but the d3.nest option is not working as intended.
If I input it normally like:
d3.nest()
.key(function(d){return d.Serial;}
.rollup(function(v){return v.length;})I get the chart correctly. Please assist me in solving this issue.