Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://public.opencpu.org/js/archive/opencpu-0.4.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="angular.js"></script>
<div class='container' ng-controller='HistCtrl'>
<h3>R Webapps with OpenCPU and AngularJS</h3>
<div class='row'>
<div class='col-lg-3'>
<div class='well'>
<form ng-submit='submit()' role='form'>
<div class='form-group'>
<input type='text' ng-model='main' class='form-control'/>
</div>
<div class='form-group'>
<label class='control-label'>Breaks</label><br/><br/>
<input type="range" min="1" max="12" ng-model="breaks"/>
</div>
<div class='form-group'>
<label class='control-label'>Color</label>
<select class='form-control' ng-model='color'
ng-options='color for color in colors'>
</select>
</div>
<div class='form-group'>
<label class='control-label'>Distribution</label>
<select class='form-control' ng-model='dist'
ng-options='dist for dist in dists'></select>
</div>
<input type="submit" id="submit" class='btn btn-primary'
value="Submit"/>
</form>
</div>
</div>
<div class='col-lg-8'>
<div id="plotdiv"></div>
</div>
</div>
</div>
CSS
#plotdiv {
position: relative;
height: 400px;
border: none;
}
JavaScript
var myApp = angular.module('myApp', []);
//set CORS to call "stocks" package on public server
ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R")
myApp.factory('OpenCPU', function($http){
return {
Dist: function(dist){
var url = "http://public.opencpu.org//ocpu/library/stats/R/" + dist +
"/json"
return $http.post(url, {n: 100})
}
}
})
myApp.controller("HistCtrl", function($scope, $http, OpenCPU){
$scope.dist = 'rnorm'
$scope.dists = ['rnorm', 'runif']
$scope.color = 'blue'
$scope.colors = ['blue', 'red', 'darkmagenta']
$scope.breaks = 10
$scope.submit = function(){
var req = $("#plotdiv").rplot("hist", {
x : $scope.data,
col: $scope.color,
breaks: Math.floor($scope.breaks),
main: $scope.main
});
}
$scope.$watchCollection('[main, color, breaks, data]', function(x){
$scope.submit()
})
$scope.$watch('dist', function(newDist){
OpenCPU.Dist(newDist).success(function(result){
$scope.data = result
})
})
})