<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/building-a-simple-sales-revenue-dashboard-with-r-shiny-shinydashboard/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://datascienceplus.com/building-a-simple-sales-revenue-dashboard-with-r-shiny-shinydashboard/"> R Programming – DataScience+</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>One of the beautiful gifts that R has got (that Python misses) is the package – <code>Shiny</code>. Shiny is an R package that makes it easy to <a rel="nofollow" href="https://datascienceplus.com/developing-a-r-tutorial-shiny-dashboard-app/" target="_blank">build interactive web apps</a> straight from R. Making Dashboard is an imminent wherever Data is available since Dashboards are good in helping Business make insights out of the existing data. </p>
<p>In this post, We will see how to leverage Shiny to build a simple Sales Revenue Dashboard. </p>
<h3>Loading Packages</h3>
<p>All the packages listed below can be directly installed from CRAN. </p>
<pre>
# load the required packages
library(shiny)
require(shinydashboard)
library(ggplot2)
library(dplyr)
</pre>
<p>Sample Input File:<br>
Considering the fact that Dashboard needs an input data to visualise, we will use this sample <a rel="nofollow" href="https://raw.githubusercontent.com/amrrs/sample_revenue_dashboard_shiny/master/recommendation.csv" target="_blank">recommendation.csv</a> as input data to our dashboard but this can be modified to suit any organisational need like a Database connection or Data from remote location. </p>
<pre>
recommendation &lt;- read.csv('recommendation.csv',stringsAsFactors = F,header=T)
head(recommendation)
<em> Account Product Region Revenue
1 Axis Bank FBB North 2000
2 HSBC FBB South 30000
3 SBI FBB East 1000
4 ICICI FBB West 1000
5 Bandhan Bank FBB West 200
6 Axis Bank SIMO North 200
</em>
</pre>
<p>Every shiny application has two main sections 1. <code>ui</code> and 2. <code>server</code>. <code>ui</code> is where the code for front-end like buttons, plot visuals, tabs and so on are present and <code>server</code> is where the code for back-end like Data Retrieval, Manipulation, Wrangling are present. </p>
<p><a rel="nofollow" href="https://i0.wp.com/datascienceplus.com/wp-content/uploads/2017/12/slide_7.jpg?ssl=1" target="_blank"><img sizes="(max-width: 490px) 100vw, 490px" src="https://i0.wp.com/datascienceplus.com/wp-content/uploads/2017/12/slide_7-490x276.jpg?w=450&ssl=1" alt="" class="wp-image-9891" data-recalc-dims="1"></a><br>
<small>Image Courtesy: <a rel="nofollow" href="http://slideplayer.com/slide/9179790/" target="_blank">Slideplayer</a></small></p>
<p>Instead of simply using only <code>shiny</code>, Here we will couple it with <code>shinydashboard</code>. <code>shinydashboard</code> is an R package whose job is to make it easier (as the name suggests) to build dashboards with shiny. The <code>ui</code> part of a shiny app built with shinydashboard would have 3 basic elements wrapped in dashboardPage(). </p>
<ul>
1. dashboardHeader(),<br>
2. dashboardSidebar(),<br>
3. dashboardBody()
</ul>
<p>Simplest Shiny app with shinydashboard:</p>
<pre>
## app.R ##
library(shiny)
library(shinydashboard)
ui &lt;- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)
server &lt;- function(input, output) { }
shinyApp(ui, server)
</pre>
<p>Gives this app:<br>
<a rel="nofollow" href="https://i2.wp.com/datascienceplus.com/wp-content/uploads/2017/12/blank_dashboard.png?ssl=1" target="_blank"><img sizes="(max-width: 490px) 100vw, 490px" src="https://i1.wp.com/datascienceplus.com/wp-content/uploads/2017/12/blank_dashboard-490x302.png?w=450&ssl=1" alt="" class="wp-image-9892" data-recalc-dims="1"></a><br>
<small>Image Courtesy: <a rel="nofollow" href="http://rstudio.github.io/shinydashboard/get_started.html" target="_blank">rstudio</a></small></p>
<p>Aligning to our larger goal of making a Sales Revenue Dashboard, Let us look at the code of <code>dashboardHeader()</code> and <code>dashboardSidebar()</code>.</p>
<pre>
#Dashboard header carrying the title of the dashboard
header &lt;- dashboardHeader(title = &quot;Basic Dashboard&quot;)  
#Sidebar content of the dashboard
sidebar &lt;- dashboardSidebar(
  sidebarMenu(
    menuItem(&quot;Dashboard&quot;, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),
    menuItem(&quot;Visit-us&quot;, icon = icon(&quot;send&quot;,lib='glyphicon'), 
             href = &quot;https://www.salesforce.com&quot;)
  )
)
</pre>
<p>To begin with dashboardPage(), We must decide what are the UI elements that we would like to show in our dashboard. Since it’s a Sales Revenue Dashboard, let us show 3 KPI boxes on the top that could represent quick summary and then 2 Graphical plots followed by them for a detailed view.</p>
<p>To align these elements one by one, we will define these elements inside <code>fluidRow()</code>. </p>
<pre>
frow1 &lt;- fluidRow(
  valueBoxOutput(&quot;value1&quot;)
  ,valueBoxOutput(&quot;value2&quot;)
  ,valueBoxOutput(&quot;value3&quot;)
)
frow2 &lt;- fluidRow( 
  box(
    title = &quot;Revenue per Account&quot;
    ,status = &quot;primary&quot;
    ,solidHeader = TRUE 
    ,collapsible = TRUE 
    ,plotOutput(&quot;revenuebyPrd&quot;, height = &quot;300px&quot;)
  )
  ,box(
    title = &quot;Revenue per Product&quot;
    ,status = &quot;primary&quot;
    ,solidHeader = TRUE 
    ,collapsible = TRUE 
    ,plotOutput(&quot;revenuebyRegion&quot;, height = &quot;300px&quot;)
  ) 
)
# combine the two fluid rows to make the body
body &lt;- dashboardBody(frow1, frow2)
</pre>
<p>It could be seen from the above code that <code>valueBoxOutput()</code> is used to display the KPI but what is displayed in this <code>valueBoxOutput()</code> will be written in the <code>server</code> part and the same applies for <code>plotOutput()</code> which is used in the <code>ui</code> part to display a plot. <code>box()</code> is a function provided by <code>shinydashboard</code> to enclose the plot inside a box with certain features like <code>title</code>, <code>solidHeader</code> and <code>collapsible</code>. Having defined two fluidRow() functions individually for the sake of modularity, we can combine both of them in <code>dashbboardBody()</code>.</p>
<p>Thus we can complete the ui part comprising Header, Sidebar and Page with the below code:</p>
<pre>
#completing the ui part with dashboardPage
ui &lt;- dashboardPage(title = 'This is my Page title', header, sidebar, body, skin='red')
</pre>
<p>Note that the value of <code>title</code> in <code>dashboardPage()</code> will serve as the title of the browser page/tab, while the title defined in the <code>dashboardHeader()</code> will be visible as the dashboard title. </p>
<p>With the ui part over, We will create the <code>server</code> part where the program and logic behind <code>valueBoxOutput()</code> and <code>plotOutput()</code> are added with <code>renderValueBox()</code> and <code>renderPlot()</code> respectively, enclosed inside <code>server</code> function with <code>input</code>,<code>output </code>as its paramaters. Values inside <code>input </code>contain anything that is received from ui (like <code>textBox </code>value, <code>Slider </code>value) and Values inside <code>output </code>contain anything that is sent to ui (like <code>plotOutput</code>, <code>valueBoxOutput</code>). </p>
<p>Below is the complete server code:</p>
<pre>
# create the server functions for the dashboard  
server &lt;- function(input, output) { 
  #some data manipulation to derive the values of KPI boxes
  total.revenue &lt;- sum(recommendation$Revenue)
  sales.account &lt;- recommendation %>% group_by(Account) %>% summarise(value = sum(Revenue)) %>% filter(value==max(value))
  prof.prod &lt;- recommendation %>% group_by(Product) %>% summarise(value = sum(Revenue)) %>% filter(value==max(value))
#creating the valueBoxOutput content
  output$value1 &lt;- renderValueBox({
    valueBox(
      formatC(sales.account$value, format=&quot;d&quot;, big.mark=',')
      ,paste('Top Account:',sales.account$Account)
      ,icon = icon(&quot;stats&quot;,lib='glyphicon')
      ,color = &quot;purple&quot;)  
  })
  output$value2 &lt;- renderValueBox({ 
    valueBox(
      formatC(total.revenue, format=&quot;d&quot;, big.mark=',')
      ,'Total Expected Revenue'
      ,icon = icon(&quot;gbp&quot;,lib='glyphicon')
      ,color = &quot;green&quot;)  
  })
output$value3 &lt;- renderValueBox({
    valueBox(
      formatC(prof.prod$value, format=&quot;d&quot;, big.mark=',')
      ,paste('Top Product:',prof.prod$Product)
      ,icon = icon(&quot;menu-hamburger&quot;,lib='glyphicon')
      ,color = &quot;yellow&quot;)   
  })
#creating the plotOutput content
  output$revenuebyPrd &lt;- renderPlot({
    ggplot(data = recommendation, 
           aes(x=Product, y=Revenue, fill=factor(Region))) + 
      geom_bar(position = &quot;dodge&quot;, stat = &quot;identity&quot;) + ylab(&quot;Revenue (in Euros)&quot;) + 
      xlab(&quot;Product&quot;) + theme(legend.position=&quot;bottom&quot; 
                              ,plot.title = element_text(size=15, face=&quot;bold&quot;)) + 
      ggtitle(&quot;Revenue by Product&quot;) + labs(fill = &quot;Region&quot;)
  })
output$revenuebyRegion &lt;- renderPlot({
    ggplot(data = recommendation, 
           aes(x=Account, y=Revenue, fill=factor(Region))) + 
      geom_bar(position = &quot;dodge&quot;, stat = &quot;identity&quot;) + ylab(&quot;Revenue (in Euros)&quot;) + 
      xlab(&quot;Account&quot;) + theme(legend.position=&quot;bottom&quot; 
                              ,plot.title = element_text(size=15, face=&quot;bold&quot;)) + 
      ggtitle(&quot;Revenue by Region&quot;) + labs(fill = &quot;Region&quot;)
  })
}
</pre>
<p>So far, we have defined both the essential parts of a Shiny app – ui and server. And finally we have to call/run the shinyApp with ui and server as its paramters.</p>
<pre>
#run/call the shiny app
shinyApp(ui, server)
<em>Listening on http://127.0.0.1:5101
</em>
</pre>
<p>The entire file has to be saved as <code>app.R</code> inside a folder before <a rel="nofollow" href="https://shiny.rstudio.com/reference/shiny/latest/runApp.html" target="_blank">running the shiny app</a>. Also remember to put the input data file (in our case, <code>recommendation.csv</code> inside the same folder where <code>app.R</code> is saved). While there is another valid way to structure the shiny app with two files <code>ui.R</code> and <code>server.R</code> (optionally, <code>global.R</code>), it has been ignored in this article for the sake of brevity since this is aimed at beginners. </p>
<p>Upon running the file, the shiny web app would open in your default browser and would look similar to the below screenshot:<br>
<a rel="nofollow" href="https://i2.wp.com/datascienceplus.com/wp-content/uploads/2017/12/revenue-dash-screenshot.png?ssl=1" target="_blank"><img sizes="(max-width: 1365px) 100vw, 1365px" src="https://i2.wp.com/datascienceplus.com/wp-content/uploads/2017/12/revenue-dash-screenshot.png?w=450&ssl=1" alt="" class="wp-image-9896" data-recalc-dims="1"></a></p>
<p><a rel="nofollow" href="https://i1.wp.com/datascienceplus.com/wp-content/uploads/2017/12/revenue-dash-screenshot2.png?ssl=1" target="_blank"><img sizes="(max-width: 1366px) 100vw, 1366px" src="https://i1.wp.com/datascienceplus.com/wp-content/uploads/2017/12/revenue-dash-screenshot2.png?w=450&ssl=1" alt="" class="wp-image-9902" data-recalc-dims="1"></a></p>
<p>Hopefully at this stage, You have got your shiny web app in the form of Sales Revenue Dashboard up and running. The code and plots used here are available on <a rel="nofollow" href="https://github.com/amrrs/sample_revenue_dashboard_shiny" target="_blank">my Github</a>.</p>
<p><b>References</b></p>
<ul>
1. <a rel="nofollow" href="https://shiny.rstudio.com/articles/basics.html" target="_blank">The basic parts of a shiny app</a><br>
2. <a rel="nofollow" href="http://rstudio.github.io/shinydashboard/get_started.html" target="_blank">Get Started – Shinydashboard</a><br>
3. <a rel="nofollow" href="http://slideplayer.com/slide/9179790/" target="_blank">Shiny Files Structure</a><br>
4. <a rel="nofollow" href="https://raw.githubusercontent.com/amrrs/sample_revenue_dashboard_shiny/master/recommendation.csv" target="_blank">Input recommendation.csv file</a> (right click and save as <code>recommendation.csv</code>) </ul>
<ul></ul>
<p><strong>
<p>Related Post</p>
<p></p></strong>
<ol>
<li><a rel="nofollow" href="https://datascienceplus.com/gender-diversity-analysis-of-data-science-industry-using-kaggle-survey-dataset-in-r/" title="Permanent Link toGender Diversity Analysis of Data Science Industry using Kaggle Survey Dataset in R" target="_blank">Gender Diversity Analysis of Data Science Industry using Kaggle Survey Dataset in R</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/how-happy-is-your-country-visualized/" title="Permanent Link toHow Happy is Your Country? — Happy Planet Index Visualized" target="_blank">How Happy is Your Country? — Happy Planet Index Visualized</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/exploring-clustering-and-mapping-torontos-crimes/" title="Permanent Link toExploring, Clustering, and Mapping Toronto’s Crimes" target="_blank">Exploring, Clustering, and Mapping Toronto’s Crimes</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/spring-budget-2017-circle-visualisation/" title="Permanent Link toSpring Budget 2017: Circle Visualisation" target="_blank">Spring Budget 2017: Circle Visualisation</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/qualitative-research-in-r/" title="Permanent Link toQualitative Research in R" target="_blank">Qualitative Research in R</a></li>
</ol>
	<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://datascienceplus.com/building-a-simple-sales-revenue-dashboard-with-r-shiny-shinydashboard/"> R Programming – DataScience+</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/7NbP2lNK29U" height="1"></a></div>