Webpart image output nicholas.arnold  2010-01-07 15:37
Status: Closed
 
I'm working on a caveat within the LABKEY.WebPart.render(), that is that I'm trying to render two images to the same div. Each image is currently being created by different R reports and rendered to two different divs.

It would be helpful in the report I'm generating to have the R report images come up side by side rather than stacked.

I see that the render creates a table within the div and essentially all I need to do is move the <td> from one div into the first div making the images appear side by side. Another thought I had was I could use R to try and concatenate the images to push just one image to the page but that seems clunky.

Does anyone have experience with this kind of idea?

- Nick Arnold
 
 
Peter responded:  2010-01-08 13:11
Nick,

Here's what works for me. I put the divs within table cells side by side. I changed the size of the graph in the R code, because the size of the image it produces seems to be the controlling factor for the space the div and surrounding table cell take up.

<table cols=2>
<tr><td ><div id="leftgraph" >left</div></td>
<td><div id="rightgraph" >right</div></td>
</tr></table>

<script type="text/javascript">
     var reportWebPart1 = new LABKEY.WebPart({
         partName: 'Report',
         renderTo: 'leftgraph',
         containerPath: '/idri',
         frame: 'title',
         partConfig: {
                     title: 'Z Avg histogram',

// reportId for an R view script from a file-based module does not have a numeric dbid.
// instead, grab the URL when looking at the graph from the grid view "Views" pull down menu. The URL will look like
// http://localhost:8080/labkey/..
// ... &IDRI%20Data.reportId=module%3AParticleSize%2Fschemas%2Fassay%2FIDRI%20Data%2FZ-Ave%20Graph.r ...
// undo the url encoding of the reportID and use it in the web part config as in the next line:

                     reportId: 'module:ParticleSize/schemas/assay/IDRI Data/Z-Ave Graph.r',
     }});
     reportWebPart1.render();

     var reportWebPart2 = new LABKEY.WebPart({
         partName: 'Report',
         renderTo: 'rightgraph',
         containerPath: '/idri',
         frame: 'title',
         partConfig: {
                     title: 'Z Avg histogram',
                     reportId: 'module:ParticleSize/schemas/assay/IDRI Data/Z-Ave Graph.r',
     }});
     reportWebPart2.render();
  </script>


thanks for using the support board, so others can find this info
Peter