0

I have a web based OpenCPU application that (from the user's perspective) simultaneously provides both a tabular and graphical representation of model based forecasts.

The forecasts are driven by user-supplied input data (predictor/independent variables) taken from an html table. Calculations are then performed within R and the resultant data (response/dependent variables plus associated statistics) are used to both update the html table and feed the accompanying graphic.

My current solution is as follows:

ocpu.rpc takes the user input, performs the calculations and passes back the table updates which are applied via JavaScript. Once these have been applied then…

ocpu.rplot is engaged (as part of ocpu.rpc's callback function) to produce the corresponding graphic. (Note, it MUST take account of the updates – hence the callback).

Whilst the above solution works I can’t help but feel there's a more elegant solution…

For reasons of efficiency I'd like to process the input table and produce all tabular/graphical output in a singular R function call. This I can happily do, but my issue arises when I try to access both sets of output via JavaScript. Specificall:

  1. I'm struggling to see how I can retrieve the graphic having used ocpu.rpc.
  2. I'm struggling to see how I can retrieve the table data having used ocpu.rplot.
  3. ocpu.call appears to be the way forward as I can see both elements, namely ocpu/tmp/key/R/.val and ocpu/tmp/key/graphics/1... I can get hold of the table updates held in the former via the getObject() helper function but despite my efforts I'm having issues addressing the graphic.

Any help/advice would be much appreciated!

Gustavo Morales
  • 2,614
  • 9
  • 29
  • 37
Richard Blades
  • 1
  • 1

1 Answers1

0

Thought I'd post my own answer as it may help others... Input data passed to singular R function via ocpu.call. Table updates returned and applied via JavaScript whilst accompanying graphic (based on same calculations) is stored on the server. Graphic is then applied to screen as illustrated below. (Code mimics ocpu.rplot's graphic handling). 

<div id="outputAreaGraphics"></div>     

<style>
    #outputAreaGraphics {
        background: white;
        background-position: center center;
        background-repeat: no-repeat;   
        background-size: 100% 100%;     
        height: 600px;
        position: relative;
        width: 100%;
    }
</style>

<script>
    var graphics    = $("#outputAreaGraphics");     
    var pngHeight   = graphics.height();
    var pngWidth    = graphics.width();
    var graphicsURL = session1.getLoc() + "graphics/last/";

    var spinner = $("<span />")
        .appendTo(graphics)
        .attr({style : "font-family: monospace; left: 20px; position: absolute; top: 20px; z-index: 1000; "})
        .text("loading...");

    graphics.css("background-image", "url(" + graphicsURL + "png?width=" +
        pngWidth + "&height=" + pngHeight + ")");

    spinner.hide();

    var pdf = $("<a />")
        .appendTo(graphics)
        .attr({href: graphicsURL + "pdf?width=11.69&height=8.27&paper=a4r", style: "font-family: monospace; position: absolute; right: 10px; text-decoration: underline; top: 10px; z-index: 1000;", target: "_blank"})
        .text("pdf");

    var png = $("<a />")
        .appendTo(graphics)
        .attr({href: graphicsURL + "png?width=800&height=600", style: "font-family: monospace; position: absolute; right: 10px; text-decoration: underline; top: 50px; z-index: 1000;", target: "_blank",})
        .text("png");

    var svg = $("<a />")            
        .appendTo(graphics)
        .attr({href: graphicsURL + "svg?width=11.69&height=8.27", style: "font-family: monospace; position: absolute; right: 10px; text-decoration: underline; top: 30px; z-index: 1000;", target: "_blank"})
        .text("svg");
</script>
Richard Blades
  • 1
  • 1