Skip to content

Instantly share code, notes, and snippets.

@ramnathv

ramnathv/code.R

Created March 2, 2014 04:24
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/9301903 to your computer and use it in GitHub Desktop.
Save ramnathv/9301903 to your computer and use it in GitHub Desktop.
Download ZIP
Highcharts with Date on x-Axis
Raw
code.R
df = structure(list(Date = structure(c(16075, 16082, 16082, 16089, 16096, 16096, 16103, 16110, 16110), class = "Date"), Type = c("Type-1", "Type-1", "Type-2", "Type-1", "Type-1", "Type-2", "Type-1", "Type-1", "Type-2"), Numbers = c(16, 82, 2, 177, 270, 3, 381, 461, 4)), .Names = c("Date", "Type", "Numbers"), row.names = c(NA, -9L), class = "data.frame")
# don't switch to scientific notation, since we want date to be
# represented in milliseconds
options(scipen = 13)
dat = transform(df, Date2 = as.numeric(as.POSIXct(Date))*1000)
h1 <- hPlot(Numbers ~ Date2, data = dat,
group = 'Type',
type = "line",
radius=6
)
h1$xAxis(type = 'datetime', labels = list(
format = '{value:%Y-%m-%d}'
))
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='chart14bc706da0fd' class='rChart highcharts'>
</div>
<br/>
<pre><code class='r'>df = structure(list(Date = structure(c(16075, 16082, 16082, 16089, 16096, 16096, 16103, 16110, 16110), class = &quot;Date&quot;), Type = c(&quot;Type-1&quot;, &quot;Type-1&quot;, &quot;Type-2&quot;, &quot;Type-1&quot;, &quot;Type-1&quot;, &quot;Type-2&quot;, &quot;Type-1&quot;, &quot;Type-1&quot;, &quot;Type-2&quot;), Numbers = c(16, 82, 2, 177, 270, 3, 381, 461, 4)), .Names = c(&quot;Date&quot;, &quot;Type&quot;, &quot;Numbers&quot;), row.names = c(NA, -9L), class = &quot;data.frame&quot;)
# don't switch to scientific notation, since we want date to be
# represented in milliseconds
options(scipen = 13)
dat = transform(df, Date2 = as.numeric(as.POSIXct(Date))*1000)
h1 &lt;- hPlot(Numbers ~ Date2, data = dat,
group = 'Type',
type = &quot;line&quot;,
radius=6
)
h1$xAxis(type = 'datetime', labels = list(
format = '{value:%Y-%m-%d}'
))
h1
</code></pre>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
(function($){
$(function () {
var chart = new Highcharts.Chart({
"dom": "chart14bc706da0fd",
"width": 700,
"height": 400,
"credits": {
"href": null,
"text": null
},
"exporting": {
"enabled": false
},
"title": {
"text": null
},
"yAxis": [
{
"title": {
"text": "Numbers"
}
}
],
"series": [
{
"data": [
[
1388880000000,
16
],
[
1389484800000,
82
],
[
1390089600000,
177
],
[
1390694400000,
270
],
[
1391299200000,
381
],
[
1391904000000,
461
]
],
"name": "Type-1",
"type": "line",
"marker": {
"radius": 6
}
},
{
"data": [
[
1389484800000,
2
],
[
1390694400000,
3
],
[
1391904000000,
4
]
],
"name": "Type-2",
"type": "line",
"marker": {
"radius": 6
}
}
],
"xAxis": [
{
"type": "datetime",
"labels": {
"format": "{value:%Y-%m-%d}"
}
}
],
"subtitle": {
"text": null
},
"id": "chart14bc706da0fd",
"chart": {
"renderTo": "chart14bc706da0fd"
}
});
});
})(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