block by timelyportfolio 5987883

d3 horizon with axis from rCharts

Full Screen

index.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="//twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="//aozora.github.io/bootplus/assets/css/docs.css">
    
    <script src='//d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='//timelyportfolio.github.io/rCharts_d3_horizon/libraries/widgets/d3_horizon/js/horizon.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block
      margin: auto auto;
      width: 100%;
      height: 400px;
    }
    /*
    body {
      margin-top: 60px;
    }
    */
    </style>
    
  </head>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='span8'>
          <div class="bs-docs-example">
            <div id='chart8682cb0b4b' class='rChart nvd3Plot d3_horizon'></div>
          <br/>
<pre><code class='r'>require(rCharts)

rChart &lt;- rCharts$new()
rChart$setLib('libraries/widgets/d3_horizon')
rChart$setTemplate(script = &quot;libraries/widgets/d3_horizon/layouts/d3_horizon_axes.html&quot;)

rChart$set(
  bands = 3,
  mode = &quot;mirror&quot;,
  interpolate = &quot;basis&quot;,
  width = 700,
  height = 300
)

require(quantmod)
#get sp500 prices and convert them to monthly
SP500 &lt;- to.monthly(
  getSymbols(&quot;^GSPC&quot;, from = &quot;1990-01-01&quot;, auto.assign = FALSE)
)

#get 12 month rolling return
SP500.ret &lt;- na.omit(ROC(SP500[,4], type = &quot;discrete&quot;, n = 12))
SP500.df &lt;- cbind(
  as.numeric(as.POSIXct(as.Date(index(SP500.ret)))),
  coredata(SP500.ret)
)

colnames(SP500.df) &lt;- c(&quot;date&quot;,&quot;SP500&quot;)

#supply the data to our dataless but no longer naked rChart

rChart$set(data = SP500.df)
rChart$set(x = &quot;date&quot;, y = &quot;SP500&quot;)
rChart
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <!--Attribution:
Jason Davies https://github.com/d3/d3-plugins/tree/master/horizon
Mike Bostock //bl.ocks.org/mbostock/1483226
-->

<style>
.axis .tick line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
}
.y path, .x path {
    stroke-width: 0;
    fill-opacity: 0;
}
</style>

