First steps of using googleVis on shiny

Bertha 。 2022-08-07 14:57 16阅读 0赞

The guys at [RStudio][] have done a fantastic job with [shiny][]. It is really easy to build web apps with [R][] using shiny. With the help of Joe Cheng from RStudio we figured out a way to make [googleVis][] work on shiny as well. This allows you to make use of the [Google Charts Tools][] in your shiny app directly from R. What I present here are three initial examples which seem to work in most browsers. The third example even uses a neat trick to create an animated geo chart.  
  
[![Shiny.png][]][Shiny.png 1]  
  
However, before we upload the next version of googleVis to CRAN we decided to present a preview of version 0.4.0 here, asking for [ feedback][feedback]. It would not be fair on the guys behind CRAN to release something into the wild, only to be told by users within a few days that we missed something. Hence, you can get the new version of googleVis only from the [download page][] of our project site for the time being.  
  
You may have read the [ post on RStudio's blog][post on RStudio_s blog] that the shiny API changed slightly: the `reactivePlot` and `reactiveText` functions have been renamed to `renderPlot` and `renderText` with simplified input parameters. Thanks to Joe, there is now also a `renderGvis` function as part of the googleVis package, which works in very much the same way as the other two.   
  
To run the following examples you need shiny version 0.4.0 and googleVis version 0.4.0 or higher.

### Example 1: Select data for a scatter chart ###

In this example the user can select different data to be displayed via a scatter chart. I use the `renderGvis` function in the same way as I would use `renderPlot` or `renderText`.

[![ScatterChart.png][]][ScatterChart.png 1]

</div>
         
          
     <div>
          
           
      <span># Requires googleVis version 0.4.0 and shiny 0.4.0 or higher</span>

</div>
         
          
     <div>
          
           
      <span># server.R</span>

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>googleVis</span>)

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>shiny</span>)

</div>
         
          
     <div>
      
           
          shinyServer(
          
           
      <span>function</span>(
          
           
      <span>input</span>, 
          
           
      <span>output</span>) {

</div>
         
          
     <div>  
          
           
      <span>datasetInput</span> 
          
           
      <span>&lt;-</span> reactive({

</div>
         
          
     <div>    
          
           
      <span>switch</span>(
          
           
      <span>input</span>
          
           
      <span>$</span>
          
           
      <span>dataset</span>,

</div>
         
          
     <div>           
          
           
      <span><span>"</span>rock<span>"</span></span> 
          
           
      <span>=</span> 
          
           
      <span>rock</span>,

</div>
         
          
     <div>           
          
           
      <span><span>"</span>pressure<span>"</span></span> 
          
           
      <span>=</span> 
          
           
      <span>pressure</span>,

</div>
         
          
     <div>           
          
           
      <span><span>"</span>cars<span>"</span></span> 
          
           
      <span>=</span> 
          
           
      <span>cars</span>)

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>

</div>
         
          
     <div>  
          
           
      <span>output</span>
          
           
      <span>$</span>
          
           
      <span>view</span> 
          
           
      <span>&lt;-</span> renderGvis({

</div>
         
          
     <div>
      
           
              gvisScatterChart(datasetInput(), 
          
           
      <span>options</span>
          
           
      <span>=</span>
          
           
      <span>list</span>(
          
           
      <span>width</span>
          
           
      <span>=</span>
          
           
      <span>400</span>, 
          
           
      <span>height</span>
          
           
      <span>=</span>
          
           
      <span>450</span>))

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>
      
           
          })

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][]             [server.R][]            hosted with ❤ by [GitHub][]

</div>
         
          
     <div>
      
           
          shinyUI(pageWithSidebar(

</div>
         
          
     <div>
      
           
            headerPanel(
          
           
      <span><span>"</span>Example 1: scatter chart<span>"</span></span>),

</div>
         
          
     <div>
      
           
            sidebarPanel(

</div>
         
          
     <div>
      
           
              selectInput(
          
           
      <span><span>"</span>dataset<span>"</span></span>, 
          
           
      <span><span>"</span>Choose a dataset:<span>"</span></span>,

</div>
         
          
     <div>                
          
           
      <span>choices</span> 
          
           
      <span>=</span> c(
          
           
      <span><span>"</span>rock<span>"</span></span>, 
          
           
      <span><span>"</span>pressure<span>"</span></span>, 
          
           
      <span><span>"</span>cars<span>"</span></span>))

</div>
         
          
     <div>
      
           
            ),

</div>
         
          
     <div>
      
           
            mainPanel(

</div>
         
          
     <div>
      
           
              htmlOutput(
          
           
      <span><span>"</span>view<span>"</span></span>)

</div>
         
          
     <div>
      
           
            )

</div>
         
          
     <div>
      
           
          ))

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][view raw 1]             [ui.R][]            hosted with ❤ by [GitHub][]

You can run the app locally via:

library(googleVis)
    library(shiny)
    runGist(4970975)

### Example 2: Interactive table ###

The second example is quite simple as well, it displays a table. However, I am using the Google Chart table, which means that I can make it pageable and allow the user to choose how many rows of data to be shown. Of course, columns can be sorted by clicking in the header. I am not aware of any other option in R to create interactive tables.

[![Table.png][]][Table.png 1]

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>datasets</span>)

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>googleVis</span>)

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>shiny</span>)

