<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/using-r-to-create-free-online-dashboards/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.displayr.com/using-r-to-create-free-online-dashboards/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><span><strong><span>It is now possible to create public dashboards, based on R code, for <span>free!</span> To illustrate how it works, I’ve used the free version of Displayr to</span> <a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">create a copy</a> <span>of </span><a rel="nofollow" href="https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html" target="_blank">RStudio Connect’s HTML Widgets Showcase</a>.</strong></span><a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank"><img alt="" src="https://i2.wp.com/www.displayr.com/wp-content/uploads/2018/08/DisplayrVersusRConnect.png?w=450&ssl=1" class="wp-image-7726" data-recalc-dims="1"></a></p>
<h2>Getting started</h2>
<p>The first step is to<a rel="nofollow" href="https://app.displayr.com/SignUp?plan_id=0" target="_blank"> click this link which will prompt you to sign up.</a> Sign up is free. Then all you need to do is click <span> + Add New </span> and then <span> Create </span> to make a new dashboard. You will be looking at a blank page.</p>
<h2>Creating an interactive street map</h2>
<p>We will start by creating the interactive street map shown below, which shows where R started. Depending on what type of device you are using, you can zoom in by touching the screen, or by using the + and – buttons at the top left.</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/289644/67558173-2154-49ef-934b-5f7cc0202e0f.html?v=31964-3e15184768842819972"></iframe></p>
<p>We can create this in a few seconds (or, <a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">click here and go into Displayr and view the source code</a>):</p>
<ul>
<li>Click into the title field at the top and type <span>Leaflet</span>.</li>
<li>Press <strong>Insert > R Output (Analysis)</strong>, which is in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Ribbon" target="_blank">ribbon</a> at the top of the screen.</li>
<li>Copy and paste the R code below into the <strong>R CODE </strong>box in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Object_Inspector" target="_blank">Object Inspector</a> (on the right of the screen).</li>
<li>Press <span><span> </span><strong><span>CALCULATE </span></strong></span>.</li>
</ul>
<p>With those few steps, you have already built a quick dashboard! If you want to share it with a friend, just click <strong>Export > Public Web Page </strong>and send them the link. A  professional Displayr account will allow you to explore publishing private dashboards that are password protected.</p>
<pre> 
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup=&quot;The birthplace of R&quot;)
</pre>
<h2>Creating an interactive time series chart</h2>
<p>Now we will create a second page, with the interactive time series chart shown below. The nice things about this visualization are that you can hover over the line to see the values, and can move and resize the “window” at the bottom.</p>
<p><iframe width="450" src="https://embedded.azureedge.net/75668/289644/80b9ccaf-d47a-427f-a757-f8940995a3ea.html?v=31964-3e151847681417190969"></iframe></p>
<p>To create this yourself:</p>
<ul>
<li>Press <strong>Home > New Page > Title Only</strong>.</li>
<li>Click into the title field at the top and type <span>Dygraph</span>.</li>
<li>Press <strong>Insert > R Output (Analysis)</strong>.</li>
<li>Copy and paste the R code below into the <strong>R CODE </strong>box in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Object_Inspector" target="_blank">Object Inspector</a>.</li>
<li>Press <span><span> </span><strong><span>CALCULATE </span></strong></span>.</li>
</ul>
<pre> 
library(dygraphs)
dygraph(nhtemp, main = &quot;New Haven Temperatures&quot;) %>% 
  dyRangeSelector(dateWindow = c(&quot;1920-01-01&quot;, &quot;1960-01-01&quot;))</pre>
