Skip to content

Instantly share code, notes, and snippets.

@reinholdsson

reinholdsson/code.R

Created June 21, 2013 07:22
Show Gist options
  • Save reinholdsson/5829482 to your computer and use it in GitHub Desktop.
Save reinholdsson/5829482 to your computer and use it in GitHub Desktop.
Download ZIP
tooltip example
Raw
code.R
require(reshape2)
require(rCharts)
df_orig <- read.csv("~/Desktop/df_orig.csv")
b <- rCharts:::Highcharts$new()
invisible(sapply(c("W", "D", "L"), function(res){
df <- df_orig[df_orig$result == res,]
df.lst <- lapply(1:nrow(df), function(i) as.list(df[i,]))
b$series(data=df.lst, type = "column", name = res)
}))
b$plotOptions(column = list(pointPadding = -0.25, groupPadding = 0.1, pointWidth = 10))
b$tooltip(useHTML = T, formatter = "#! function() { return this.point.gameDate; } !#")
b
Raw
index.html
<!doctype HTML>
<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://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.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>
<style>
.rChart {
display: block
margin: auto auto;
width: 800px;
height: 400px;
}
body {
margin-top: 60px;
}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span9'>
<div id='chart4a9d4611f423' class='rChart nvd3Plot highcharts'></div>
<br/>
<pre><code class='r'>require(reshape2)
require(rCharts)
df_orig &lt;- read.csv(&quot;~/Desktop/df_orig.csv&quot;)
b &lt;- rCharts:::Highcharts$new()
invisible(sapply(c(&quot;W&quot;, &quot;D&quot;, &quot;L&quot;), function(res){
df &lt;- df_orig[df_orig$result == res,]
df.lst &lt;- lapply(1:nrow(df), function(i) as.list(df[i,]))
b$series(data=df.lst, type = &quot;column&quot;, name = res)
}))
b$plotOptions(column = list(pointPadding = -0.25, groupPadding = 0.1, pointWidth = 10))
b$tooltip(useHTML = T, formatter = &quot;#! function() { return this.point.gameDate; } !#&quot;)
b
</code></pre>
</div>
</div>
</div>
<script type='text/javascript'>
(function($){
$(function () {
var chart = new Highcharts.Chart({
"dom": "chart4a9d4611f423",
"width": 600,
"height": 400,
"credits": {
"href": null,
"text": null
},
"title": {
"text": null
},
"yAxis": {
"title": {
"text": null
}
},
"series": [
{
"data": [
{
"x": 4,
"y": 1,
"gameDate": "2011-09-10",
"result": "W"
},
{
"x": 6,
"y": 3,
"gameDate": "2011-09-24",
"result": "W"
},
{
"x": 8,
"y": 1,
"gameDate": "2011-10-16",
"result": "W"
},
{
"x": 9,
"y": 2,
"gameDate": "2011-10-23",
"result": "W"
},
{
"x": 10,
"y": 2,
"gameDate": "2011-10-29",
"result": "W"
},
{
"x": 11,
"y": 3,
"gameDate": "2011-11-05",
"result": "W"
},
{
"x": 12,
"y": 1,
"gameDate": "2011-11-19",
"result": "W"
},
{
"x": 14,
"y": 4,
"gameDate": "2011-12-03",
"result": "W"
},
{
"x": 15,
"y": 1,
"gameDate": "2011-12-10",
"result": "W"
},
{
"x": 17,
"y": 1,
"gameDate": "2011-12-21",
"result": "W"
},
{
"x": 19,
"y": 1,
"gameDate": "2011-12-31",
"result": "W"
},
{
"x": 24,
"y": 6,
"gameDate": "2012-02-04",
"result": "W"
},
{
"x": 25,
"y": 1,
"gameDate": "2012-02-11",
"result": "W"
},
{
"x": 26,
"y": 3,
"gameDate": "2012-02-26",
"result": "W"
},
{
"x": 27,
"y": 1,
"gameDate": "2012-03-03",
"result": "W"
},
{
"x": 28,
"y": 1,
"gameDate": "2012-03-12",
"result": "W"
},
{
"x": 29,
"y": 1,
"gameDate": "2012-03-21",
"result": "W"
},
{
"x": 30,
"y": 3,
"gameDate": "2012-03-24",
"result": "W"
},
{
"x": 32,
"y": 1,
"gameDate": "2012-04-08",
"result": "W"
},
{
"x": 33,
"y": 3,
"gameDate": "2012-04-11",
"result": "W"
},
{
"x": 38,
"y": 1,
"gameDate": "2012-05-13",
"result": "W"
}
],
"type": "column",
"name": "W"
},
{
"data": [
{
"x": 1,
"y": 0.1,
"gameDate": "2011-08-13",
"result": "D"
},
{
"x": 13,
"y": 0.1,
"gameDate": "2011-11-26",
"result": "D"
},
{
"x": 18,
"y": 0.1,
"gameDate": "2011-12-27",
"result": "D"
},
{
"x": 23,
"y": 0.1,
"gameDate": "2012-02-01",
"result": "D"
},
{
"x": 35,
"y": 0.1,
"gameDate": "2012-04-21",
"result": "D"
},
{
"x": 36,
"y": 0.1,
"gameDate": "2012-04-28",
"result": "D"
},
{
"x": 37,
"y": 0.1,
"gameDate": "2012-05-05",
"result": "D"
}
],
"type": "column",
"name": "D"
},
{
"data": [
{
"x": 2,
"y": -2,
"gameDate": "2011-08-20",
"result": "L"
},
{
"x": 3,
"y": -6,
"gameDate": "2011-08-28",
"result": "L"
},
{
"x": 5,
"y": -1,
"gameDate": "2011-09-17",
"result": "L"
},
{
"x": 7,
"y": -1,
"gameDate": "2011-10-02",
"result": "L"
},
{
"x": 16,
"y": -1,
"gameDate": "2011-12-19",
"result": "L"
},
{
"x": 20,
"y": -1,
"gameDate": "2012-01-02",
"result": "L"
},
{
"x": 21,
"y": -1,
"gameDate": "2012-01-15",
"result": "L"
},
{
"x": 22,
"y": -1,
"gameDate": "2012-01-22",
"result": "L"
},
{
"x": 31,
"y": -1,
"gameDate": "2012-03-31",
"result": "L"
},
{
"x": 34,
"y": -1,
"gameDate": "2012-04-16",
"result": "L"
}
],
"type": "column",
"name": "L"
}
],
"plotOptions": {
"column": {
"pointPadding": -0.25,
"groupPadding": 0.1,
"pointWidth": 10
}
},
"tooltip": {
"useHTML": true,
"formatter": function() { return this.point.gameDate; }
},
"id": "chart4a9d4611f423",
"chart": {
"renderTo": "chart4a9d4611f423"
}
});
});
})(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