</div>
         
          
     <div>
      
           
          &nbsp;

</div>
         
          
     <div>  
          
           
      <span>myOptions</span> 
          
           
      <span>&lt;-</span> reactive({

</div>
         
          
     <div>    
          
           
      <span>list</span>(

</div>
         
          
     <div>      
          
           
      <span>page</span>
          
           
      <span>=</span>ifelse(
          
           
      <span>input</span>
          
           
      <span>$</span>
          
           
      <span>pageable</span>
          
           
      <span>==</span>
          
           
      <span>TRUE</span>,
          
           
      <span><span>'</span>enable<span>'</span></span>,
          
           
      <span><span>'</span>disable<span>'</span></span>),

</div>
         
          
     <div>      
          
           
      <span>pageSize</span>
          
           
      <span>=</span>
          
           
      <span>input</span>
          
           
      <span>$</span>
          
           
      <span>pagesize</span>,

</div>
         
          
     <div>      
          
           
      <span>width</span>
          
           
      <span>=</span>
          
           
      <span>550</span>

</div>
         
          
     <div>
      
           
              )

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>  
          
           
      <span>output</span>
          
           
      <span>$</span>
          
           
      <span>myTable</span> 
          
           
      <span>&lt;-</span> renderGvis({

</div>
         
          
     <div>
      
           
              gvisTable(
          
           
      <span>Population</span>,
          
           
      <span>options</span>
          
           
      <span>=</span>myOptions())

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>
      
           
          })

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][view raw 2]             [ server.R][server.R 1]            hosted with ❤ by [ GitHub][GitHub]

</div>
         
          
     <div>
      
           
            headerPanel(
          
           
      <span><span>"</span>Example 4: pageable table<span>"</span></span>),

</div>
         
          
     <div>
      
           
            sidebarPanel(

</div>
         
          
     <div>
      
           
              checkboxInput(
          
           
      <span>inputId</span> 
          
           
      <span>=</span> 
          
           
      <span><span>"</span>pageable<span>"</span></span>, 
          
           
      <span>label</span> 
          
           
      <span>=</span> 
          
           
      <span><span>"</span>Pageable<span>"</span></span>),

</div>
         
          
     <div>
      
           
              conditionalPanel(
          
           
      <span><span>"</span>input.pageable==true<span>"</span></span>,

</div>
         
          
     <div>
      
           
                               numericInput(
          
           
      <span>inputId</span> 
          
           
      <span>=</span> 
          
           
      <span><span>"</span>pagesize<span>"</span></span>,

</div>
         
          
     <div>                                  
          
           
      <span>label</span> 
          
           
      <span>=</span> 
          
           
      <span><span>"</span>Countries per page<span>"</span></span>,
          
           
      <span>10</span>))

</div>
         
          
     <div>
      
           
            ),

</div>
         
          
     <div>
      
           
            mainPanel(

</div>
         
          
     <div>
      
           
              htmlOutput(
          
           
      <span><span>"</span>myTable<span>"</span></span>)

</div>
         
          
     <div>
      
           
            )

</div>
         
          
     <div>
      
           
          ))

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][view raw 3]             [ ui.R][ui.R 1]            hosted with ❤ by [ GitHub][GitHub]

You can run the app locally via:

library(googleVis)
    library(shiny)
    runGist("eda98b0dfdaec284f271")

### Example 3: Animated geo chart ###

The third example plots the results of the US presidential elections from 1932 - 2012 as a geo chart, showing the share of democratic votes by state.  
  
I use a `slidebarPanel` to enable users to browse the data. The really clever bit is that the function `slideInput` has an argument `animate`, which when set to `TRUE`, allows the user to animate the geo chart. Hit the play button in the bottom right hand side of the slider panel.

