0

My HTML code:

Here I am retrieving fields(key) from JSON file and displaying it in the options. Whichever option I am selecting from selection's dropdown section , I am sending that option to my angular script js file , through 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.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},{..}...]}

Code is working fine without any error.

For Example : If I select "Serial" field in drop down,it is selected properly and displayed in angularjs script file also ( using console.log(tobeselected);), but my d3.nest option is not working properly.

If I give normally like

d3.nest() .key(function(d){return d.Serial;} .rollup(function(v){return v.length;})

I am getting the chart properly. PLease help me to solve this problem .

gaurav5430
  • 12,934
  • 6
  • 54
  • 111
naik bm
  • 37
  • 5
  • `but my d3.nest option is not working properly` - can you please elaborate what this means? what do you expect? what do you get instead? are there any errors in your console? – Jaromanda X Feb 16 '16 at 11:22
  • No errors , d3.nest is unable to process this **return d.tobeselected;** line. Control is going inside that d3.nest , bcoz on the console I am getting output (console.log(tobeselected); )( whicherver options I am selection ). If I replace with this **return d.Serial;** , I am able to plot. please help me to solve the problem. – naik bm Feb 16 '16 at 12:57
  • you are logging tobeselected but returning d.tobeselected. i guess your d,tobeselected is undefined – gaurav5430 Feb 16 '16 at 13:34

1 Answers1

1

if you want to use a dynamic property name, you need to use the associative array syntax

assuming tobeselected is the property name , then you can use d[tobeselected]

so use return d[tobeselected] instead of d.tobeselected

When you use d.tobeselected , javascript will look out for a actual property named tobeselected on the d object (which does not exist) and not a property name equal to the value of the variable tobeselected

gaurav5430
  • 12,934
  • 6
  • 54
  • 111
  • Thank you for your reply. I tried this **d[tobeselected]** , but no change , In the console I am getting what I am selecting , but not graph. – naik bm Feb 16 '16 at 14:08
  • can you try console.log( d[tobeselected] ); ? – gaurav5430 Feb 16 '16 at 14:12
  • I tried this : **console.log( d[tobeselected] );** , on the console I am getting output like : 01 - ARTUCALA 01- ZAKDJSJS 02 - ARTUCALA 01 - ZAKDJSJS – naik bm Feb 17 '16 at 05:12
  • I think it is parsing JSON data separately , output should have been like 03 - ARTUCALA 02 - ZAKDJSJS. – naik bm Feb 17 '16 at 05:13
  • do you get the correct answer when you put d.Serial directly – gaurav5430 Feb 17 '16 at 05:34
  • Yes sir , On the console also it showing properly and more over I am able to plot chart properly. – naik bm Feb 17 '16 at 06:31
  • see this fiddle http://jsfiddle.net/bZX7Q/77/ it gives me same result for both d.Serial and d[tobeselected] – gaurav5430 Feb 17 '16 at 08:30
  • Thank you very much for your solution , it is calculating properly. If you give separately like that its working , but in angularjs setup its not . How can we pass field name dynamically ( In the above you have given **var tobeselected = "Serial";**) from HTML selection option to angularjs script. – naik bm Feb 17 '16 at 10:21
  • can you create a fiddle ? – gaurav5430 Feb 17 '16 at 10:39