<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/making-a-shiny-dashboard-using-highcharter-analyzing-inflation-rates/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://datascienceplus.com/making-a-shiny-dashboard-using-highcharter-analyzing-inflation-rates/"> R Programming – DataScience+</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><code>Shiny</code> is an amazing R package which lets the R developers and users build amazing web apps using R itself. It lets the R users analyze, visualize and deploy their machine learning models directly in the form of the web app. This package lets you host standalone apps on a webpage or embed them in R markdown documents or build dashboards and various forecasting applications. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions. <code>Shiny</code> lets us write client-side front-end code in R itself and also lets users write server-side script in R itself. More details on this package can be found <a rel="nofollow" href="https://shiny.rstudio.com/" target="_blank">here</a>.</p>
<p>I recently learned Shiny and started developing a web application using it.And since then I have been in love with it and have been using it in each and every data science and analytics project. The syntax is super easy to understand and there are lots of amazing articles and documentation available for you to learn it and use it. I personally had a background of developing full-stack web applications using HTML, CSS and javascript and other JS based scripting languages so I found the syntax easy.</p>
<p>This article is meant for people who at least have a basic understanding of how to use <code>shiny</code> in R or who either have knowledge of developing web apps. But still, it is easy for an intermediate level or beginner R user to learn shiny and its syntax to develop web apps.</p>
<p>In this article I am going to demonstrate how to make a dashboard using <code>shinydashboard</code> package. Shiny Dashboard is also another package similar to <code>shiny</code> which is specifically used to make dashboards easily in R and deploy them. More details on this package can be found <a rel="nofollow" href="https://rstudio.github.io/shinydashboard/get_started.html" target="_blank">here</a>.</p>
<p>Secondly, in this article I am going to demonstrate how to use <code>highcharter</code> package which is a Javascript based visualization library in R to develop amazing and beautiful plots. Its syntax is somewhat similar to <b>qplot</b> function from the <code>ggplot2</code> package in R. So if you have good experience of using <code>ggplot2</code> package then you would find it easier to use. Details about the <code>highcharter</code> can be found <a rel="nofollow" href="http://jkunst.com/highcharter/index.html" target="_blank">here</a>.</p>
<h2>Analyzing Inflation Rates</h2>
<p>In this article I am going to demonstrate how to use <code>shinydashboard</code> and <code>highcharter</code> package in R to analyze and visualize Inflation rates of major economies and other economic and regional trade unions.</p>
<h3>What are inflation rates</h3>
<p>Inflation rates are the general rate at which price of the goods and services within a particular economy are rising and the purchasing power of the currency is declining due to the higher priced goods. High inflation is definitely not good for an economy because it will always reduce the value for money. In general central banks of an economy tries to and work towards reducing the inflation rate and avoiding deflation.</p>
<p>Deflation is opposite of inflation. Deflation occurs when the inflation rates become negative or are below 0. Deflation is more harmful and dangerous for an economy because it means that the prices of goods and services are going to decrease. Now, this sounds amazing for consumers like us. But what actually happens is that the demand for goods and services have declined over a long term of time. This directly indicates that a recession is on its way. This brings job losses, declining wages and a big hit to the stock portfolio. Deflation slows economy’s growth. As prices fall, people defer(postpone) purchases in hope of a better lower price deal. Due to this companies and firms have to cut down the cost of their goods and products which directly affects the wages of the employees which have to be lowered.</p>
<p>Now I won’t be explaining much about these economic terms. I leave these things for the readers to go check and read these things out. I am sure you will find such subjects quite interesting.</p>
<h2>Lets start with designing UI in R</h2>
<p>In <code>shiny</code> you have the choice to write UI and server-side code in a single file. But I prefer to write the client-side and server-side code in separate files for easy understanding and modularity and stop the things to get messed up if the code gets too long.</p>
<pre>
#loading the packages
library(shinydashboard)
require(shiny)
require(highcharter)
#layout of the dashboard
#defining character vectors for select inputs
country&lt;-c(&quot;India&quot;,&quot;United States&quot;,&quot;Mexico&quot;,&quot;Canada&quot;,&quot;China, People's Republic of&quot;,&quot;Japan&quot;,&quot;Russian Federation&quot;,&quot;Germany&quot;,&quot;United Kingdom&quot;,&quot;European Union&quot;,
           &quot;ASEAN-5&quot;,&quot;New Zealand&quot;,&quot;Australia&quot;,&quot;Netherlands&quot;,&quot;Luxembourg&quot;,
           &quot;France&quot;,&quot;Qatar&quot;,&quot;United Arab Emirates&quot;,&quot;Saudi Arabia&quot;)

