block by ramnathv 35b5211832ecd0e7e955

Highcharts Custom Theme Demo

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='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('//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='//rawgithub.com/highslide-software/highcharts.com/master/js/themes/gray.js'></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

# 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