<script>
var params = {
 "dom": "chart8682cb0b4b",
"width":    700,
"height":    300,
"bands":      3,
"mode": "mirror",
"interpolate": "basis",
"data": [ {
 "date": 6.6269e+08,
"SP500": 0.045126 
},
{
 "date": 6.6537e+08,
"SP500":  0.106 
},
{
 "date": 6.6779e+08,
"SP500": 0.10378 
},
{
 "date": 6.7046e+08,
"SP500": 0.13464 
},
{
 "date": 6.7306e+08,
"SP500": 0.079174 
},
{
 "date": 6.7573e+08,
"SP500": 0.036702 
},
{
 "date": 6.7833e+08,
"SP500": 0.088895 
},
{
 "date": 6.81e+08,
"SP500": 0.22591 
},
{
 "date": 6.8368e+08,
"SP500": 0.26731 
},
{
 "date": 6.8628e+08,
"SP500": 0.29095 
},
{
 "date": 6.8895e+08,
"SP500": 0.16448 
},
{
 "date": 6.9155e+08,
"SP500": 0.26307 
},
{
 "date": 6.9422e+08,
"SP500": 0.18856 
},
{
 "date": 6.969e+08,
"SP500": 0.12431 
},
{
 "date": 6.9941e+08,
"SP500": 0.075875 
},
{
 "date": 7.0209e+08,
"SP500": 0.10553 
},
{
 "date": 7.0468e+08,
"SP500": 0.065464 
},
{
 "date": 7.0736e+08,
"SP500": 0.099634 
},
{
 "date": 7.0995e+08,
"SP500": 0.09386 
},
{
 "date": 7.1263e+08,
"SP500": 0.047037 
},
{
 "date": 7.1531e+08,
"SP500": 0.077193 
},
{
 "date": 7.179e+08,
"SP500": 0.066837 
},
{
 "date": 7.2058e+08,
"SP500": 0.14959 
},
{
 "date": 7.2317e+08,
"SP500": 0.044643 
},
{
 "date": 7.2585e+08,
"SP500": 0.073389 
},
{
 "date": 7.2852e+08,
"SP500": 0.07434 
},
{
 "date": 7.3094e+08,
"SP500": 0.11885 
},
{
 "date": 7.3362e+08,
"SP500": 0.060827 
},
{
 "date": 7.3621e+08,
"SP500": 0.083881 
},
{
 "date": 7.3889e+08,
"SP500": 0.10386 
},
{
 "date": 7.4148e+08,
"SP500": 0.056387 
},
{
 "date": 7.4416e+08,
"SP500": 0.11963 
},
{
 "date": 7.4684e+08,
"SP500": 0.098444 
},
{
 "date": 7.4943e+08,
"SP500": 0.11739 
},
{
 "date": 7.5211e+08,
"SP500": 0.070569 
},
{
 "date": 7.547e+08,
"SP500": 0.070552 
},
{
 "date": 7.5738e+08,
"SP500": 0.097612 
},
{
 "date": 7.6006e+08,
"SP500": 0.053588 
},
{
 "date": 7.6248e+08,
"SP500": -0.013063 
},
{
 "date": 7.6516e+08,
"SP500": 0.024353 
},
{
 "date": 7.6775e+08,
"SP500": 0.014016 
},
{
 "date": 7.7043e+08,
"SP500": -0.013895 
},
{
 "date": 7.7302e+08,
"SP500": 0.022605 
},
{
 "date": 7.757e+08,
"SP500": 0.025736 
},
{
 "date": 7.7838e+08,
"SP500": 0.0082366 
},
{
 "date": 7.8097e+08,
"SP500": 0.0096616 
},
{
 "date": 7.8365e+08,
"SP500": -0.01754 
},
{
 "date": 7.8624e+08,
"SP500": -0.015393 
},
{
 "date": 7.8892e+08,
"SP500": -0.023235 
},
{
 "date": 7.916e+08,
"SP500": 0.043349 
},
{
 "date": 7.9402e+08,
"SP500": 0.12325 
},
{
 "date": 7.9669e+08,
"SP500": 0.14149 
},
{
 "date": 7.9929e+08,
"SP500": 0.16846 
},
{
 "date": 8.0196e+08,
"SP500": 0.22617 
},
{
 "date": 8.0456e+08,
"SP500": 0.22651 
},
{
 "date": 8.0724e+08,
"SP500": 0.18169 
},
{
 "date": 8.0991e+08,
"SP500": 0.26302 
},
{
 "date": 8.1251e+08,
"SP500": 0.23108 
},
{
 "date": 8.1518e+08,
"SP500": 0.33433 
},
{
 "date": 8.1778e+08,
"SP500": 0.34111 
},
{
 "date": 8.2045e+08,
"SP500": 0.35203 
},
{
 "date": 8.2313e+08,
"SP500":  0.314 
},
{
 "date": 8.2564e+08,
"SP500": 0.28917 
},
{
 "date": 8.2832e+08,
"SP500": 0.27095 
},
{
 "date": 8.3091e+08,
"SP500": 0.25444 
},
{
 "date": 8.3359e+08,
"SP500": 0.23108 
},
{
 "date": 8.3618e+08,
"SP500": 0.13858 
},
{
 "date": 8.3886e+08,
"SP500": 0.16037 
},
{
 "date": 8.4154e+08,
"SP500": 0.17611 
},
{
 "date": 8.4413e+08,
"SP500": 0.21285 
},
{
 "date": 8.4681e+08,
"SP500": 0.25051 
},
{
 "date": 8.494e+08,
"SP500": 0.20264 
},
{
 "date": 8.5208e+08,
"SP500": 0.23606 
},
{
 "date": 8.5476e+08,
"SP500": 0.23483 
},
{
 "date": 8.5717e+08,
"SP500": 0.17292 
},
{
 "date": 8.5985e+08,
"SP500": 0.22497 
},
{
 "date": 8.6244e+08,
"SP500": 0.26775 
},
{
 "date": 8.6512e+08,
"SP500": 0.31986 
},
{
 "date": 8.6772e+08,
"SP500": 0.49123 
},
{
 "date": 8.7039e+08,
"SP500": 0.37958 
},
{
 "date": 8.7307e+08,
"SP500": 0.3782 
},
{
 "date": 8.7566e+08,
"SP500": 0.29684 
},
{
 "date": 8.7834e+08,
"SP500": 0.26205 
},
{
 "date": 8.8093e+08,
"SP500": 0.31008 
},
{
 "date": 8.8361e+08,
"SP500": 0.24692 
},
{
 "date": 8.8629e+08,
"SP500": 0.3269 
},
{
 "date": 8.8871e+08,
"SP500": 0.45519 
},
{
 "date": 8.9139e+08,
"SP500": 0.38736 
},
{
 "date": 8.9398e+08,
"SP500": 0.28592 
},
{
 "date": 8.9666e+08,
"SP500": 0.28097 
},
{
 "date": 8.9925e+08,
"SP500": 0.17432 
},
{
 "date": 9.0193e+08,
"SP500": 0.064271 
},
{
 "date": 9.0461e+08,
"SP500": 0.073611 
},
{
 "date": 9.072e+08,
"SP500": 0.20123 
},
{
 "date": 9.0988e+08,
"SP500": 0.21795 
},
{
 "date": 9.1247e+08,
"SP500": 0.26669 
},
{
 "date": 9.1515e+08,
"SP500": 0.30538 
},
{
 "date": 9.1783e+08,
"SP500": 0.1801 
},
{
 "date": 9.2025e+08,
"SP500": 0.16757 
},
{
 "date": 9.2292e+08,
"SP500": 0.20097 
},
{
 "date": 9.2552e+08,
"SP500": 0.19345 
},
{
 "date": 9.282e+08,
"SP500": 0.21067 
},
{
 "date": 9.3079e+08,
"SP500": 0.18565 
},
{
 "date": 9.3347e+08,
"SP500": 0.37934 
},
{
 "date": 9.3614e+08,
"SP500": 0.26126 
},
{
 "date": 9.3874e+08,
"SP500": 0.24053 
},
{
 "date": 9.4141e+08,
"SP500": 0.1936 
},
{
 "date": 9.4401e+08,
"SP500": 0.19526 
},
{
 "date": 9.4668e+08,
"SP500": 0.089728 
},
{
 "date": 9.4936e+08,
"SP500": 0.10344 
},
{
 "date": 9.5187e+08,
"SP500": 0.16497 
},
{
 "date": 9.5455e+08,
"SP500": 0.087816 
},
{
 "date": 9.5714e+08,
"SP500": 0.091225 
},
{
 "date": 9.5982e+08,
"SP500": 0.059656 
},
{
 "date": 9.6241e+08,
"SP500": 0.076848 
},
{
 "date": 9.6509e+08,
"SP500": 0.1494 
},
{
 "date": 9.6777e+08,
"SP500": 0.1199 
},
{
 "date": 9.7036e+08,
"SP500": 0.04877 
},
{
 "date": 9.7304e+08,
"SP500": -0.05325 
},
{
 "date": 9.7563e+08,
"SP500": -0.10139 
},
{
 "date": 9.7831e+08,
"SP500": -0.020402 
},
{
 "date": 9.8099e+08,
"SP500": -0.092563 
},
{
 "date": 9.834e+08,
"SP500": -0.22571 
},
{
 "date": 9.8608e+08,
"SP500": -0.13975 
},
{
 "date": 9.8868e+08,
"SP500": -0.11599 
},
{
 "date": 9.9135e+08,
"SP500": -0.15827 
},
{
 "date": 9.9395e+08,
"SP500": -0.15348 
},
{
 "date": 9.9662e+08,
"SP500": -0.25308 
},
{
 "date": 9.993e+08,
"SP500": -0.27537 
},
{
 "date": 1.0019e+09,
"SP500": -0.25858 
},
{
 "date": 1.0046e+09,
"SP500": -0.13347 
},
{
 "date": 1.0072e+09,
"SP500": -0.13043 
},
{
 "date": 1.0098e+09,
"SP500": -0.17263 
},
{
 "date": 1.0125e+09,
"SP500": -0.10743 
},
{
 "date": 1.0149e+09,
"SP500": -0.011152 
},
{
 "date": 1.0176e+09,
"SP500": -0.13809 
},
{
 "date": 1.0202e+09,
"SP500": -0.15024 
},
{
 "date": 1.0229e+09,
"SP500": -0.19157 
},
{
 "date": 1.0255e+09,
"SP500": -0.24736 
},
{
 "date": 1.0282e+09,
"SP500": -0.19188 
},
{
 "date": 1.0308e+09,
"SP500": -0.21678 
},
{
 "date": 1.0334e+09,
"SP500": -0.1642 
},
{
 "date": 1.0361e+09,
"SP500": -0.17828 
},
{
 "date": 1.0387e+09,
"SP500": -0.23366 
},
{
 "date": 1.0414e+09,
"SP500": -0.24288 
},
{
 "date": 1.0441e+09,
"SP500": -0.23997 
},
{
 "date": 1.0465e+09,
"SP500": -0.26077 
},
{
 "date": 1.0492e+09,
"SP500": -0.14857 
},
{
 "date": 1.0517e+09,
"SP500": -0.097035 
},
{
 "date": 1.0544e+09,
"SP500": -0.015478 
},
{
 "date": 1.057e+09,
"SP500": 0.086319 
},
{
 "date": 1.0597e+09,
"SP500": 0.10036 
},
{
 "date": 1.0624e+09,
"SP500": 0.22163 
},
{
 "date": 1.065e+09,
"SP500": 0.18622 
},
{
 "date": 1.0676e+09,
"SP500": 0.13018 
},
{
 "date": 1.0702e+09,
"SP500": 0.2638 
},
{
 "date": 1.0729e+09,
"SP500": 0.32188 
},
{
 "date": 1.0756e+09,
"SP500": 0.36116 
},
{
 "date": 1.0781e+09,
"SP500": 0.3278 
},
{
 "date": 1.0808e+09,
"SP500": 0.20763 
},
{
 "date": 1.0834e+09,
"SP500": 0.16303 
},
{
 "date": 1.086e+09,
"SP500": 0.17069 
},
{
 "date": 1.0886e+09,
"SP500": 0.1125 
},
{
 "date": 1.0913e+09,
"SP500": 0.095465 
},
{
 "date": 1.094e+09,
"SP500": 0.11909 
},
{
 "date": 1.0966e+09,
"SP500": 0.075654 
},
{
 "date": 1.0993e+09,
"SP500": 0.10926 
},
{
 "date": 1.1019e+09,
"SP500": 0.089935 
},
{
 "date": 1.1045e+09,
"SP500": 0.044327 
},
{
 "date": 1.1072e+09,
"SP500": 0.051234 
},
{
 "date": 1.1096e+09,
"SP500": 0.048286 
},
{
 "date": 1.1123e+09,
"SP500": 0.044748 
},
{
 "date": 1.1149e+09,
"SP500": 0.063194 
},
{
 "date": 1.1176e+09,
"SP500": 0.044257 
},
{
 "date": 1.1202e+09,
"SP500": 0.12023 
},
{
 "date": 1.1229e+09,
"SP500": 0.10513 
},
{
 "date": 1.1255e+09,
"SP500": 0.10249 
},
{
 "date": 1.1281e+09,
"SP500": 0.067961 
},
{
 "date": 1.1308e+09,
"SP500": 0.064456 
},
{
 "date": 1.1334e+09,
"SP500": 0.03001 
},
{
 "date": 1.1361e+09,
"SP500": 0.083647 
},
{
 "date": 1.1388e+09,
"SP500": 0.064025 
},
{
 "date": 1.1412e+09,
"SP500": 0.096799 
},
{
 "date": 1.1438e+09,
"SP500": 0.13291 
},
{
 "date": 1.1464e+09,
"SP500": 0.065959 
},
{
 "date": 1.1491e+09,
"SP500": 0.066203 
},
{
 "date": 1.1517e+09,
"SP500": 0.03442 
},
{
 "date": 1.1544e+09,
"SP500": 0.068416 
},
{
 "date": 1.1571e+09,
"SP500": 0.087109 
},
{
 "date": 1.1597e+09,
"SP500": 0.14161 
},
{
 "date": 1.1623e+09,
"SP500": 0.12097 
},
{
 "date": 1.1649e+09,
"SP500": 0.13619 
},
{
 "date": 1.1676e+09,
"SP500": 0.12355 
},
{
 "date": 1.1703e+09,
"SP500": 0.098512 
},
{
 "date": 1.1727e+09,
"SP500": 0.097299 
},
{
 "date": 1.1754e+09,
"SP500": 0.13105 
},
{
 "date": 1.178e+09,
"SP500": 0.20513 
},
{
 "date": 1.1807e+09,
"SP500": 0.18355 
},
{
 "date": 1.1832e+09,
"SP500": 0.1399 
},
{
 "date": 1.1859e+09,
"SP500": 0.13052 
},
{
 "date": 1.1886e+09,
"SP500": 0.14291 
},
{
 "date": 1.1912e+09,
"SP500": 0.12442 
},
{
 "date": 1.1939e+09,
"SP500": 0.057481 
},
{
 "date": 1.1965e+09,
"SP500": 0.035296 
},
{
 "date": 1.1991e+09,
"SP500": -0.041502 
},
{
 "date": 1.2018e+09,
"SP500": -0.054158 
},
{
 "date": 1.2043e+09,
"SP500": -0.069085 
},
{
 "date": 1.207e+09,
"SP500": -0.065287 
},
{
 "date": 1.2096e+09,
"SP500": -0.08509 
},
{
 "date": 1.2123e+09,
"SP500": -0.14857 
},
{
 "date": 1.2149e+09,
"SP500": -0.12911 
},
{
 "date": 1.2175e+09,
"SP500": -0.12969 
},
{
 "date": 1.2202e+09,
"SP500": -0.23605 
},
{
 "date": 1.2228e+09,
"SP500": -0.37475 
},
{
 "date": 1.2255e+09,
"SP500": -0.3949 
},
{
 "date": 1.2281e+09,
"SP500": -0.38486 
},
{
 "date": 1.2308e+09,
"SP500": -0.40091 
},
{
 "date": 1.2334e+09,
"SP500": -0.44756 
},
{
 "date": 1.2359e+09,
"SP500": -0.39679 
},
{
 "date": 1.2385e+09,
"SP500": -0.37008 
},
{
 "date": 1.2411e+09,
"SP500": -0.34365 
},
{
 "date": 1.2438e+09,
"SP500": -0.28178 
},
{
 "date": 1.2464e+09,
"SP500": -0.22085 
},
{
 "date": 1.2491e+09,
"SP500": -0.2044 
},
{
 "date": 1.2518e+09,
"SP500": -0.093693 
},
{
 "date": 1.2544e+09,
"SP500": 0.069615 
},
{
 "date": 1.257e+09,
"SP500": 0.22247 
},
{
 "date": 1.2596e+09,
"SP500": 0.23454 
},
{
 "date": 1.2623e+09,
"SP500": 0.30027 
},
{
 "date": 1.265e+09,
"SP500": 0.50252 
},
{
 "date": 1.2674e+09,
"SP500": 0.46569 
},
{
 "date": 1.2701e+09,
"SP500": 0.35962 
},
{
 "date": 1.2727e+09,
"SP500": 0.18525 
},
{
 "date": 1.2754e+09,
"SP500": 0.12117 
},
{
 "date": 1.2779e+09,
"SP500": 0.11557 
},
{
 "date": 1.2806e+09,
"SP500": 0.02813 
},
{
 "date": 1.2833e+09,
"SP500": 0.079578 
},
{
 "date": 1.2859e+09,
"SP500": 0.14193 
},
{
 "date": 1.2886e+09,
"SP500": 0.077508 
},
{
 "date": 1.2912e+09,
"SP500": 0.12783 
},
{
 "date": 1.2938e+09,
"SP500": 0.19765 
},
{
 "date": 1.2965e+09,
"SP500": 0.20166 
},
{
 "date": 1.2989e+09,
"SP500": 0.13374 
},
{
 "date": 1.3016e+09,
"SP500": 0.14909 
},
{
 "date": 1.3042e+09,
"SP500": 0.2348 
},
{
 "date": 1.3069e+09,
"SP500": 0.28129 
},
{
 "date": 1.3095e+09,
"SP500": 0.17309 
},
{
 "date": 1.3122e+09,
"SP500": 0.16159 
},
{
 "date": 1.3148e+09,
"SP500": -0.0085699 
},
{
 "date": 1.3174e+09,
"SP500": 0.059192 
},
{
 "date": 1.3201e+09,
"SP500": 0.056253 
},
{
 "date": 1.3227e+09,
"SP500": -3.1806e-05 
},
{
 "date": 1.3254e+09,
"SP500": 0.020441 
},
{
 "date": 1.3281e+09,
"SP500": 0.028978 
},
{
 "date": 1.3306e+09,
"SP500": 0.062331 
},
{
 "date": 1.3332e+09,
"SP500": 0.025154 
},
{
 "date": 1.3358e+09,
"SP500": -0.025922 
},
{
 "date": 1.3385e+09,
"SP500": 0.031439 
},
{
 "date": 1.3411e+09,
"SP500": 0.067354 
},
{
 "date": 1.3438e+09,
"SP500": 0.15398 
},
{
 "date": 1.3465e+09,
"SP500": 0.27333 
},
{
 "date": 1.349e+09,
"SP500": 0.12675 
},
{
 "date": 1.3517e+09,
"SP500": 0.13571 
},
{
 "date": 1.3543e+09,
"SP500": 0.13406 
},
{
 "date": 1.357e+09,
"SP500": 0.1415 
},
{
 "date": 1.3597e+09,
"SP500": 0.1091 
},
{
 "date": 1.3621e+09,
"SP500": 0.11411 
},
{
 "date": 1.3648e+09,
"SP500": 0.14283 
},
{
 "date": 1.3674e+09,
"SP500": 0.24453 
},
{
 "date": 1.37e+09,
"SP500": 0.17922 
},
{
 "date": 1.3726e+09,
"SP500": 0.21438 
} ],
"x": "date",
"y": "SP500",
"id": "chart8682cb0b4b" 
};