<h2>Creating interactive heatmaps, column charts, and bubble charts</h2>
<p>We can follow exactly the same steps to create heatmaps, bar charts, and bubble charts, using the three snippets of code below.</p>
<p><a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">Heatmap Example</a></p>
<pre> 
library(d3heatmap)
d3heatmap(mtcars, scale=&quot;column&quot;, colors=&quot;Blues&quot;)
</pre>
<p><a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">Bar Chart Example</a></p>
<pre> 
library(plotly)
p &lt;- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = &quot;dodge&quot;)
ggplotly(p)
</pre>
<p><a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">Bubble Chart Example</a></p>
<pre> 
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x=&quot;Weight of Car&quot;, y=&quot;Miles per Gallon&quot;)
</pre>
<h2>Formatting</h2>
<p>We’ve now done the hard bit (getting the R code), and can move on to the formatting. The page below has been created by adding boxes, adding text, and playing around with size and color. Key options to use are:</p>
<ul>
<li>Resize the page: <strong>Home > Layout > Page Size > Custom</strong>. I set it to 16 inches by 9 inches. It will automatically scale to whatever size browser you use.</li>
<li>Add a box: <strong>Insert > Shape > Rectangle</strong>. You can modify the colors in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Object_Inspector" target="_blank">Object Inspector</a>.</li>
<li>Add text: <strong>Insert > Text Box</strong>. You can modify the colors in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Object_Inspector" target="_blank">Object Inspector</a>.</li>
<li>Change which things are on top of which others using <strong>Appearance > Send to Back </strong>and the associated options.</li>
<li>Align things by dragging and looking at the guides, using <strong>Appearance > Align</strong>, or setting the pixel level controls in the <a rel="nofollow" href="https://docs.displayr.com/wiki/Object_Inspector" target="_blank">Object Inspector</a>.</li>
</ul>
<p><img sizes="(max-width: 1024px) 100vw, 1024px" src="https://i1.wp.com/www.displayr.com/wp-content/uploads/2018/08/AddingBoxesAndText-1024x580.png?w=450&ssl=1" alt="" class="wp-image-7720" data-recalc-dims="1"></p>
<h2>Saving time using Duplicate</h2>
<p>The most efficient way to work is to first create one page, so that it is exactly like you want, and then, rather than doing it all again, click on the page in <strong>Pages </strong>(left side of the screen), and press <strong>Home > Duplicate. </strong>Then it’s as easy as modifying the duplicate of the page. You can also duplicate other things in the same way, such as text boxes and analyses.</p>
<h2>Navigation</h2>
<p>By default, Displayr will create a navigation bar like the one shown below (on the left). However, we can hide this and create custom navigation using hyperlinks.</p>
<p><img sizes="(max-width: 505px) 100vw, 505px" src="https://i0.wp.com/www.displayr.com/wp-content/uploads/2018/08/Navigation-1024x503.png?w=450&ssl=1" alt="" class="wp-image-7723" data-recalc-dims="1"></p>
<p>To create a hyperlink between pages in a dashboard:</p>
<ul>
<li>Export the dashboard and copy the address (URL) of the page that you want to link to.</li>
<li>Go back into <em>edit mode </em>(where you created the dashboard), and select the object you want the user to click on to navigate. In this example, I’ve put the hyperlinks onto the text boxes at the top of the page, to replicate the functionality of the RStudio Connect dashboard. You can also create hyperlinks on individual words in text boxes, or on other objects, such as boxes and charts.</li>
<li>Press <strong>Insert > Hyperlink </strong>and paste the address and press <strong>OK</strong>.</li>
<li>Once you have created and tested all the hyperlinks, you can turn off the navigation bar by clicking on the bottom of the <strong>Export > Public Web Page </strong>button and choosing <strong>Hide navigation bar </strong>and then <strong>Export</strong>.</li>
</ul>
<h2>Next steps</h2>
<p>As mentioned at the beginning of the post, you can do all this yourself in the <a rel="nofollow" href="http://www.displayr.com/" target="_blank">free version of Displayr</a>. Or, if you want to inspect and modify the dashboard that I have created, <a rel="nofollow" href="https://app.displayr.com/try/HTML%20Widgets%20Showcase" target="_blank">click here</a>.</p>
<p><strong>Need some help or have a question? Let us know and one of our experts will be in touch.</strong></p>
<p><iframe width="100%" src="https://go.pardot.com/l/400252/2018-02-22/bf4n5r" height="500"></iframe></p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://www.displayr.com/using-r-to-create-free-online-dashboards/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/KfOreDbUPqE" height="1"></a></div>