Angular: Empty Fiddle

http://angularjs.org/

by ramnathv

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script>
<h1>The Plotting Widget</h1>
<div class='container' ng-controller='HistCtrl'>
  <div class='row'>
     <div class='col-lg-4'>
        <b>Ticker</b> 
          <form ng-submit='submit()' role='form'>
            <input type="text" ng-model="numbers2"/><br/><br/>
            <input type="range" min="1" max="12" ng-model="breaks">
             You chose {{breaks}}
             <slider floor="5" ceiling="100" step="10" precision="2" 
                ng-model="breaks2"></slider>
             Breaks = {{ breaks }}
             <select ng-model='color' 
                   ng-options='color for color in colors'></select>
             <input type="submit" id="submit" class='btn btn-primary' 
                value="Submit"/>
          </form>
     </div>
     <div class='col-lg-8'>
        <div id="plotdiv"></div> 
     </div>
  </div>
</div>

CSS

#plotdiv {
    position: relative;
    height: 400px;
    border: solid gray 1px;
}

JavaScript

var myApp = angular.module('myApp', ['uiSlider', 'ngResource']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

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

var mtcars; 


$.post("http://public.opencpu.org//ocpu/library/stats/R/rnorm/json", {n: 100}, function( data ) {
  console.log(data)
  mtcars = data
})


function ItemCtrl($scope){
    $scope.cost = 150
}

function OcpuCtrl($scope){
 $scope.ticker = 'GOOG'
 $scope.from = '2013-01-01'
 $scope.submit = function(){
   var req = $("#plotdiv").rplot("smoothplot", {
     ticker : $scope.ticker,
     from : $scope.from
   });
    
   //optional
   req.fail(function(){
     alert("R returned an error: " + req.responseText); 
   });
 }
 $scope.$watchCollection('[ticker, from]', function(x){
   $scope.submit()  
 })
}

function HistCtrl($scope){
    $scope.getData = function(){
      $.post("http://public.opencpu.org//ocpu/library/stats/R/rnorm/json", 
         {n: 100}, function( data ) {
         $scope.numbers2 = data
      })
    }
    $scope.numbers = "1, 2, 3, 4, 5"
    $scope.n = 5
    $scope.color = 'blue'
    $scope.colors = ['blue', 'red', 'darkmagenta']
    $scope.breaks = 10
    $scope.submit = function(){
      $scope.getData()
      var x = $scope.numbers.split(",")
      for(var i = 0; i < x.length; i++) {
          x[i] = +x[i]; 
      } 
      var req = $("#plotdiv").rplot("hist", {
         x : $scope.numbers2,
         col: $scope.color,
          breaks: Math.floor($scope.breaks)
      });   
    }
    $scope.$watchCollection('[numbers, color, breaks]', function(x){
     $scope.submit()  
    })
}