Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/code.R

Created November 25, 2013 15:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramnathv/7642939 to your computer and use it in GitHub Desktop.
Save ramnathv/7642939 to your computer and use it in GitHub Desktop.
Download ZIP
Higcharts AreaRange with rCharts
Raw
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
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="http://aozora.github.io/bootplus/assets/css/docs.css">
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'></script>
<script src='http://code.highcharts.com/highcharts-more.js' type='text/javascript'></script>
<script src='http://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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment