---
title: "Stocks Price Dashboard of 5 Tech Companies"
Author: "Jiaoyuan Huang, Meng Zhang"
output:
flexdashboard::flex_dashboard:
orientation: rows
social: menu
source_code: embed
---
```{r setup, include=FALSE}
library(quantmod)
library(flexdashboard)
library(dygraphs)
library(xts)
library(tidyverse)
library(TTR)
library(DT)
yahooTickerSymbols = c("TWTR", "FB", "COF", "NFLX", "TSLA")
oneYear = Sys.Date() - 365
getSymbols(yahooTickerSymbols, src = 'yahoo', auto.assign = TRUE, warnings = FALSE, from = oneYear)
tickers = c("TWTR", "FB", "COF", "NFLX", "TSLA")
colnames(TWTR) = c("Open", "High", "Low", "Close", "Volume.in.Million", "Adjusted")
colnames(FB) = c("Open", "High", "Low", "Close", "Volume.in.Million", "Adjusted")
colnames(COF) = c("Open", "High", "Low", "Close", "Volume.in.Million", "Adjusted")
colnames(NFLX) = c("Open", "High", "Low", "Close", "Volume.in.Million", "Adjusted")
colnames(TSLA) = c("Open", "High", "Low", "Close", "Volume.in.Million", "Adjusted")
TWTR$`Volume.in.Million` = TWTR$`Volume.in.Million`/1000000
FB$`Volume.in.Million` = FB$`Volume.in.Million`/1000000
COF$`Volume.in.Million` = COF$`Volume.in.Million`/1000000
NFLX$`Volume.in.Million` = NFLX$`Volume.in.Million`/1000000
TSLA$`Volume.in.Million` = TSLA$`Volume.in.Million`/1000000
TWTR = cbind(TWTR[,-5],TWTR[,5])
FB = cbind(FB[,-5],FB[,5])
COF = cbind(COF[,-5],COF[,5])
NFLX = cbind(NFLX[,-5],NFLX[,5])
TSLA = cbind(TSLA[,-5],TSLA[,5])
# get combined data
openPrice = do.call(merge, lapply(tickers, function(x) Op(get(x))))
closePrice = do.call(merge, lapply(tickers, function(x) Cl(get(x))))
lowPrice = do.call(merge, lapply(tickers, function(x) Lo(get(x))))
highPrice = do.call(merge, lapply(tickers, function(x) Hi(get(x))))
volume = do.call(merge, lapply(tickers, function(x) Vo(get(x))))
openClosePercentageChange = do.call(merge, lapply(tickers, function(x) OpCl(get(x))*100))
closeClosePercentageChange = do.call(merge, lapply(tickers, function(x) ClCl(get(x))*100))
closeClosePercentageChange = closeClosePercentageChange[-1,]
colnames(openPrice) = tickers
colnames(closePrice) = tickers
colnames(lowPrice) = tickers
colnames(highPrice) = tickers
colnames(volume) = tickers
colnames(openClosePercentageChange) = tickers
colnames(closeClosePercentageChange) = tickers
mov.avgs<-function(stock.close){
x<-data.frame(stock.close, SMA(stock.close, 50), SMA(stock.close, 25))
colnames(x)<-c(names(stock.close), 'sma_50','sma_25')
#x<-x[complete.cases(x$sma_50),]
return(x)
}
closePriceWithMA<-lapply(closePrice, mov.avgs)
buyOrSell <- "function(rawData) {
var ribbonData = [];
var sma_50_index = 2;
var sma_25_index = 3;
for (var i = 0; i < rawData.length; i++) {
var row = rawData[i];
var sma_50 = row[sma_50_index];
var sma_25 = row[sma_25_index];
if (sma_50 < sma_25) {
ribbonData.push(1);
} else {
ribbonData.push(0);
}
}
return ribbonData;
}"
TwitterCandleStick = cbind(TWTR[,-6], closePriceWithMA$TWTR$sma_50, closePriceWithMA$TWTR$sma_25)
colnames(TwitterCandleStick)[6] = "sma_50"
colnames(TwitterCandleStick)[7] = "sma_25"
FaceBookCandleStick = cbind(FB[,-6], closePriceWithMA$FB$sma_50, closePriceWithMA$FB$sma_25)
colnames(FaceBookCandleStick)[6] = "sma_50"
colnames(FaceBookCandleStick)[7] = "sma_25"
CapitalOneCandleStick = cbind(COF[,-6], closePriceWithMA$COF$sma_50, closePriceWithMA$COF$sma_25)
colnames(CapitalOneCandleStick)[6] = "sma_50"
colnames(CapitalOneCandleStick)[7] = "sma_25"
NetFlixCandleStick = cbind(NFLX[,-6], closePriceWithMA$NFLX$sma_50, closePriceWithMA$NFLX$sma_25)
colnames(NetFlixCandleStick)[6] = "sma_50"
colnames(NetFlixCandleStick)[7] = "sma_25"
TeslaCandleStick = cbind(TSLA[,-6], closePriceWithMA$TSLA$sma_50, closePriceWithMA$TSLA$sma_25)
colnames(TeslaCandleStick)[6] = "sma_50"
colnames(TeslaCandleStick)[7] = "sma_25"
Volume = volume[,1:4]
what_metrics <- yahooQF(c("P/E Ratio",
"Price/EPS Estimate Next Year",
"200-day Moving Average",
"Market Capitalization",
"Percent Change From 200-day Moving Average",
"52-week High",
"52-week Low"
))
tickers <- c("TWTR", "FB","COF", "NFLX","TSLA")
metrics <- getQuote(paste(tickers, sep="", collapse=";"),what=what_metrics)
metrics = data.frame(metrics)
metrics = metrics[,-1]
metrics$Market.Capitalization = metrics$Market.Cap/1000000000
metrics$Market.Capitalization = round(metrics$Market.Cap, digits = 2)
colnames(metrics) = c("PE.Ratio", "EPS.Estimate.Next.Year", "Market.Cap.In.Billions",
"200.Day.MA", "Percentage.Change.From.200.Day.MA", "52.Week.High", "52.Week.Low")
closePrice.df = data.frame(closePrice)
endIndex = length(closePrice.df$TWTR)
Twitter_KPI = round((closePrice.df$TWTR[endIndex] - closePrice.df$TWTR[1])*100/closePrice.df$TWTR[1], digits = 2)
FaceBook_KPI = round((closePrice.df$FB[endIndex] - closePrice.df$FB[1])*100/closePrice.df$FB[1], digits = 2)
CapitalOne_KPI = round((closePrice.df$COF[endIndex] - closePrice.df$COF[1])*100/closePrice.df$COF[1], digits = 2)
Netflix_KPI = round((closePrice.df$NFLX[endIndex] - closePrice.df$NFLX[1])*100/closePrice.df$NFLX[1], digits = 2)
Tesla_KPI = round((closePrice.df$TSLA[endIndex] - closePrice.df$TSLA[1])*100/closePrice.df$TSLA[1], digits = 2)
get.color = function(metric){
retColor = ""
if (metric > 100) {
retColor = "success"
}else if (metric > 50) {
retColor = "primary"
}else if (metric <= 50 & metric > 25) {
retColor = "warning"
}else {
retColor = "danger"
}
return(retColor)
}
get.icon = function(metric){
retIcon = ""
if (metric >= 100) {
retIcon = "fa-battery-full"
}else if (75 >= metric & metric > 50){
retIcon = "fa-battery-three-quarters"
}else if (50 >= metric & metric > 25){
retIcon = "fa-battery-half"
}else if (25 >= metric & metric > 0){
retIcon = "fa-battery-quarter"
}else{
retIcon = "fa-battery-empty"
}
return(retIcon)
}
convert.kpis = function(vector){
vectorString = c()
for (i in 1: length(vector)){
if (vector[i] > 0){
vectorString[i] = paste("+", toString(vector[i]), "%", sep = "")
}else{
vectorString[i] = paste("-", toString(vector[i]), "%", sep = "")
}
}
return(vectorString)
}
KPIS = c(Twitter_KPI, FaceBook_KPI, CapitalOne_KPI, Netflix_KPI, Tesla_KPI)
StringKPIS = convert.kpis(KPIS)
```
Candlestick Charts and KPI's {data-orientation=rows}
==========================================================================
Sidebar {.sidebar}
-----------------------------------------------------------------------
### Tech Company Stocks Analysis
This dashboard looks into the stock prices of 5 companies : Twitter (TWTR), FaceBook (FB), CapitalOne (COF),Netflix (NFLX) and Tesla (TSLA) over a period of 1 year. They are all popular tech company but in different industries. We also did some comparisons to help protfolio management.
Row {data-height=200}
-----------------------------------------------------------------------
### FaceBook
```{r}
valueBox(value = StringKPIS[2],
icon = get.icon(FaceBook_KPI),
color = get.color(FaceBook_KPI))
```
### Twitter
```{r}
valueBox(value = StringKPIS[1],
icon = get.icon(Twitter_KPI),
color = get.color(Twitter_KPI))
```
### Capital One
```{r}
valueBox(value = StringKPIS[3],
icon = get.icon(CapitalOne_KPI),
color = get.color(CapitalOne_KPI))
```
### NetFlix
```{r}
valueBox(value = StringKPIS[4],
icon = get.icon(Netflix_KPI),
color = get.color(Netflix_KPI))
```
### Tesla
```{r}
valueBox(value = StringKPIS[5],
icon = get.icon(Tesla_KPI),
color = get.color(Tesla_KPI))
```
Row {.tabset .tabset-fade}
-----------------------------------------------------------------------
### Twitter Stock price - TWTR
```{r}
dygraph(TwitterCandleStick, main = "Twitter") %>%
dyUnzoom() %>%
dyAxis("y", label="Price") %>%
dyCandlestick() %>%
dyOptions(colors= c(RColorBrewer::brewer.pal(5, "Set2"), "red", "blue")) %>%
dyHighlight(highlightCircleSize = 2, highlightSeriesOpts = list(strokeWidth = 2)) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
### FaceBook Stock Price - FB
```{r}
dygraph(FaceBookCandleStick, main = "FaceBook") %>%
dyUnzoom() %>%
dyCandlestick() %>%
dyAxis("y", label="Price") %>%
dyOptions(colors= c(RColorBrewer::brewer.pal(5, "Set2"), "red", "blue")) %>%
dyHighlight(highlightCircleSize = 2, highlightSeriesOpts = list(strokeWidth = 2)) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
### Capital One Stock Price - COF
```{r}
dygraph(CapitalOneCandleStick, main = "Capital One") %>%
dyUnzoom() %>%
dyCandlestick() %>%
dyAxis("y", label="Price") %>%
dyOptions(colors= c(RColorBrewer::brewer.pal(5, "Set2"), "red", "blue")) %>%
dyHighlight(highlightCircleSize = 2, highlightSeriesOpts = list(strokeWidth = 2)) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
### Netflix Stock Price - NFLX
```{r}
dygraph(NetFlixCandleStick, main = "NetFlix") %>%
dyUnzoom() %>%
dyCandlestick() %>%
dyAxis("y", label="Price") %>%
dyOptions(colors= c(RColorBrewer::brewer.pal(5, "Set2"), "red", "blue")) %>%
dyHighlight(highlightCircleSize = 2, highlightSeriesOpts = list(strokeWidth = 2)) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
### Tesla Stock Price - TSLA
```{r}
dygraph(TeslaCandleStick, main = "Tesla") %>%
dyUnzoom() %>%
dyCandlestick() %>%
dyOptions(colors= c(RColorBrewer::brewer.pal(5, "Set2"), "red", "blue")) %>%
dyHighlight(highlightCircleSize = 2, highlightSeriesOpts = list(strokeWidth = 2)) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
Row {data-height=400}
-----------------------------------------------------------------------
### Metrics
```{r}
datatable(metrics) %>%
formatStyle(
'Market.Cap.In.Billions',
background = styleColorBar(metrics$Market.Cap.In.Billions, 'lightpink'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center'
) %>%
formatStyle(
'Percentage.Change.From.200.Day.MA',
background = styleColorBar(metrics$Percentage.Change.From.200.Day.MA, 'lightblue'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = "center"
) %>%
formatStyle(
'EPS.Estimate.Next.Year',
background = styleColorBar(metrics$EPS.Estimate.Next.Year, 'lightgreen'),
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center'
)
```
Comparison Charts {data-orientation=columns}
==========================================================================
Sidebar {.sidebar}
-----------------------------------------------------------------------
### Comparison Graphs
Here we compare the closing prices, % change in stock price over time, stock volume per day, % change in stock price in a single trading day.
Column {data-width=400}
------------------------------------------------------------------------------
### Closing Prices
```{r}
dygraph(closePrice[,1:4], main = "Closing Price") %>%
dyUnzoom() %>%
dyAxis("y", label="Price in $") %>%
dyOptions(colors = RColorBrewer::brewer.pal(6, "Set2")) %>%
dyHighlight(highlightSeriesOpts = list(strokeWidth = 3)) %>%
dyRangeSelector(height = 25)
```
### Percent Change Comparison
```{r}
dygraph(closePrice, main = "% Change in Price") %>%
dyUnzoom() %>%
dyRebase(percent = TRUE) %>%
dyOptions(colors = RColorBrewer::brewer.pal(6, "Set2")) %>%
dyHighlight(highlightSeriesOpts = list(strokeWidth = 3)) %>%
dyRangeSelector(height = 25)
```
Column {data-width=400}
-------------------------------------
### Volume comparison
```{r}
dygraph(Volume, main = "Volume") %>%
dyUnzoom() %>%
dyAxis("y", label="Stock Volume in Millions") %>%
dyStackedRibbonGroup(name = c("TWTR", "FB", "COF", "NFLX")) %>%
dyOptions(colors= RColorBrewer::brewer.pal(4, "Set2")) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
### Intra Day % Change comparison
```{r}
dygraph(openClosePercentageChange, main = "Percentage Change From Open to Close") %>%
dyUnzoom() %>%
dyAxis("y", label="Intraday % Change") %>%
dyGroup(c("FB", "TWTR"), color = c("red", "black"), strokeWidth = 2, fillGraph = FALSE)%>%
dyGroup(c("COF", "TSLA", "NFLX"), color = RColorBrewer::brewer.pal(4, "Set2"), strokeWidth = 1, fillGraph = "TRUE") %>%
dyOptions(stepPlot = FALSE, fillAlpha = 0.2) %>%
dyRangeSelector(height = 25) %>%
dyLegend(show = "onmouseover")
```
Moving Average Buy/Sell Time Charts {data-orientation=columns}
==========================================================================
Sidebar {.sidebar}
-----------------------------------------------------------------------
### Moving Average based buy/sell signals
In this dashboard we look at the 50-day simple moving average (sma 50) and 25-day simple moving average (sma 25) of the stock prices. If (sma 25) > (sma 50), then we shade the graph "green", indicating a buy/hold signal based on current trend. If (sma 25) <= (sma 50), then we shade the graph "red", indicating a sell signal. Since Twitter and FaceBook are in the same industry, we only pick FaceBook in this dashboard to do the comparison.
Column {data-width=400}
------------------------------------------------------------------------------
### Tesla
```{r}
dygraph(closePriceWithMA$TSLA,main = 'Tesla Moving Averages') %>%
dyUnzoom() %>%
dySeries('TSLA', label = 'closing price') %>%
dySeries('sma_25', label = 'sma 25') %>%
dySeries('sma_50', label = 'sma 50') %>%
dyOptions(colors = c("black", "green", "red")) %>%
dyRibbon(parser = buyOrSell,
palette = c('#CCEBD6', '#FFE6E6')) %>%
dyRangeSelector(height = 25)
```
### FaceBook
```{r}
dygraph(closePriceWithMA$FB,main = 'FaceBook Moving Averages') %>%
dyUnzoom() %>%
dySeries('FB', label = 'closing price') %>%
dySeries('sma_25', label = 'sma 25') %>%
dySeries('sma_50', label = 'sma 50') %>%
dyOptions(colors = c("black", "green", "red")) %>%
dyRibbon(parser = buyOrSell,
palette = c('#CCEBD6', '#FFE6E6')) %>%
dyRangeSelector(height = 25)
```
Column {data-width=400}
------------------------------------------------------------------------------
### Capital One
```{r}
dygraph(closePriceWithMA$COF,main = 'Capital One Moving Averages') %>%
dyUnzoom() %>%
dySeries('COF', label = 'closing price') %>%
dySeries('sma_25', label = 'sma 25') %>%
dySeries('sma_50', label = 'sma 50') %>%
dyOptions(colors = c("black", "green", "red")) %>%
dyRibbon(parser = buyOrSell,
palette = c('#CCEBD6', '#FFE6E6')) %>%
dyRangeSelector(height = 25)
```
### Netflix
```{r}
dygraph(closePriceWithMA$NFLX, main = 'Netflix Moving Averages') %>%
dyUnzoom() %>%
dySeries('NFLX', label = 'closing price') %>%
dySeries('sma_25', label = 'sma 25') %>%
dySeries('sma_50', label = 'sma 50') %>%
dyOptions(colors = c("black", "green", "red")) %>%
dyRibbon(parser = buyOrSell,
palette = c('#CCEBD6', '#FFE6E6')) %>%
dyRangeSelector(height = 25)
```