block by ramnathv 7642939

Higcharts AreaRange with 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="//getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="//aozora.github.io/bootplus/assets/css/docs.css">
    
    <script src='//code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/highcharts.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/highcharts-more.js' type='text/javascript'></script>
    <script src='//code.highcharts.com/modules/exporting.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='chart19df5d56578e' class='rChart highcharts'>
            </div> 
          <br/>
<pre><code class='r'>library(rCharts)
# year is converted to highcharts compatible datetime format
huron &lt;- data.frame(
  year = as.numeric(as.POSIXct(paste0(1875:1972, '-01-01')))*1000, 
  level = as.vector(LakeHuron)
)

# add ymin and ymax to data
dat &lt;- transform(huron,
  ymin = level - 1,
  ymax = level + 1
)

# initialize highcharts object
# add each layer as a series
h1 &lt;- Highcharts$new()
h1$series(list(
  list(
    data = toJSONArray2(dat[,c('year', 'level')], names = F, json = F),
    zIndex = 1
  ),
  list(
    data = toJSONArray2(dat[,c('year', 'ymin', 'ymax')], names = F, json = F),
    type = 'arearange',
    fillOpacity = 0.3,
    lineWidth = 0,
    color = 'lightblue',
    zIndex = 0
  )
))
h1$xAxis(type = 'datetime')
h1
</code></pre>
</div>
        </div>
      </div>
    </div>
      
    <script type='text/javascript'>
    (function($){
        $(function () {
            var chart = new Highcharts.Chart({
 "dom": "chart19df5d56578e",
"width":            700,
"height":            400,
"credits": {
 "href": null,
"text": null 
},
"exporting": {
 "enabled": false 
},
"title": {
 "text": null 
},
"yAxis": {
 "title": {
 "text": null 
} 
},
"series": [
 {
 "data": [
 [
 -2997889200000,
        580.38 
],
[
 -2966353200000,
        581.86 
],
[
 -2934730800000,
        580.97 
],
[
 -2903194800000,
         580.8 
],
[
 -2871658800000,
        579.79 
],
[
 -2840122800000,
        580.39 
],
[
 -2808500400000,
        580.42 
],
[
 -2776964400000,
        580.82 
],
[
 -2745428400000,
         581.4 
],
[
 -2713892400000,
        581.32 
],
[
 -2682270000000,
        581.44 
],
[
 -2650734000000,
        581.68 
],
[
 -2619198000000,
        581.17 
],
[
 -2587662000000,
        580.53 
],
[
 -2556039600000,
        580.01 
],
[
 -2524503600000,
        579.91 
],
[
 -2492967600000,
        579.14 
],
[
 -2461431600000,
        579.16 
],
[
 -2429809200000,
        579.55 
],
[
 -2398273200000,
        579.67 
],
[
 -2366737200000,
        578.44 
],
[
 -2335201200000,
        578.24 
],
[
 -2303578800000,
         579.1 
],
[
 -2272042800000,
        579.09 
],
[
 -2240506800000,
        579.35 
],
[
 -2208970800000,
        578.82 
],
[
 -2177434800000,
        579.32 
],
[
 -2145898800000,
        579.01 
],
[
 -2114362800000,
           579 
],
[
 -2082826800000,
         579.8 
],
[
 -2051204400000,
        579.83 
],
[
 -2019668400000,
        579.72 
],
[
 -1988132400000,
        579.89 
],
[
 -1956596400000,
        580.01 
],
[
 -1924974000000,
        579.37 
],
[
 -1893438000000,
        578.69 
],
[
 -1861902000000,
        578.19 
],
[
 -1830366000000,
        578.67 
],
[
 -1798743600000,
        579.55 
],
[
 -1767207600000,
        578.92 
],
[
 -1735671600000,
        578.09 
],
[
 -1704135600000,
        579.37 
],
[
 -1672513200000,
        580.13 
],
[
 -1640977200000,
        580.14 
],
[
 -1609441200000,
        579.51 
],
[
 -1577905200000,
        579.24 
],
[
 -1546282800000,
        578.66 
],
[
 -1514746800000,
        578.86 
],
[
 -1483210800000,
        578.05 
],
[
 -1451674800000,
        577.79 
],
[
 -1420052400000,
        576.75 
],
[
 -1388516400000,
        576.75 
],
[
 -1356980400000,
        577.82 
],
[
 -1325444400000,
        578.64 
],
[
 -1293822000000,
        580.58 
],
[
 -1262286000000,
        579.48 
],
[
 -1230750000000,
        577.38 
],
[
 -1199214000000,
         576.9 
],
[
 -1167591600000,
        576.94 
],
[
 -1136055600000,
        576.24 
],
[
 -1104519600000,
        576.84 
],
[
 -1072983600000,
        576.85 
],
[
 -1041361200000,
         576.9 
],
[
 -1009825200000,
        577.79 
],
[
  -978289200000,
        578.18 
],
[
  -946753200000,
        577.51 
],
[
  -915134400000,
        577.23 
],
[
  -883598400000,
        578.42 
],
[
  -852062400000,
        579.61 
],
[
  -820526400000,
        579.05 
],
[
  -788904000000,
        579.26 
],
[
  -757364400000,
        579.22 
],
[
  -725828400000,
        579.38 
],
[
  -694292400000,
         579.1 
],
[
  -662670000000,
        577.95 
],
[
  -631134000000,
        578.12 
],
[
  -599598000000,
        579.75 
],
[
  -568062000000,
        580.85 
],
[
  -536439600000,
        580.41 
],
[
  -504903600000,
        579.96 
],
[
  -473367600000,
        579.61 
],
[
  -441831600000,
        578.76 
],
[
  -410209200000,
        578.18 
],
[
  -378673200000,
        577.21 
],
[
  -347137200000,
        577.13 
],
[
  -315601200000,
         579.1 
],
[
  -283978800000,
        578.25 
],
[
  -252442800000,
        577.91 
],
[
  -220906800000,
        576.89 
],
[
  -189370800000,
        575.96 
],
[
  -157748400000,
         576.8 
],
[
  -126212400000,
        577.68 
],
[
   -94676400000,
        578.38 
],
[
   -63140400000,
        578.52 
],
[
   -31518000000,
        579.74 
],
[
       18000000,
        579.31 
],
[
    31554000000,
        579.89 
],
[
    63090000000,
        579.96 
] 
],
"zIndex":              1 
},
{
 "data": [
 [
 -2997889200000,
        579.38,
        581.38 
],
[
 -2966353200000,
        580.86,
        582.86 
],
[
 -2934730800000,
        579.97,
        581.97 
],
[
 -2903194800000,
         579.8,
         581.8 
],
[
 -2871658800000,
        578.79,
        580.79 
],
[
 -2840122800000,
        579.39,
        581.39 
],
[
 -2808500400000,
        579.42,
        581.42 
],
[
 -2776964400000,
        579.82,
        581.82 
],
[
 -2745428400000,
         580.4,
         582.4 
],
[
 -2713892400000,
        580.32,
        582.32 
],
[
 -2682270000000,
        580.44,
        582.44 
],
[
 -2650734000000,
        580.68,
        582.68 
],
[
 -2619198000000,
        580.17,
        582.17 
],
[
 -2587662000000,
        579.53,
        581.53 
],
[
 -2556039600000,
        579.01,
        581.01 
],
[
 -2524503600000,
        578.91,
        580.91 
],
[
 -2492967600000,
        578.14,
        580.14 
],
[
 -2461431600000,
        578.16,
        580.16 
],
[
 -2429809200000,
        578.55,
        580.55 
],
[
 -2398273200000,
        578.67,
        580.67 
],
[
 -2366737200000,
        577.44,
        579.44 
],
[
 -2335201200000,
        577.24,
        579.24 
],
[
 -2303578800000,
         578.1,
         580.1 
],
[
 -2272042800000,
        578.09,
        580.09 
],
[
 -2240506800000,
        578.35,
        580.35 
],
[
 -2208970800000,
        577.82,
        579.82 
],
[
 -2177434800000,
        578.32,
        580.32 
],
[
 -2145898800000,
        578.01,
        580.01 
],
[
 -2114362800000,
           578,
           580 
],
[
 -2082826800000,
         578.8,
         580.8 
],
[
 -2051204400000,
        578.83,
        580.83 
],
[
 -2019668400000,
        578.72,
        580.72 
],
[
 -1988132400000,
        578.89,
        580.89 
],
[
 -1956596400000,
        579.01,
        581.01 
],
[
 -1924974000000,
        578.37,
        580.37 
],
[
 -1893438000000,
        577.69,
        579.69 
],
[
 -1861902000000,
        577.19,
        579.19 
],
[
 -1830366000000,
        577.67,
        579.67 
],
[
 -1798743600000,
        578.55,
        580.55 
],
[
 -1767207600000,
        577.92,
        579.92 
],
[
 -1735671600000,
        577.09,
        579.09 
],
[
 -1704135600000,
        578.37,
        580.37 
],
[
 -1672513200000,
        579.13,
        581.13 
],
[
 -1640977200000,
        579.14,
        581.14 
],
[
 -1609441200000,
        578.51,
        580.51 
],
[
 -1577905200000,
        578.24,
        580.24 
],
[
 -1546282800000,
        577.66,
        579.66 
],
[
 -1514746800000,
        577.86,
        579.86 
],
[
 -1483210800000,
        577.05,
        579.05 
],
[
 -1451674800000,
        576.79,
        578.79 
],
[
 -1420052400000,
        575.75,
        577.75 
],
[
 -1388516400000,
        575.75,
        577.75 
],
[
 -1356980400000,
        576.82,
        578.82 
],
[
 -1325444400000,
        577.64,
        579.64 
],
[
 -1293822000000,
        579.58,
        581.58 
],
[
 -1262286000000,
        578.48,
        580.48 
],
[
 -1230750000000,
        576.38,
        578.38 
],
[
 -1199214000000,
         575.9,
         577.9 
],
[
 -1167591600000,
        575.94,
        577.94 
],
[
 -1136055600000,
        575.24,
        577.24 
],
[
 -1104519600000,
        575.84,
        577.84 
],
[
 -1072983600000,
        575.85,
        577.85 
],
[
 -1041361200000,
         575.9,
         577.9 
],
[
 -1009825200000,
        576.79,
        578.79 
],
[
  -978289200000,
        577.18,
        579.18 
],
[
  -946753200000,
        576.51,
        578.51 
],
[
  -915134400000,
        576.23,
        578.23 
],
[
  -883598400000,
        577.42,
        579.42 
],
[
  -852062400000,
        578.61,
        580.61 
],
[
  -820526400000,
        578.05,
        580.05 
],
[
  -788904000000,
        578.26,
        580.26 
],
[
  -757364400000,
        578.22,
        580.22 
],
[
  -725828400000,
        578.38,
        580.38 
],
[
  -694292400000,
         578.1,
         580.1 
],
[
  -662670000000,
        576.95,
        578.95 
],
[
  -631134000000,
        577.12,
        579.12 
],
[
  -599598000000,
        578.75,
        580.75 
],
[
  -568062000000,
        579.85,
        581.85 
],
[
  -536439600000,
        579.41,
        581.41 
],
[
  -504903600000,
        578.96,
        580.96 
],
[
  -473367600000,
        578.61,
        580.61 
],
[
  -441831600000,
        577.76,
        579.76 
],
[
  -410209200000,
        577.18,
        579.18 
],
[
  -378673200000,
        576.21,
        578.21 
],
[
  -347137200000,
        576.13,
        578.13 
],
[
  -315601200000,
         578.1,
         580.1 
],
[
  -283978800000,
        577.25,
        579.25 
],
[
  -252442800000,
        576.91,
        578.91 
],
[
  -220906800000,
        575.89,
        577.89 
],
[
  -189370800000,
        574.96,
        576.96 
],
[
  -157748400000,
         575.8,
         577.8 
],
[
  -126212400000,
        576.68,
        578.68 
],
[
   -94676400000,
        577.38,
        579.38 
],
[
   -63140400000,
        577.52,
        579.52 
],
[
   -31518000000,
        578.74,
        580.74 
],
[
       18000000,
        578.31,
        580.31 
],
[
    31554000000,
        578.89,
        580.89 
],
[
    63090000000,
        578.96,
        580.96 
] 
],
"type": "arearange",
"fillOpacity":            0.3,
"lineWidth":              0,
"color": "lightblue",
"zIndex":              0 
} 
],
"xAxis": [
 {
 "type": "datetime" 
} 
],
"id": "chart19df5d56578e",
"chart": {
 "renderTo": "chart19df5d56578e" 
} 
});
        });
    })(jQuery);
</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

library(rCharts)
# year is converted to highcharts compatible datetime format
huron <- data.frame(
  year = as.numeric(as.POSIXct(paste0(1875:1972, '-01-01')))*1000, 
  level = as.vector(LakeHuron)
)

# add ymin and ymax to data
dat <- transform(huron,
  ymin = level - 1,
  ymax = level + 1
)

# initialize highcharts object
# add each layer as a series
h1 <- Highcharts$new()
h1$series(list(
  list(
    data = toJSONArray2(dat[,c('year', 'level')], names = F, json = F),
    zIndex = 1
  ),
  list(
    data = toJSONArray2(dat[,c('year', 'ymin', 'ymax')], names = F, json = F),
    type = 'arearange',
    fillOpacity = 0.3,
    lineWidth = 0,
    color = 'lightblue',
    zIndex = 0
  )
))
h1$xAxis(type = 'datetime')
h1