[![geochart.png][]][geochart.png 1]

<table> 
 <tbody> 
  <tr> 
   <td><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span></td> 
   <td> <pre>
         
          
     <div>
          
           
      <span># Markus Gesmann, February 2013</span>

</div>
         
          
     <div>
      
           
          require(
          
           
      <span>googleVis</span>)

</div>
         
          
     <div>
      
           
          require(
          
           
      <span>shiny</span>)

</div>
         
          
     <div>
          
           
      <span>## Prepare data to be displayed</span>

</div>
         
          
     <div>
          
           
      <span>## Load presidential election data by state from 1932 - 2012</span>

</div>
         
          
     <div>
      
           
          library(
          
           
      <span>RCurl</span>)

</div>
         
          
     <div>
          
           
      <span>url</span> 
          
           
      <span>&lt;-</span> 
          
           
      <span><span>"</span>https://raw.githubusercontent.com/mages/diesunddas/master/Data/US%20Presidential%20Elections.csv<span>"</span></span>

</div>
         
          
     <div>
          
           
      <span>dat</span> 
          
           
      <span>&lt;-</span> getURL(
          
           
      <span>url</span>, 
          
           
      <span>ssl.verifypeer</span>
          
           
      <span>=</span>
          
           
      <span>0L</span>, 
          
           
      <span>followlocation</span>
          
           
      <span>=</span>
          
           
      <span>1L</span>)

</div>
         
          
     <div>
          
           
      <span>dat</span> 
          
           
      <span>&lt;-</span> read.csv(
          
           
      <span>text</span>
          
           
      <span>=</span>
          
           
      <span>dat</span>)

</div>
         
          
     <div>
          
           
      <span>## Add min and max values to the data</span>

</div>
         
          
     <div>
          
           
      <span>datminmax</span> 
          
           
      <span>=</span> 
          
           
      <span>data.frame</span>(
          
           
      <span>state</span>
          
           
      <span>=</span>rep(c(
          
           
      <span><span>"</span>Min<span>"</span></span>, 
          
           
      <span><span>"</span>Max<span>"</span></span>),
          
           
      <span>21</span>),

</div>
         
          
     <div>                       
          
           
      <span>demVote</span>
          
           
      <span>=</span>rep(c(
          
           
      <span>0</span>, 
          
           
      <span>100</span>),
          
           
      <span>21</span>),

</div>
         
          
     <div>                       
          
           
      <span>year</span>
          
           
      <span>=</span>sort(rep(seq(
          
           
      <span>1932</span>,
          
           
      <span>2012</span>,
          
           
      <span>4</span>),
          
           
      <span>2</span>)))

</div>
         
          
     <div>
          
           
      <span>dat</span> 
          
           
      <span>&lt;-</span> rbind(
          
           
      <span>dat</span>[,
          
           
      <span>1</span>
          
           
      <span>:</span>
          
           
      <span>3</span>], 
          
           
      <span>datminmax</span>)

</div>
         
          
     <div>
      
           
          &nbsp;

