JSFiddle - React, Tailwind, and code Playground

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.3.js"></script>
<h1>The Plottig Widget</h1>

<b>Ticker</b> <input type="text" value="GOOG" id="ticker">

<button id="submitbutton" type="button">Submit to server!</button> <br><br>

<div id="plotdiv"></div>    


<!-- some text, not part of the app -->
<p>This is a demo of the <code>r_fun_plot</code> function in the <a href="http://public.opencpu.org/jslib.html">opencpu.js</a> library. It calls the R function <a href="http://public.opencpu.org/ocpu/library/stocks/R/smoothplot">smoothplot</a> in the R package <a href="http://public.opencpu.org/ocpu/library/stocks/R/">stocks</a>.</p>

CSS

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

JavaScript

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

//call R function: stocks::smoothplot(ticker=ticker)
$("button").click(function(){
    var ticker = $("#ticker").val();    
    var req = $("#plotdiv").r_fun_plot("smoothplot", {
        ticker : ticker,
        from : "2013-01-01"
    }).fail(function(){
        alert("R returned an error: " + req.responseText); 
    });
});