Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/code.R

Created May 30, 2014 17:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramnathv/35b5211832ecd0e7e955 to your computer and use it in GitHub Desktop.
Save ramnathv/35b5211832ecd0e7e955 to your computer and use it in GitHub Desktop.
Download ZIP
Highcharts Custom Theme Demo
Raw
code.R
# requires dev branch of rCharts installed
# devtools::install_github('ramnathv/rCharts@dev')
library(rCharts)
h1 <- hPlot(Pulse ~ Height,
data = MASS::survey,
type = "scatter",
group = "Exer"
)
# choose theme dark-blue.js, dark-unica.js, gray.js, grid-light.js,
# grid.js, sand-signika.js, skies.js
theme = 'gray.js'
theme_url = sprintf('http://rawgithub.com/highslide-software/highcharts.com/master/js/themes/%s', theme)
h1$setTemplate(afterScript =
sprintf("<script src='%s'></script>", theme_url)
)
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='chart3f6466d9c325' class='rChart highcharts'>
</div>
<br/>
<pre><code class='r'># requires dev branch of rCharts installed
# devtools::install_github('ramnathv/rCharts@dev')
library(rCharts)
h1 &lt;- hPlot(Pulse ~ Height,
data = MASS::survey,
type = &quot;scatter&quot;,
group = &quot;Exer&quot;
)
# choose theme dark-blue.js, dark-unica.js, gray.js, grid-light.js,
# grid.js, sand-signika.js, skies.js
theme = 'gray.js'
theme_url = sprintf('http://rawgithub.com/highslide-software/highcharts.com/master/js/themes/%s', theme)
h1$setTemplate(afterScript =
sprintf(&quot;&lt;script src='%s'&gt;&lt;/script&gt;&quot;, theme_url)
)
h1
</code></pre>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
(function($){
$(function () {
var chart = new Highcharts.Chart({
"dom": "chart3f6466d9c325",
"width": 700,
"height": 400,
"credits": {
"href": null,
"text": null
},
"exporting": {
"enabled": false
},
"title": {
"text": null
},
"yAxis": [
{
"title": {
"text": "Pulse"
}
}
],
"series": [
{
"data": [
[
154.94,
71
],
[
156.2,
80
],
[
157,
74
],
[
157,
74
],
[
157,
89
],
[
157.48,
68
],
[
160.02,
80
],
[
162.56,
60
],
[
164,
64
],
[
164,
64
],
[
164,
84
],
[
165,
48
],
[
165,
80
],
[
165,
92
],
[
165.1,
87
],
[
166.4,
72
],
[
166.5,
60
],
[
167,
70
],
[
167.64,
40
],
[
167.64,
70
],
[
167.64,
72
],
[
167.64,
90
],
[
168,
83
],
[
168.5,
85
],
[
169.2,
60
],
[
170,
64
],
[
170,
68
],
[
170,
70
],
[
170,
75
],
[
170,
104
],
[
170.18,
75
],
[
170.18,
80
],
[
172,
68
],
[
172,
68
],
[
172,
73
],
[
172,
92
],
[
172.72,
65
],
[
172.72,
68
],
[
172.72,
69
],
[
172.72,
76
],
[
173,
62
],
[
173,
76
],
[
174,
48
],
[
175,
72
],
[
175,
76
],
[
175.26,
62
],
[
175.26,
66
],
[
175.26,
68
],
[
176.5,
76
],
[
177,
76
],
[
177,
78
],
[
177.8,
62
],
[
178,
70
],
[
178.5,
66
],
[
179,
56
],
[
179,
60
],
[
179,
65
],
[
180,
59
],
[
180,
64
],
[
180,
78
],
[
180,
84
],
[
180.34,
64
],
[
180.34,
70
],
[
180.34,
72
],
[
180.34,
72
],
[
182,
65
],
[
182.5,
72
],
[
182.88,
72
],
[
182.88,
83
],
[
184,
100
],
[
185,
60
],
[
185,
68
],
[
185,
71
],
[
185,
88
],
[
185.42,
60
],
[
187,
66
],
[
187,
84
],
[
187.96,
64
],
[
187.96,
86
],
[
188,
75
],
[
190,
66
],
[
190,
68
],
[
190,
68
],
[
190.5,
72
],
[
195,
76
],
[
196,
63
],
[
200,
55
]
],
"name": "Freq",
"type": "scatter",
"marker": {
"radius": 3
}
},
{
"data": [
[
157.48,
70
],
[
158,
70
],
[
160,
86
],
[
165,
50
],
[
165,
65
],
[
165,
97
],
[
167,
68
],
[
167,
80
],
[
170,
60
],
[
170,
96
],
[
176,
68
],
[
177.8,
104
],
[
180.34,
68
],
[
190.5,
80
]
],
"name": "None",
"type": "scatter",
"marker": {
"radius": 3
}
},
{
"data": [
[
152,
90
],
[
152.4,
92
],
[
153.5,
76
],
[
154.94,
72
],
[
155,
66
],
[
159,
70
],
[
160,
74
],
[
160,
84
],
[
160,
88
],
[
160.02,
65
],
[
160.02,
72
],
[
162.5,
79
],
[
162.56,
70
],
[
162.56,
70
],
[
162.56,
88
],
[
163,
79
],
[
163,
80
],
[
163,
83
],
[
164,
80
],
[
165,
35
],
[
165,
65
],
[
165,
70
],
[
165,
76
],
[
165,
76
],
[
165,
88
],
[
165.1,
68
],
[
165.1,
85
],
[
167,
61
],
[
167,
76
],
[
167,
79
],
[
167,
90
],
[
167.64,
74
],
[
168,
60
],
[
168,
72
],
[
168,
81
],
[
168.9,
68
],
[
169,
80
],
[
170,
70
],
[
170,
80
],
[
170,
80
],
[
170.18,
78
],
[
170.18,
80
],
[
171,
68
],
[
171,
100
],
[
172,
60
],
[
172.72,
64
],
[
172.72,
90
],
[
173,
92
],
[
175,
72
],
[
175,
84
],
[
175,
90
],
[
175.26,
85
],
[
176.5,
80
],
[
178,
60
],
[
179.1,
80
],
[
179.1,
92
],
[
180,
60
],
[
180,
70
],
[
180,
96
],
[
180.34,
67
],
[
182.88,
74
],
[
182.88,
80
],
[
183,
75
],
[
183,
90
],
[
184,
62
],
[
185,
75
],
[
185,
80
],
[
189,
90
],
[
191.8,
72
],
[
193.04,
83
]
],
"name": "Some",
"type": "scatter",
"marker": {
"radius": 3
}
}
],
"xAxis": [
{
"title": {
"text": "Height"
}
}
],
"subtitle": {
"text": null
},
"id": "chart3f6466d9c325",
"chart": {
"renderTo": "chart3f6466d9c325"
}
});
});
})(jQuery);
</script>
<script src='http://rawgithub.com/highslide-software/highcharts.com/master/js/themes/gray.js'></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