Angular: Empty Fiddle

http://angularjs.org/

by ramnathv

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://public.opencpu.org/js/archive/opencpu-0.4.js"></script>
<div class='container' ng-controller='MainCtrl'>
  <div class='row' id='main'>
     <div class='col-lg-10'>
      <h3>R Webapps with OpenCPU and AngularJS</h3>
    <p id='author' class='text-muted'>by <a href='http://github.com/ramnathv'>Ramnath Vaidyanathan</a>, Dec 17, 2013</p>
    <p>
      <span class='label label-default'>OpenCPU</span>
      <span class='label label-success'>AngularJS</span>
      <span class='label label-danger'>Bootstrap3</span>
    </p>
     <p>Statistical web applications developed using R seem to be the rage these days, especially after the introduction of <a href="http://www.rstudio.com/shiny/">Shiny</a>  by the good folks at <a href=
            "http://www.rstudio.com/shiny/">RStudio</a>. But this demo is not using Shiny. It uses <a href='http://opencpu.org'>OpenCPU</a>, an awesome framework for running R in the cloud, developed by <a href='https://github.com/jeroenooms'>Jeroen Ooms</a>, as a part of his PhD thesis at UCLA. 
        </p>
        <p>OpenCPU provides a simple RESTful interface to call R in the browser. Combine that with a javascript MVC framework like AngularJS, and you have a powerful recipe for creating reactive web applications that can run on any web-server.</p>
        <p>You can interact with the source code for this application on <a href='http://jsfiddle.net/ramnathv/uatjd/33/'>jsFiddle</a>. It is fairly self-explanatory if you are familiar with javascript and have some exposure to AngularJS. I hope to post a detailed tutorial later.</p>
        <p>OpenCPU has support for developing full fledged web apps structured as R packages and deployed on github. Jeroen has...

CSS

@import url(http://fonts.googleapis.com/css?family=Lora|Lato);
h3 {
   font-family: Lato;   
}
p {
  font-family: "Lora";
  text-align: justify;
  line-height: 22px;
}
#plotdiv {
    position: relative;
    height: 350px;
    border: none;
}
#main {
    margin-bottom: 10px;
}

JavaScript

// create an angular module named myApp
var myApp = angular.module('myApp', []);

//set CORS to call "stocks" package on public server
ocpu.seturl("//public.opencpu.org/ocpu/library/graphics/R")

myApp.controller("MainCtrl", function($scope, $http){
    // initialize model variables
    $scope.main = "My Histogram"    
    $scope.dist = 'rnorm'; $scope.dists = ['rnorm', 'runif']
    $scope.color = 'blue'; $scope.colors = ['blue', 'red', 'darkmagenta']
    $scope.breaks = 10
    
    // define function to retrieve data based on distribution
    $scope.getData = function(dist){
      var url = "http://public.opencpu.org//ocpu/library/stats/R/" + dist + 
          "/json"
      return $http.post(url, {n: 100})
    }
    
    // define function to draw histogram based on inputs
    $scope.drawHist = function(){
      var req = $("#plotdiv").rplot("hist", {
         x : $scope.data,
         col: $scope.color,
         breaks: Math.floor($scope.breaks),
         main: $scope.main
      });   
    }
    
    // redraw the distribution if any of the model inputs change
    $scope.$watchCollection('[main, color, breaks, data]', function(x){
     $scope.drawHist()  
    })
    
    // retreive new data when the user chanages the distribution name
    $scope.$watch('dist', function(newDist){
       $scope.getData(newDist).success(function(result){
         $scope.data = result  
       }) 
    })
})