morris.js/Interactive version of charts.PerformanceSummary()

[hmaeda]

This is a cross post from SO...this link.

I would like to create an interactive version of charts.PerformanceSummary() using rCharts.

This is my attempt so far...but am struggling to put it all together....

# Load xts and PerformanceAnalytics package
require(xts)
require(PerformanceAnalytics)
# Generate rtns data
set.seed(123)
X.stock.rtns <- xts(rnorm(1000,0.00001,0.0003), Sys.Date()-(1000:1))  
Y.stock.rtns <- xts(rnorm(1000,0.00003,0.0004), Sys.Date()-(1000:1))
Z.stock.rtns <- xts(rnorm(1000,0.00005,0.0005), Sys.Date()-(1000:1))
rtn.obj <- merge(X.stock.rtns , Y.stock.rtns, Z.stock.rtns)
colnames(rtn.obj) <- c("x.stock.rtns","y.stock.rtns","z.stock.rtns")

# The below output is what we are aiming for
charts.PerformanceSummary(rtn.obj,lwd=1,main="Performance of stocks x,y and z")

# So this is what I have tried to do to replicate the data and try and generate graphs

# custom function to convert xts to data.frame
xts.2.df <- function(xts.obj){
   df <- ggplot2:::fortify(xts.obj)
   df[,1] <- as.character(df[,1])
   df
}

# calculating the data for the top and bottom graph
cum.rtn <- do.call(merge,lapply(seq(ncol(rtn.obj)),function(y){cumprod(rtn.obj[,y]+1)-1}))
dd.rtn <- do.call(merge,lapply(seq(ncol(rtn.obj)),function(y){Drawdowns(rtn.obj[,y])}))

# Loading rCharts package
require(devtools)
install_github('rCharts', 'ramnathv',ref='dev')
require(rCharts)
# creating the first cumulative return graph
m1 <- mPlot(x = "Index", y = c("x.stock.rtns","y.stock.rtns","z.stock.rtns"), type = "Line", data = xts.2.df(cum.rtn),
             pointSize = 0, lineWidth = 1)
# Top cumulative return graph
m1

# Creating the individual bar graphs that are to be shown when one line is hovered over
m.x <- mPlot(x = "Index", y = c("x.stock.rtns"), type="Bar",data = xts.2.df(rtn.obj))
m.y <- mPlot(x = "Index", y = c("y.stock.rtns"), type="Bar",data = xts.2.df(rtn.obj))
m.z <- mPlot(x = "Index", y = c("z.stock.rtns"), type="Bar",data = xts.2.df(rtn.obj))

# Creating the drawdown graph
m2 <- mPlot(x = "Index", y = c("x.stock.rtns","y.stock.rtns","z.stock.rtns"), type = "Line", data = xts.2.df(dd.rtn),
            pointSize = 0, lineWidth = 1)
m2

So there are few parts to the question:

• [ ] 1. How do you put three morris.js charts together so that they are linked?
• [ ] 2. Can you make bold the line that is being hovered over in the top graph (m1)?
• [ ] 3. How do you get the middle one (i.e. one of m.x, m.y, m.z)to change according to what's been hovered over, i.e if hovering over stock z, then stock z's returns (m.z) show up un the middle?
• [ ] 4. Can you get it to make bold in the bottom graph, the same asset that is being made bold in the top graph?
• [ ] 5. Can you change the information that is being displayed to in the floating box to display some stats about the asset being hovered over?
• [ ] 6. How do you add axes labels?
• [ ] 7. How do you add an overall title?
• [ ] 8. BONUS: How do you integrate crossfilter.js into it so that a subset of time can be chosen...and all graphs get re-drawn?

Even if you can't answer all parts any help/comments/answers would be appreciated...

[ramnathv]

Some quick answers to your questions.

1. Linking multiple charts using crossfilter.js is challenging. It is on my radar, but I have no idea whether or not I will be successful.
2. MorrisJS has a pretty simple API. You can set any parameters described in their API from rCharts using m2$set(arg = value).

I will post a more detailed answer to your questions, when I get time, but this should get you started.

[ramnathv]

Looking further, I think rickshaw has features that you are asking for and might suit this application better. I will look into how you can leverage rickshaw using rCharts.

[timelyportfolio]

I can probably field many of these unless you are just looking for something else to do.

[ramnathv]

@timelyportfolio I think you are better suited to field many of these in any case :-), as you have created more time series charts than most others. So go ahead and answer them if you have time.

[timelyportfolio]

before I start banging away, @hmaeda was there any reason you wanted morris.js?

[hmaeda]

@timelyportfolio , nope...if you want to use rickshaw as @ramnathv has suggested...then i am happy with that too...i just saw that morris.js was originally designed for timeseries so thats why i went with that, but if rickshaw is more powerful then use feel free to use that....

[vashts85]

Any feedback on this?

[hmaeda]

No reason fro morris.js ...but it seemed the easiest to work with...but am open to any solution to my problem...

On Wed, Apr 8, 2015 at 9:17 PM, vashts85 notifications@github.com wrote:

Any feedback on this?

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/rCharts/issues/250#issuecomment-91024322.