</div>
         
          
     <div>  
          
           
      <span>myYear</span> 
          
           
      <span>&lt;-</span> reactive({

</div>
         
          
     <div>    
          
           
      <span>input</span>
          
           
      <span>$</span>
          
           
      <span>Year</span>

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>  
          
           
      <span>output</span>
          
           
      <span>$</span>
          
           
      <span>year</span> 
          
           
      <span>&lt;-</span> renderText({

</div>
         
          
     <div>
      
           
              paste(
          
           
      <span><span>"</span>Democratic share of the presidential vote in<span>"</span></span>, myYear())

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>  
          
           
      <span>output</span>
          
           
      <span>$</span>
          
           
      <span>gvis</span> 
          
           
      <span>&lt;-</span> renderGvis({

</div>
         
          
     <div>    
          
           
      <span>myData</span> 
          
           
      <span>&lt;-</span> subset(
          
           
      <span>dat</span>,

</div>
         
          
     <div>
      
           
                               (
          
           
      <span>year</span> 
          
           
      <span>&gt;</span> (myYear()
          
           
      <span>-</span>
          
           
      <span>1</span>)) 
          
           
      <span>&amp;</span> (
          
           
      <span>year</span> 
          
           
      <span>&lt;</span> (myYear()
          
           
      <span>+</span>
          
           
      <span>1</span>)))

</div>
         
          
     <div>
      
           
              gvisGeoChart(
          
           
      <span>myData</span>,

</div>
         
          
     <div>                 
          
           
      <span>locationvar</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>state<span>"</span></span>, 
          
           
      <span>colorvar</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>demVote<span>"</span></span>,

</div>
         
          
     <div>                 
          
           
      <span>options</span>
          
           
      <span>=</span>
          
           
      <span>list</span>(
          
           
      <span>region</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>US<span>"</span></span>, 
          
           
      <span>displayMode</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>regions<span>"</span></span>,

</div>
         
          
     <div>                              
          
           
      <span>resolution</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>provinces<span>"</span></span>,

</div>
         
          
     <div>                              
          
           
      <span>width</span>
          
           
      <span>=</span>
          
           
      <span>500</span>, 
          
           
      <span>height</span>
          
           
      <span>=</span>
          
           
      <span>400</span>,

</div>
         
          
     <div>                              
          
           
      <span>colorAxis</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>{colors:['#FFFFFF', '#0000FF']}<span>"</span></span>

</div>
         
          
     <div>
      
           
                                 ))

</div>
         
          
     <div>
      
           
            })

</div>
         
          
     <div>
      
           
          })

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][view raw 4]             [server.R][server.R 2]            hosted with ❤ by [GitHub][]

</div>
         
          
     <div>
      
           
          &nbsp;

</div>
         
          
     <div>
      
           
          shinyUI(pageWithSidebar(

</div>
         
          
     <div>
      
           
            headerPanel(
          
           
      <span><span>"</span>Example 3: animated geo chart<span>"</span></span>),

</div>
         
          
     <div>
      
           
            sidebarPanel(

</div>
         
          
     <div>
      
           
              sliderInput(
          
           
      <span><span>"</span>Year<span>"</span></span>, 
          
           
      <span><span>"</span>Election year to be displayed:<span>"</span></span>,

</div>
         
          
     <div>                
          
           
      <span>min</span>
          
           
      <span>=</span>
          
           
      <span>1932</span>, 
          
           
      <span>max</span>
          
           
      <span>=</span>
          
           
      <span>2012</span>, 
          
           
      <span>value</span>
          
           
      <span>=</span>
          
           
      <span>2012</span>,  
          
           
      <span>step</span>
          
           
      <span>=</span>
          
           
      <span>4</span>,

</div>
         
          
     <div>                
          
           
      <span>format</span>
          
           
      <span>=</span>
          
           
      <span><span>"</span>###0<span>"</span></span>,
          
           
      <span>animate</span>
          
           
      <span>=</span>
          
           
      <span>TRUE</span>)

</div>
         
          
     <div>
      
           
            ),

</div>
         
          
     <div>
      
           
            mainPanel(

</div>
         
          
     <div>
      
           
              h3(textOutput(
          
           
      <span><span>"</span>year<span>"</span></span>)),

</div>
         
          
     <div>
      
           
              htmlOutput(
          
           
      <span><span>"</span>gvis<span>"</span></span>)

</div>
         
          
     <div>
      
           
            )

</div>
         
          
     <div>
      
           
          )

</div></pre> </td> 
  </tr> 
 </tbody> 
</table>

[view raw][view raw 5]             [ui.R][ui.R 2]            hosted with ❤ by [GitHub][]

You can run the app locally via:

library(googleVis)
    library(shiny)
    runGist(4642963)

### Conclusions ###

Finally, with version 0.4.0 of googleVis and shiny, both packages have found together. I think, this marks a big step forward for both projects as it becomes even easier to develop true interactive data analysis applications for the web using the power of R in the background.  
  
We will be most curious to see how you use the two packages combined for your work. Please let us know how you have used googleVis with shiny, e.g. via a comment below with a link to your app, or send us your [ feedback via email][feedback] and/or file [ issues on our project site][issues on our project site].  
  
As mentioned above the apps of this post are hosted on RStudio's server, as part of their [ shiny beta testing programme][shiny beta testing programme]. Thanks to [ RStudio][RStudio 1] again.

### Further changes in googleVis  0.4.0 ###

*  In order to support shiny the order of the elements of the  
    gvis\*()$html$chart vector changed. The positions of jsChart and  
    jsFooter have been swapped.  
    
 *  The load mechanism for the Google API changed from http to https  
    again. Thanks to Jacques Philip.  
    
 *  The package dependencies changed to imports statements in DESCRIPTION.  
    Thanks to Suraj Gupta for pointing this out.  
    
 *  The R.rsp example in demo googleVis has been moved into its own demo Rrsp.  
    
 *  A FAQ and shiny section has been added to the vignette.

**Bug Fixes**

*  jsDisplayChart didn't check if the google visualization function is already  
    loaded. Many thanks to Mark Melling for reporting the issue and  
    providing a solution.  
    
 *  The demo WorldBank didn't download all data but only the first 12000 records. Many thanks to John Maindonald reporting this issue.

### Session Info ###

R version 2.15.2 (2012-10-26)
    Platform: x86_64-apple-darwin9.8.0/x86_64 (64-bit)
    
    locale:
    [1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8
    
    attached base packages:
    [1] stats     graphics  grDevices utils     datasets  methods   base     
    
    other attached packages:
    [1] shiny_0.4.0     googleVis_0.4.0
    
    loaded via a namespace (and not attached):
    [1] bitops_1.0-4.2   caTools_1.14     digest_0.6.1     RJSONIO_1.0-1    websockets_1.1.7 xtable_1.7-0

[RStudio]: http://www.rstudio.org/
[shiny]: http://www.rstudio.com/shiny/
[R]: http://www.r-project.org/
[googleVis]: https://github.com/mages/googleVis
[Google Charts Tools]: https://developers.google.com/chart/
[Shiny.png]: http://1.bp.blogspot.com/-bZnkbAYiP_E/USiZYRRVZgI/AAAAAAAAAzI/IELLGR4GiYY/s640/Shiny.png
[Shiny.png 1]: http://1.bp.blogspot.com/-bZnkbAYiP_E/USiZYRRVZgI/AAAAAAAAAzI/IELLGR4GiYY/s1600/Shiny.png
[feedback]: mailto:rvisualisation@gmail.com?Subject=googleVis-0.4.0
[download page]: https://github.com/mages/googleVis/
[post on RStudio_s blog]: http://blog.rstudio.org/2013/02/22/shiny-0-4-0-now-available/
[ScatterChart.png]: http://4.bp.blogspot.com/-XQfpejLZ6HA/VQQUdSjwJpI/AAAAAAAAB7w/ClctZtDsm_8/s400/ScatterChart.png
[ScatterChart.png 1]: http://4.bp.blogspot.com/-XQfpejLZ6HA/VQQUdSjwJpI/AAAAAAAAB7w/ClctZtDsm_8/s1600/ScatterChart.png
[view raw]: https://gist.github.com/mages/4970975/raw/server.R
[server.R]: https://gist.github.com/mages/4970975#file-server-r
[GitHub]: https://github.com/
[view raw 1]: https://gist.github.com/mages/4970975/raw/ui.R
[ui.R]: https://gist.github.com/mages/4970975#file-ui-r
[Table.png]: http://2.bp.blogspot.com/-cQmNNgDYxZE/VQQUd7biGFI/AAAAAAAAB70/BZUcwHTf2tg/s400/Table.png
[Table.png 1]: http://2.bp.blogspot.com/-cQmNNgDYxZE/VQQUd7biGFI/AAAAAAAAB70/BZUcwHTf2tg/s1600/Table.png
[view raw 2]: https://gist.github.com/mages/eda98b0dfdaec284f271/raw/server.R
[server.R 1]: https://gist.github.com/mages/eda98b0dfdaec284f271#file-server-r
[view raw 3]: https://gist.github.com/mages/eda98b0dfdaec284f271/raw/ui.R
[ui.R 1]: https://gist.github.com/mages/eda98b0dfdaec284f271#file-ui-r
[geochart.png]: http://2.bp.blogspot.com/-EfrVZxmBXfA/VQQUd5ANmWI/AAAAAAAAB78/Z_AdZXMZ60A/s400/geochart.png
[geochart.png 1]: http://2.bp.blogspot.com/-EfrVZxmBXfA/VQQUd5ANmWI/AAAAAAAAB78/Z_AdZXMZ60A/s1600/geochart.png
[view raw 4]: https://gist.github.com/mages/4642963/raw/server.R
[server.R 2]: https://gist.github.com/mages/4642963#file-server-r
[view raw 5]: https://gist.github.com/mages/4642963/raw/ui.R
[ui.R 2]: https://gist.github.com/mages/4642963#file-ui-r
[issues on our project site]: https://github.com/mages/googleVis/issues
[shiny beta testing programme]: https://rstudio.wufoo.com/forms/shiny-server-beta-program/
[RStudio 1]: http://www.rstudio.com/