ramnathv/index.html

## index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
    <script src='http://nvd3.org/lib/fisheye.js' type='text/javascript'></script>

     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    .bs-docs-example:after {
      content: "";
      background: transparent;
      border: none;
    }
    </style>

  </head>
  <body ng-app>

    <div class='container' ng-controller="DemoCtrl">
  <div class='row'>
    <div class='col-md-3'>
      <form class='well'>
        <label><b>Select  y :</b></label>
    		<select class='form-control' ng-model="opts.y"
          ng-options="ctl for ctl in controls.y.values">
    		</select><br>
              </form>
    </div>
    <div class='col-md-8'>
      <div class="bs-docs-example">
        <div id='chart12df3ce76058' class='rChart '>
          <svg></svg>
        </div>

      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
function DemoCtrl($scope){
  $scope.opts = {
 "dom": "chart12df3ce76058",
"width":    700,
"height":    400,
"process_data": true,
"x": "Sp",
"y": "A",
"group": "Sp",
"type": "pieChart",
"id": "chart12df3ce76058"
}
  $scope.data = [
 {
 "Sp": "a",
"A":             10,
"B":              3,
"C":              1
},
{
 "Sp": "b",
"A":              4,
"B":              5,
"C":              0
},
{
 "Sp": "c",
"A":              3,
"B":             22,
"C":             10
},
{
 "Sp": "d",
"A":              0,
"B":              4,
"C":              8
}
]
  $scope.controls = {
 "y": {
 "name": "y",
"value": "A",
"values": [ "A", "B", "C" ],
"label": "Select  y :"
}
}
  $scope.filters = []

  $scope.drawChart = function(){
    drawChart($scope.opts, $scope.data)
  }

  $scope.$watch('selected', function(){
    var keys = _.pluck($scope.selected, "variable")
    var values = _.pluck($scope.selected, "value")
    $scope.opts.selected = _.zipObject(keys, values)
  })

  $scope.$watch('opts',function(){
    $scope.drawChart()
	}, true)
}

function drawChart(opts, data){
  if (Object.keys(opts.selected).length > 0){
    data = _.filter(data, opts.selected)
  }

  if(!(opts.type==="pieChart" || opts.type==="sparklinePlus" || opts.type==="bulletChart")) {
    var data = d3.nest()
      .key(function(d){
        //return opts.group === undefined ? 'main' : d[opts.group]
        //instead of main would think a better default is opts.x
       return opts.group === undefined ? opts.y : d[opts.group];
      }).entries(data);
  }

  if (opts.disabled != undefined){
    data.map(function(d, i){
      d.disabled = opts.disabled[i]
    })
  }

	nv.addGraph(function() {
		var chart = nv.models[opts.type]()
			.x(function(d) { return d[opts.x] })
			.y(function(d) { return d[opts.y] })
			.width(opts.width)
			.height(opts.height)


	d3.select("#" + opts.id + ' svg')
  // .empty()
		.datum(data)
		.transition().duration(500)
		.call(chart);

	 nv.utils.windowResize(chart.update);
	 return chart;
  });
};
</script>

  </body>
</html>
	<!doctype HTML>
	<meta charset = 'utf-8'>
	<html>
	<head>
	<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'>

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
	<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
	<script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script>
	<script src='http://nvd3.org/lib/fisheye.js' type='text/javascript'></script>

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

	<style>
	.rChart {
	display: block
	margin: auto auto;
	width: 100%;
	height: 400px;
	}
	.bs-docs-example:after {
	content: "";
	background: transparent;
	border: none;
	}
	</style>

	</head>
	<body ng-app>

	<div class='container' ng-controller="DemoCtrl">
	<div class='row'>
	<div class='col-md-3'>
	<form class='well'>
	<label><b>Select y :</b></label>
	<select class='form-control' ng-model="opts.y"
	ng-options="ctl for ctl in controls.y.values">
	</select><br>
	</form>
	</div>
	<div class='col-md-8'>
	<div class="bs-docs-example">
	<div id='chart12df3ce76058' class='rChart '>
	<svg></svg>
	</div>

	</div>
	</div>
	</div>
	</div>
	<script type="text/javascript">
	function DemoCtrl($scope){
	$scope.opts = {
	"dom": "chart12df3ce76058",
	"width": 700,
	"height": 400,
	"process_data": true,
	"x": "Sp",
	"y": "A",
	"group": "Sp",
	"type": "pieChart",
	"id": "chart12df3ce76058"
	}
	$scope.data = [
	{
	"Sp": "a",
	"A": 10,
	"B": 3,
	"C": 1
	},
	{
	"Sp": "b",
	"A": 4,
	"B": 5,
	"C": 0
	},
	{
	"Sp": "c",
	"A": 3,
	"B": 22,
	"C": 10
	},
	{
	"Sp": "d",
	"A": 0,
	"B": 4,
	"C": 8
	}
	]
	$scope.controls = {
	"y": {
	"name": "y",
	"value": "A",
	"values": [ "A", "B", "C" ],
	"label": "Select y :"
	}
	}
	$scope.filters = []

	$scope.drawChart = function(){
	drawChart($scope.opts, $scope.data)
	}

	$scope.$watch('selected', function(){
	var keys = _.pluck($scope.selected, "variable")
	var values = _.pluck($scope.selected, "value")
	$scope.opts.selected = _.zipObject(keys, values)
	})

	$scope.$watch('opts',function(){
	$scope.drawChart()
	}, true)
	}

	function drawChart(opts, data){
	if (Object.keys(opts.selected).length > 0){
	data = _.filter(data, opts.selected)
	}

	if(!(opts.type==="pieChart" \|\| opts.type==="sparklinePlus" \|\| opts.type==="bulletChart")) {
	var data = d3.nest()
	.key(function(d){
	//return opts.group === undefined ? 'main' : d[opts.group]
	//instead of main would think a better default is opts.x
	return opts.group === undefined ? opts.y : d[opts.group];
	}).entries(data);
	}

	if (opts.disabled != undefined){
	data.map(function(d, i){
	d.disabled = opts.disabled[i]
	})
	}

	nv.addGraph(function() {
	var chart = nv.models[opts.type]()
	.x(function(d) { return d[opts.x] })
	.y(function(d) { return d[opts.y] })
	.width(opts.width)
	.height(opts.height)









	d3.select("#" + opts.id + ' svg')
	// .empty()
	.datum(data)
	.transition().duration(500)
	.call(chart);

	nv.utils.windowResize(chart.update);
	return chart;
	});
	};
	</script>

	</body>
	</html>