unions&lt;-c(&quot;Major advanced economies (G7)&quot;,&quot;European Union&quot;,&quot;Emerging and Developing Europe&quot;,&quot;ASEAN-5&quot;,&quot;Commonwealth of Independent States&quot;,
          &quot;Emerging and Developing Asia&quot;,&quot;Latin America and the Caribbean&quot;,
          &quot;Middle East, North Africa, Afghanistan, and Pakistan&quot;)
#function used to define the dashboard 
dashboardPage(
  #defines header
  skin = &quot;red&quot;,

#header of the dashboard
  dashboardHeader(
    title=&quot;Inflation Rates&quot; ,
    dropdownMenu()
  ),
#defines sidebar of the dashboard
  dashboardSidebar(
    sidebarMenu(
     #the sidebar menu items
      menuItem(&quot;Dashboard&quot;, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),
      menuItem(&quot;About&quot;, tabName = &quot;about&quot;, icon = icon(&quot;th&quot;)),
      menuItem(&quot;Trade Unions&quot;,tabName=&quot;unions&quot;,icon=icon(&quot;signal&quot;)),
menuItem(&quot;World&quot;,tabName=&quot;world&quot;,icon=icon(&quot;globe&quot;))      
)),
#defines the body of the dashboard
dashboardBody(
#to add external CSS
tags$head(
  tags$link(rel = &quot;stylesheet&quot;, type = &quot;text/css&quot;, href = &quot;custom.css&quot;)
 ),
tabItems(
#First TAB Menu-dashboard- first argument should be the 'tabName' value of the menuItem function  
tabItem(tabName = &quot;dashboard&quot;,
fluidRow(
       column(12,
#box() is similar to a 'div' element in HTML
  box(
     selectInput(&quot;country&quot;,label=&quot;Select Country&quot;,choices=country), width = 12)# end box 
),#end column
#box for plotting the time series plot
 column(12,
     box(
#below function is used to define a highcharter output plot which will be made in the server side
highchartOutput(&quot;hcontainer&quot;),
          width=&quot;12&quot;) #end box2
          ), #end column
br(), #line break
h4(&quot;Relative inflation rates time series plot&quot;,align=&quot;center&quot;),
   br(),
   column(12,
   box(highchartOutput(&quot;hc2&quot;),width=12))
),#end row
h4(&quot;Made with love from&quot;, strong(&quot;Anish Singh Walia&quot;)),
  a(&quot;R code for this project&quot;,target=&quot;_blank&quot;,href=&quot;https://github.com/anishsingh20/Analzying-Inflation-Rates-Worldwide&quot;)
),
#second tab menu- ABOUT
tabItem(tabName=&quot;about&quot;,
 h2(&quot;What is Inflation ?&quot;,style=&quot;text-align:center&quot;),
                    br(),
                    br(),
                    box(width=12,height=&quot;400px&quot;,
                        p(style=&quot;font-size:20px&quot;,strong(&quot;Inflation&quot;),&quot;rates are the general rate at which price of the goods and services within a particular economy are rising and the purchasing power of the currency is declining due to the higher priced goods. High inflation is definitely not good for an economy because it will always reduce the value for money.In general central banks of an economy tries to and work towards reducing the inflation rate and avoiding deflation.&quot;),
                          
p(style=&quot;font-size:20px&quot;,strong(&quot;Deflation&quot;), &quot;is opposite of inflation. Deflation occurs when the inflation rates become negative or are below 0. Deflation is more harmful and dangerous for an economy because it means that the prices of goods and services are going to decrease. Now, this sounds amazing for consumers like us. But what actually happens is that the demand for goods and services have declined over a long term of time. 
This directly indicates that a recession is on its way. This brings job losses, declining wages and a big hit to the stock portfolio. Deflation slows economy's growth. As prices fall, people defer(postpone) purchases in hope of a better lower price deal. Due to this companies and firms have to cut down the cost of their goods and products which directly affects the wages of the employees which have to be lowered.&quot;)
  )
    ),
tabItem(tabName = &quot;unions&quot;, h3(&quot;Time series of Inflation rates of Economic trade unions&quot;,align=&quot;center&quot;) ,
 fluidRow(
       column(12,
       box(selectInput(&quot;region&quot;,label=&quot;Select Economic Region&quot;,choices=unions),width = 12) 
       ),
 box(highchartOutput(&quot;hc3&quot;), width=12)
   )# end row 
   ),
tabItem(tabName = &quot;world&quot;,
      h3(&quot;World's Inflation Rates&quot;,align=&quot;center&quot;) ,
   box(highchartOutput(&quot;hc4&quot;), width=12)
   )
    )#end tabitems
 )#end body

)#end dashboard
</pre>
<p>Now, in the above code one can notice that the various functions which are used to design the UI are actually similar to the HTML elements. But in R <code>shiny</code> allows us to use those like functions and the HTML attributes as the function arguments. It’s hard to explain everything in the above code, but I insist the readers to check the documentation and help files of the above functions and go and check out the links to various resources which I will add at the end.</p>
<p>The <code>highchartOutput(id)</code> function which takes the ‘id’ as an argument which is used to define a high charter plot which will be developed and plotted at the server side. Here we only design and define the UI and layout of the dashboard. </p>
<h2>Let’s write the Server logic</h2>
<p>All the server-side code would be in a separate file named <code>server.R</code>. In the server side, it would only contain the logic to reactively and dynamically plot the various plots.</p>
<p>The inflation rates dataset is downloaded from IMF(International Monetary Fund) website and is publically available. I first had to do some preprocessing and transformations using the <code>tidyr</code> and <code>dplyr</code> packages to convert the dataset to the desired format.</p>
<pre>
require(shinydashboard)
require(ggplot2)
require(dplyr)
require(highcharter) #to plot amazing time series plots
library(readxl)
require(tidyr)
#loading the dataset
inflation &lt;- read_excel(&quot;inflation.xls&quot;)
year&lt;-c(1980:2022) #making a vector consisting of all years
year&lt;-as.character(year)#converting to character type to use in gather()

#converting dataset to a long format
inf% gather(year,key = &quot;Year&quot;,value=&quot;InflationRate&quot;)
inf&lt;-na.omit(inf) #omitting NA values
names(inf)&lt;-c(&quot;region&quot;,&quot;year&quot;,&quot;inflation&quot;)
inf$year&lt;-as.integer(inf$year)
India&lt;-filter(inf,region==&quot;India&quot;)
India$inflation&lt;-as.numeric(India$inflation)
India$year&lt;-as.numeric(India$year)
China&lt;-filter(inf,region==&quot;China, People's Republic of&quot;)
Ger&lt;-filter(inf,region==&quot;Germany&quot;)
Japan&lt;-filter(inf,region==&quot;Japan&quot;)
US&lt;-filter(inf,region==&quot;United States&quot;)
EU&lt;-filter(inf,region==&quot;European Union&quot;)
UK&lt;-filter(inf,region==&quot;United Kingdom&quot;)
Fr&lt;-filter(inf,region==&quot;France&quot;)
uae&lt;-filter(inf,region==&quot;United Arab Emirates&quot;)

#server function and logic
server &lt;- function(input, output) { 
 output$hcontainer &lt;- renderHighchart ({
  #write all R-code inside this
 df% filter(region==input$country)#making is the dataframe of the country
 #above input$country is used to extract the select input value from the UI and then make 
 #a dataframe based on the selected input
 df$inflation&lt;-as.numeric(df$inflation)
 df$year%
  hc_exporting(enabled = TRUE) %>% #to enable downloading the plot image
  hc_tooltip(crosshairs = TRUE, backgroundColor = &quot;#FCFFC5&quot;,
  shared = TRUE, borderWidth = 2) %>% #designing the hoverable tooltil
  hc_title(text=&quot;Time series plot of Inflation Rates&quot;,align=&quot;center&quot;) %>% #title
        hc_subtitle(text=&quot;Data Source: IMF&quot;,align=&quot;center&quot;) %>% #subtile of the plot
        hc_add_theme(hc_theme_elementary())  #adding theme
             #to add 3-d effects
                  #hc_chart(type = &quot;column&quot;,
                           #options3d = list(enabled = TRUE, beta = 15, alpha = 15))
    }) # end hcontainer

output$hc2% 
        hc_xAxis(categories=inf$year) %>% 
        hc_add_series(name = &quot;India&quot;, data = India$inflation) %>% 
        hc_add_series(name = &quot;USA&quot;, data = US$inflation) %>%
        hc_add_series(name = &quot;UK&quot;, data = UK$inflation) %>%
        hc_add_series(name = &quot;China&quot;, data = China$inflation) %>%
        hc_add_series(name = &quot;Germany&quot;, data = Ger$inflation) %>%
        hc_add_series(name=&quot;Japan&quot;,data=Japan$inflation) %>%
        #to add colors
        hc_colors(c(&quot;red&quot;,&quot;blue&quot;,&quot;green&quot;,&quot;purple&quot;,&quot;darkpink&quot;,&quot;orange&quot;)) %>%
        hc_add_theme(hc_theme_elementary())
}) # end hc2
    
output$hc3&lt;-renderHighchart({
      union% filter(region==input$region)
      union$year&lt;-as.numeric(union$year)
      union$inflation%
        hc_exporting(enabled = TRUE) %>% 
        hc_tooltip(crosshairs = TRUE, backgroundColor = &quot;#FCFFC5&quot;,
                   shared = TRUE, borderWidth = 2) %>%
        hc_title(text=&quot;Time series plot of Inflation Rates for Economic Unions&quot;,align=&quot;center&quot;) %>%
        hc_subtitle(text=&quot;Data Source: IMF&quot;,align=&quot;center&quot;) %>%
        hc_add_theme(hc_theme_elementary())
}) #end hc3

    output$hc4&lt;-renderHighchart({
      world% filter(region==&quot;World&quot;)
      world$year&lt;-as.numeric(world$year)
      world$inflation%
        hc_exporting(enabled = TRUE) %>% 
        hc_tooltip(crosshairs = TRUE, backgroundColor = &quot;#FCFFC5&quot;,
                   shared = TRUE, borderWidth = 2) %>%
        hc_title(text=&quot;Time series plot of Inflation Rates for World&quot;,align=&quot;center&quot;) %>%
        hc_subtitle(text=&quot;Data Source: IMF&quot;,align=&quot;center&quot;) %>%
         hc_add_theme(hc_theme_elementary())
      
    }) #end hc4
 }
</pre>
<p>In the above code we access the plot defined in the UI using their id in the form <code>output$id</code>. We use the function <code>renderHighchart({ #write all R code and logic })</code> to render the plots and write all the R-code to develop any output inside it.v Inside this function as you all can notice is simply the R code to make plots.</p>
<p>Now the function <code>hchart(df,type,hcaes(x,y)...)</code> works in the same fashion as <code>qplot</code>. It takes data, type of plot, plot asthetics as its arguments. Rest things such as title, subtitle etc are piped to it like we piped extra things and plotting characteristics in <code>ggplot</code>. For more details read this <b><a rel="nofollow" href="http://jkunst.com/highcharter/hchart.html" target="_blank">http://jkunst.com/highcharter/hchart.html </a></b></p>
<p>Screenshots of the Dashboard:<br>
<a rel="nofollow" href="https://i1.wp.com/datascienceplus.com/wp-content/uploads/2017/10/shinnyapp.png?ssl=1" target="_blank"><img sizes="(max-width: 289px) 100vw, 289px" src="https://i1.wp.com/datascienceplus.com/wp-content/uploads/2017/10/shinnyapp-289x490.png?resize=289%2C490&ssl=1" alt="" class="wp-image-9213" data-recalc-dims="1"></a></p>
<p>Now deploying a shiny app is just a matter of minutes. You just need to have an account on shinyapps.io and it offers infrastructure as a service(IaaS) to run and manage you application. You can deploy you app directly from your Rstudio IDE.</p>
<h2>Conclusion</h2>
<p>This was just a short tutorial on how to make a dashboard in R and use <code>shinydashboard</code> and <code>highcharter</code> package in R. This article is not aimed to explain everything in detail,rather just demonstrate the use of <code>shinydashboard</code> and <code>highcharter</code> in R to build awesome dashboards and web apps.I will attach various resources below to help out with learning to develop web apps in R and which helped me out too.</p>
<p><b>Resources</b></p>
<ul>1) <a rel="nofollow" href="https://anishsingh.shinyapps.io/Inflation-Rates/" target="_blank">Shiny App developed by Anish</a><br>
2) <a rel="nofollow" href="https://github.com/anishsingh20/Analzying-Inflation-Rates-Worldwide" target="_blank">Github of this project</a><br>
3) <a rel="nofollow" href="https://shiny.rstudio.com/tutorial/" target="_blank">RStudio Shiny Tutorial</a><br>
4) <a rel="nofollow" href="https://datascienceplus.com/wp-content/uploads/2017/10/How-to-start-with-ShinyR.pdf" target="_blank">RStudio Shiny Cheatsheet</a><br>
5) <a rel="nofollow" href="https://shiny.rstudio.com/deploy/" target="_blank">Deploying a shiny app by RStudio</a><br>
6) <a rel="nofollow" href="http://jkunst.com/highcharter/docs/index.html" target="_blank">Documentation of highcharter package</a></ul>
<p>Hope this article is motivating enough to at least get you started with learning and developing your own web apps in R and start using <code>highcharter</code> in R to visualize data. For any doubt or queries feel free to drop a comment. I will be happy to help. Do like and share the article.<br>
Happy coding!</p>
<ul></ul>
<p><strong>
<p>Related Post</p>
<p></p></strong>
<ol>
<li><a rel="nofollow" href="https://datascienceplus.com/time-series-analysis-in-r-part-2-time-series-transformations/" title="Permanent Link toTime Series Analysis in R Part 2: Time Series Transformations" target="_blank">Time Series Analysis in R Part 2: Time Series Transformations</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/time-series-analysis-in-r-part-1-the-time-series-object/" title="Permanent Link toTime Series Analysis in R Part 1: The Time Series Object" target="_blank">Time Series Analysis in R Part 1: The Time Series Object</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/parsing-text-for-emotion-terms-analysis-visualization-using-r/" title="Permanent Link toParsing Text for Emotion Terms: Analysis &amp; Visualization Using R" target="_blank">Parsing Text for Emotion Terms: Analysis &amp; Visualization Using R</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/using-mongodb-with-r/" title="Permanent Link toUsing MongoDB with R" target="_blank">Using MongoDB with R</a></li>
<li><a rel="nofollow" href="https://datascienceplus.com/finding-optimal-number-of-clusters/" title="Permanent Link toFinding Optimal Number of Clusters" target="_blank">Finding Optimal Number of Clusters</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/making-a-shiny-dashboard-using-highcharter-analyzing-inflation-rates/"> 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/gh0nifeJYnU" height="1"></a></div>