Files
shiny/reference/plotOutput.html
2025-11-13 20:59:50 +00:00

381 lines
41 KiB
HTML

<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Create an plot or image output element — plotOutput • shiny</title><!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css"><script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous"><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet"><script src="../pkgdown.js"></script><meta property="og:title" content="Create an plot or image output element — plotOutput"><meta property="og:description" content="Render a renderPlot() or renderImage() within an
application page."><meta property="og:image" content="/logo.png"><!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--></head><body data-spy="scroll" data-target="#toc">
<div class="container template-reference-topic">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">
<a class="navbar-link" href="../index.html">shiny</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">1.12.0</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"><li>
<a href="../reference/index.html">Reference</a>
</li>
<li>
<a href="../news/index.html">Changelog</a>
</li>
</ul><ul class="nav navbar-nav navbar-right"><li>
<a href="https://github.com/rstudio/shiny/" class="external-link">
<span class="fab fa-github fa-lg"></span>
</a>
</li>
</ul></div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</header><div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Create an plot or image output element</h1>
<small class="dont-index">Source: <a href="https://github.com/rstudio/shiny/blob/rc-v1.12.0/R/bootstrap.R" class="external-link"><code>R/bootstrap.R</code></a></small>
<div class="hidden name"><code>plotOutput.Rd</code></div>
</div>
<div class="ref-description">
<p>Render a <code><a href="renderPlot.html">renderPlot()</a></code> or <code><a href="renderImage.html">renderImage()</a></code> within an
application page.</p>
</div>
<div id="ref-usage">
<div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">imageOutput</span><span class="op">(</span></span>
<span> <span class="va">outputId</span>,</span>
<span> width <span class="op">=</span> <span class="st">"100%"</span>,</span>
<span> height <span class="op">=</span> <span class="st">"400px"</span>,</span>
<span> click <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> dblclick <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> hover <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> brush <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> inline <span class="op">=</span> <span class="cn">FALSE</span>,</span>
<span> fill <span class="op">=</span> <span class="cn">FALSE</span></span>
<span><span class="op">)</span></span>
<span></span>
<span><span class="fu">plotOutput</span><span class="op">(</span></span>
<span> <span class="va">outputId</span>,</span>
<span> width <span class="op">=</span> <span class="st">"100%"</span>,</span>
<span> height <span class="op">=</span> <span class="st">"400px"</span>,</span>
<span> click <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> dblclick <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> hover <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> brush <span class="op">=</span> <span class="cn">NULL</span>,</span>
<span> inline <span class="op">=</span> <span class="cn">FALSE</span>,</span>
<span> fill <span class="op">=</span> <span class="op">!</span><span class="va">inline</span></span>
<span><span class="op">)</span></span></code></pre></div>
</div>
<div id="arguments">
<h2>Arguments</h2>
<dl><dt id="arg-outputid">outputId<a class="anchor" aria-label="anchor" href="#arg-outputid"></a></dt>
<dd><p>output variable to read the plot/image from.</p></dd>
<dt id="arg-width-height">width, height<a class="anchor" aria-label="anchor" href="#arg-width-height"></a></dt>
<dd><p>Image width/height. Must be a valid CSS unit (like
<code>"100%"</code>, <code>"400px"</code>, <code>"auto"</code>) or a number, which will be
coerced to a string and have <code>"px"</code> appended. These two arguments are
ignored when <code>inline = TRUE</code>, in which case the width/height of a plot
must be specified in <code><a href="renderPlot.html">renderPlot()</a></code>. Note that, for height, using
<code>"auto"</code> or <code>"100%"</code> generally will not work as expected,
because of how height is computed with HTML/CSS.</p></dd>
<dt id="arg-click">click<a class="anchor" aria-label="anchor" href="#arg-click"></a></dt>
<dd><p>This can be <code>NULL</code> (the default), a string, or an object
created by the <code><a href="clickOpts.html">clickOpts()</a></code> function. If you use a value like
<code>"plot_click"</code> (or equivalently, <code>clickOpts(id="plot_click")</code>),
the plot will send coordinates to the server whenever it is clicked, and
the value will be accessible via <code>input$plot_click</code>. The value will be
a named list with <code>x</code> and <code>y</code> elements indicating the mouse
position.</p></dd>
<dt id="arg-dblclick">dblclick<a class="anchor" aria-label="anchor" href="#arg-dblclick"></a></dt>
<dd><p>This is just like the <code>click</code> argument, but for
double-click events.</p></dd>
<dt id="arg-hover">hover<a class="anchor" aria-label="anchor" href="#arg-hover"></a></dt>
<dd><p>Similar to the <code>click</code> argument, this can be <code>NULL</code>
(the default), a string, or an object created by the
<code><a href="clickOpts.html">hoverOpts()</a></code> function. If you use a value like
<code>"plot_hover"</code> (or equivalently, <code>hoverOpts(id="plot_hover")</code>),
the plot will send coordinates to the server pauses on the plot, and the
value will be accessible via <code>input$plot_hover</code>. The value will be a
named list with <code>x</code> and <code>y</code> elements indicating the mouse
position. To control the hover time or hover delay type, you must use
<code><a href="clickOpts.html">hoverOpts()</a></code>.</p></dd>
<dt id="arg-brush">brush<a class="anchor" aria-label="anchor" href="#arg-brush"></a></dt>
<dd><p>Similar to the <code>click</code> argument, this can be <code>NULL</code>
(the default), a string, or an object created by the
<code><a href="brushOpts.html">brushOpts()</a></code> function. If you use a value like
<code>"plot_brush"</code> (or equivalently, <code>brushOpts(id="plot_brush")</code>),
the plot will allow the user to "brush" in the plotting area, and will send
information about the brushed area to the server, and the value will be
accessible via <code>input$plot_brush</code>. Brushing means that the user will
be able to draw a rectangle in the plotting area and drag it around. The
value will be a named list with <code>xmin</code>, <code>xmax</code>, <code>ymin</code>, and
<code>ymax</code> elements indicating the brush area. To control the brush
behavior, use <code><a href="brushOpts.html">brushOpts()</a></code>. Multiple
<code>imageOutput</code>/<code>plotOutput</code> calls may share the same <code>id</code>
value; brushing one image or plot will cause any other brushes with the
same <code>id</code> to disappear.</p></dd>
<dt id="arg-inline">inline<a class="anchor" aria-label="anchor" href="#arg-inline"></a></dt>
<dd><p>use an inline (<code><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">span()</a></code>) or block container (<code><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">div()</a></code>)
for the output</p></dd>
<dt id="arg-fill">fill<a class="anchor" aria-label="anchor" href="#arg-fill"></a></dt>
<dd><p>Whether or not the returned tag should be treated as a fill item,
meaning that its <code>height</code> is allowed to grow/shrink to fit a fill container
with an opinionated height (see <code><a href="https://rstudio.github.io/htmltools/reference/bindFillRole.html" class="external-link">htmltools::bindFillRole()</a></code>) with an
opinionated height. Examples of fill containers include <code><a href="https://rstudio.github.io/bslib/reference/card.html" class="external-link">bslib::card()</a></code> and
<code><a href="https://rstudio.github.io/bslib/reference/deprecated.html" class="external-link">bslib::card_body_fill()</a></code>.</p></dd>
</dl></div>
<div id="value">
<h2>Value</h2>
<p>A plot or image output element that can be included in a panel.</p>
</div>
<div id="note">
<h2>Note</h2>
<p>The arguments <code>clickId</code> and <code>hoverId</code> only work for R base graphics
(see the <span class="pkg"><a href="https://rdrr.io/r/graphics/graphics-package.html" class="external-link">graphics</a></span> package). They do
not work for <span class="pkg"><a href="https://rdrr.io/r/grid/grid-package.html" class="external-link">grid</a></span>-based graphics, such as
<span class="pkg">ggplot2</span>, <span class="pkg">lattice</span>, and so on.</p>
</div>
<div id="interactive-plots">
<h2>Interactive plots</h2>
<p>Plots and images in Shiny support mouse-based interaction, via clicking,
double-clicking, hovering, and brushing. When these interaction events
occur, the mouse coordinates will be sent to the server as <code>input$</code>
variables, as specified by <code>click</code>, <code>dblclick</code>, <code>hover</code>, or
<code>brush</code>.</p>
<p>For <code>plotOutput</code>, the coordinates will be sent scaled to the data
space, if possible. (At the moment, plots generated by base graphics and
ggplot2 support this scaling, although plots generated by lattice and
others do not.) If scaling is not possible, the raw pixel coordinates will
be sent. For <code>imageOutput</code>, the coordinates will be sent in raw pixel
coordinates.</p>
<p>With ggplot2 graphics, the code in <code>renderPlot</code> should return a ggplot
object; if instead the code prints the ggplot2 object with something like
<code>print(p)</code>, then the coordinates for interactive graphics will not be
properly scaled to the data space.</p>
</div>
<div id="see-also">
<h2>See also</h2>
<div class="dont-index"><p>For the corresponding server-side functions, see <code><a href="renderPlot.html">renderPlot()</a></code> and
<code><a href="renderImage.html">renderImage()</a></code>.</p></div>
</div>
<div id="ref-examples">
<h2>Examples</h2>
<div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="co"># Only run these examples in interactive R sessions</span></span></span>
<span class="r-in"><span><span class="kw">if</span> <span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/interactive.html" class="external-link">interactive</a></span><span class="op">(</span><span class="op">)</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># A basic shiny app with a plotOutput</span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> ui <span class="op">=</span> <span class="fu"><a href="fluidPage.html">fluidPage</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">sidebarLayout</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">sidebarPanel</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="actionButton.html">actionButton</a></span><span class="op">(</span><span class="st">"newplot"</span>, <span class="st">"New plot"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="sidebarLayout.html">mainPanel</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu">plotOutput</span><span class="op">(</span><span class="st">"plot"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> server <span class="op">=</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPlot.html">renderPlot</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">input</span><span class="op">$</span><span class="va">newplot</span></span></span>
<span class="r-in"><span> <span class="co"># Add a little noise to the cars data</span></span></span>
<span class="r-in"><span> <span class="va">cars2</span> <span class="op">&lt;-</span> <span class="va">cars</span> <span class="op">+</span> <span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/nrow.html" class="external-link">nrow</a></span><span class="op">(</span><span class="va">cars</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="va">cars2</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># A demonstration of clicking, hovering, and brushing</span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> ui <span class="op">=</span> <span class="fu"><a href="bootstrapPage.html">basicPage</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="fluidPage.html">fluidRow</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu">plotOutput</span><span class="op">(</span><span class="st">"plot"</span>, height<span class="op">=</span><span class="fl">300</span>,</span></span>
<span class="r-in"><span> click <span class="op">=</span> <span class="st">"plot_click"</span>, <span class="co"># Equiv, to click=clickOpts(id="plot_click")</span></span></span>
<span class="r-in"><span> hover <span class="op">=</span> <span class="fu"><a href="clickOpts.html">hoverOpts</a></span><span class="op">(</span>id <span class="op">=</span> <span class="st">"plot_hover"</span>, delayType <span class="op">=</span> <span class="st">"throttle"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> brush <span class="op">=</span> <span class="fu"><a href="brushOpts.html">brushOpts</a></span><span class="op">(</span>id <span class="op">=</span> <span class="st">"plot_brush"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">h4</a></span><span class="op">(</span><span class="st">"Clicked points"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="renderTable.html">tableOutput</a></span><span class="op">(</span><span class="st">"plot_clickedpoints"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rstudio.github.io/htmltools/reference/builder.html" class="external-link">h4</a></span><span class="op">(</span><span class="st">"Brushed points"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="renderTable.html">tableOutput</a></span><span class="op">(</span><span class="st">"plot_brushedpoints"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"plot_clickinfo"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"plot_hoverinfo"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="wellPanel.html">wellPanel</a></span><span class="op">(</span><span class="fu"><a href="actionButton.html">actionButton</a></span><span class="op">(</span><span class="st">"newplot"</span>, <span class="st">"New plot"</span><span class="op">)</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"plot_brushinfo"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> server <span class="op">=</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span>, <span class="va">session</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">data</span> <span class="op">&lt;-</span> <span class="fu"><a href="reactive.html">reactive</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">input</span><span class="op">$</span><span class="va">newplot</span></span></span>
<span class="r-in"><span> <span class="co"># Add a little noise to the cars data so the points move</span></span></span>
<span class="r-in"><span> <span class="va">cars</span> <span class="op">+</span> <span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/nrow.html" class="external-link">nrow</a></span><span class="op">(</span><span class="va">cars</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPlot.html">renderPlot</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">d</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="va">d</span><span class="op">$</span><span class="va">speed</span>, <span class="va">d</span><span class="op">$</span><span class="va">dist</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot_clickinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Click:\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">plot_click</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot_hoverinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Hover (throttled):\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">plot_hover</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot_brushinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Brush (debounced):\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">plot_brush</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot_clickedpoints</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderTable.html">renderTable</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="co"># For base graphics, we need to specify columns, though for ggplot2,</span></span></span>
<span class="r-in"><span> <span class="co"># it's usually not necessary.</span></span></span>
<span class="r-in"><span> <span class="va">res</span> <span class="op">&lt;-</span> <span class="fu"><a href="brushedPoints.html">nearPoints</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="op">)</span>, <span class="va">input</span><span class="op">$</span><span class="va">plot_click</span>, <span class="st">"speed"</span>, <span class="st">"dist"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="kw">if</span> <span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/nrow.html" class="external-link">nrow</a></span><span class="op">(</span><span class="va">res</span><span class="op">)</span> <span class="op">==</span> <span class="fl">0</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="kw"><a href="https://rdrr.io/r/base/function.html" class="external-link">return</a></span><span class="op">(</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">res</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">plot_brushedpoints</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderTable.html">renderTable</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">res</span> <span class="op">&lt;-</span> <span class="fu"><a href="brushedPoints.html">brushedPoints</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="op">)</span>, <span class="va">input</span><span class="op">$</span><span class="va">plot_brush</span>, <span class="st">"speed"</span>, <span class="st">"dist"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="kw">if</span> <span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/nrow.html" class="external-link">nrow</a></span><span class="op">(</span><span class="va">res</span><span class="op">)</span> <span class="op">==</span> <span class="fl">0</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="kw"><a href="https://rdrr.io/r/base/function.html" class="external-link">return</a></span><span class="op">(</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">res</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="co"># Demo of clicking, hovering, brushing with imageOutput</span></span></span>
<span class="r-in"><span><span class="co"># Note that coordinates are in pixels</span></span></span>
<span class="r-in"><span><span class="fu"><a href="shinyApp.html">shinyApp</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> ui <span class="op">=</span> <span class="fu"><a href="bootstrapPage.html">basicPage</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="fluidPage.html">fluidRow</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu">imageOutput</span><span class="op">(</span><span class="st">"image"</span>, height<span class="op">=</span><span class="fl">300</span>,</span></span>
<span class="r-in"><span> click <span class="op">=</span> <span class="st">"image_click"</span>,</span></span>
<span class="r-in"><span> hover <span class="op">=</span> <span class="fu"><a href="clickOpts.html">hoverOpts</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> id <span class="op">=</span> <span class="st">"image_hover"</span>,</span></span>
<span class="r-in"><span> delay <span class="op">=</span> <span class="fl">500</span>,</span></span>
<span class="r-in"><span> delayType <span class="op">=</span> <span class="st">"throttle"</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> brush <span class="op">=</span> <span class="fu"><a href="brushOpts.html">brushOpts</a></span><span class="op">(</span>id <span class="op">=</span> <span class="st">"image_brush"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"image_clickinfo"</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"image_hoverinfo"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="column.html">column</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">4</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="wellPanel.html">wellPanel</a></span><span class="op">(</span><span class="fu"><a href="actionButton.html">actionButton</a></span><span class="op">(</span><span class="st">"newimage"</span>, <span class="st">"New image"</span><span class="op">)</span><span class="op">)</span>,</span></span>
<span class="r-in"><span> <span class="fu"><a href="textOutput.html">verbatimTextOutput</a></span><span class="op">(</span><span class="st">"image_brushinfo"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">)</span>,</span></span>
<span class="r-in"><span> server <span class="op">=</span> <span class="kw">function</span><span class="op">(</span><span class="va">input</span>, <span class="va">output</span>, <span class="va">session</span><span class="op">)</span> <span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">image</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderImage.html">renderImage</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="va">input</span><span class="op">$</span><span class="va">newimage</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Get width and height of image output</span></span></span>
<span class="r-in"><span> <span class="va">width</span> <span class="op">&lt;-</span> <span class="va">session</span><span class="op">$</span><span class="va">clientData</span><span class="op">$</span><span class="va">output_image_width</span></span></span>
<span class="r-in"><span> <span class="va">height</span> <span class="op">&lt;-</span> <span class="va">session</span><span class="op">$</span><span class="va">clientData</span><span class="op">$</span><span class="va">output_image_height</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Write to a temporary PNG file</span></span></span>
<span class="r-in"><span> <span class="va">outfile</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/tempfile.html" class="external-link">tempfile</a></span><span class="op">(</span>fileext <span class="op">=</span> <span class="st">".png"</span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/grDevices/png.html" class="external-link">png</a></span><span class="op">(</span><span class="va">outfile</span>, width<span class="op">=</span><span class="va">width</span>, height<span class="op">=</span><span class="va">height</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/graphics/plot.default.html" class="external-link">plot</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fl">200</span><span class="op">)</span>, <span class="fu"><a href="https://rdrr.io/r/stats/Normal.html" class="external-link">rnorm</a></span><span class="op">(</span><span class="fl">200</span><span class="op">)</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/grDevices/dev.html" class="external-link">dev.off</a></span><span class="op">(</span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span> <span class="co"># Return a list containing information about the image</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span></span>
<span class="r-in"><span> src <span class="op">=</span> <span class="va">outfile</span>,</span></span>
<span class="r-in"><span> contentType <span class="op">=</span> <span class="st">"image/png"</span>,</span></span>
<span class="r-in"><span> width <span class="op">=</span> <span class="va">width</span>,</span></span>
<span class="r-in"><span> height <span class="op">=</span> <span class="va">height</span>,</span></span>
<span class="r-in"><span> alt <span class="op">=</span> <span class="st">"This is alternate text"</span></span></span>
<span class="r-in"><span> <span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">image_clickinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Click:\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">image_click</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">image_hoverinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Hover (throttled):\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">image_hover</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="va">output</span><span class="op">$</span><span class="va">image_brushinfo</span> <span class="op">&lt;-</span> <span class="fu"><a href="renderPrint.html">renderPrint</a></span><span class="op">(</span><span class="op">{</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="st">"Brush (debounced):\n"</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="fu"><a href="https://rdrr.io/r/utils/str.html" class="external-link">str</a></span><span class="op">(</span><span class="va">input</span><span class="op">$</span><span class="va">image_brush</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span><span class="op">)</span></span></span>
<span class="r-in"><span> <span class="op">}</span></span></span>
<span class="r-in"><span><span class="op">)</span></span></span>
<span class="r-in"><span></span></span>
<span class="r-in"><span><span class="op">}</span></span></span>
</code></pre></div>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
<nav id="toc" data-toggle="toc" class="sticky-top"><h2 data-toc-skip>Contents</h2>
</nav></div>
</div>
<footer><div class="copyright">
<p></p><p>Developed by Winston Chang, Joe Cheng, JJ Allaire, Carson Sievert, Barret Schloerke, Garrick Aden-Buie, Yihui Xie, Jeff Allen, Jonathan McPherson, Alan Dipert, Barbara Borges, Posit Software, PBC.</p>
</div>
<div class="pkgdown">
<p></p><p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.2.0.</p>
</div>
</footer></div>
</body></html>