angular nvd3
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
<script src="http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.css">
<div ng-app='nvd3TestApp'>
<select id="leave" onchange="leaveChange()">
<option value="1">Second</option>
<option value="2">First</option>
</select>
<div ng-controller="ExampleCtrl">
<nvd3-discrete-bar-chart id="test"
data="exampleData"
id="exampleId"
width="800"
height="400"
tooltips="true"
showXAxis="true"
showYAxis="true">
<svg></svg>
</nvd3-discrete-bar-chart>
</div>
</div>
JavaScript
angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
var categ = ['First', 'Second'],
select = document.getElementById( 'countries' );
function leaveChange() {
if (document.getElementById("leave").value != "1"){
document.getElementById("test").data="exampleData2";
}
else{
document.getElementById("test").data="exampleData";
}
}
function ExampleCtrl($scope){
$scope.exampleData = [
{
key: "Cumulative Return",
values: [
["A", -29.765957771107 ],
["B" , 0 ],
["C" , 32.807804682612 ],
["D" , 196.45946739256 ],
["E" , 0.19434030906893 ],
["F" , -98.079782601442 ],
["G" , -13.925743130903 ],
["H" , -5.1387322875705 ]
]
}
];
$scope.exampleData2 = [
{
key: "Cumulative Return",
values: [
["A", -29.765957771107 ],
["B" , 0 ],
["C" , 32.807804682612 ],
["D" , 196.45946739256 ],
["E" , 0.19434030906893 ],
["F" , -98.079782601442 ],
["G" , -13.925743130903 ],
["H" , -5.1387322875705 ]
]
},
{
key: "Cumulative Return2",
values: [
["A", 10.765957771107 ],
["B" , 0 ],
["C" , -32.807804682612 ],
["D" , 96.45946739256 ],
["E" , 0.19434030906893 ],
["F" , -38.079782601442 ],
["G" , -43.925743130903 ],
...