var svg = d3.select('#' + params.id).append("svg")
    .attr("width", params.width)
    .attr("height", params.height);
    
var chart = d3.horizon()
    .width(params.width)
    .height(params.height - 50)
    .bands(params.bands)
    .mode(params.mode)
    .interpolate(params.interpolate);
    
data = [params.data.map(function(d) {return[d[params.x],d[params.y]]})]    
    
svg.data(data).call(chart);

var x = d3.time.scale().range([0,params.width]),
    xAxis = d3.svg.axis().scale(x).tickSize(5).tickSubdivide(true).orient("bottom");
    
x.domain(d3.extent(params.data,function(d){return new Date(d[params.x] * 1000) }));
    
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (params.height - 50) + ")")
    .call(xAxis);
    
var y = d3.scale.linear().range([(params.height) * params.bands - 76,0]),  //use 76 for proper alignment
    yAxis = d3.svg.axis()
                .scale(y)
                .tickSize(params.width)
                .ticks(params.bands * params.bands)
                .orient("left");
    
y.domain(d3.extent(params.data, function(d){return Math.abs( d[params.y] )}));
svg.append("g")
    .attr("class","y axis")
    .attr("transform", "translate(" + params.width + ",0)")
    .call(yAxis);
</script>
    
  </body>
  <!-- Google Prettify -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  <script 
    src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
  </script>
  <script>
    var pres = document.getElementsByTagName("pre");
    for (var i=0; i < pres.length; ++i) {
      pres[i].className = "prettyprint linenums";
    }
    prettyPrint();
  </script>
</html>

code.R

require(rCharts)

rChart <- rCharts$new()
rChart$setLib('libraries/widgets/d3_horizon')
rChart$setTemplate(script = "libraries/widgets/d3_horizon/layouts/d3_horizon_axes.html")

rChart$set(
  bands = 3,
  mode = "mirror",
  interpolate = "basis",
  width = 700,
  height = 300
)

require(quantmod)
#get sp500 prices and convert them to monthly
SP500 <- to.monthly(
  getSymbols("^GSPC", from = "1990-01-01", auto.assign = FALSE)
)

#get 12 month rolling return
SP500.ret <- na.omit(ROC(SP500[,4], type = "discrete", n = 12))
SP500.df <- cbind(
  as.numeric(as.POSIXct(as.Date(index(SP500.ret)))),
  coredata(SP500.ret)
)

colnames(SP500.df) <- c("date","SP500")

#supply the data to our dataless but no longer naked rChart

rChart$set(data = SP500.df)
rChart$set(x = "date", y = "SP500")
rChart