Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active August 29, 2015 14:09
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 timelyportfolio/b826d93166334528f226 to your computer and use it in GitHub Desktop.
Save timelyportfolio/b826d93166334528f226 to your computer and use it in GitHub Desktop.
rCharts + metrics.js

the quickest but older way to rCharts + metrics.js

library(rCharts)
library(jsonlite)
library(xts)

#set up rCharts
#key is to define how to handle the data
rChartsMetrics <- setRefClass(
  'rChartsMetrics',
  contains = 'Dimple',
  methods = list(
    initialize = function(){
      callSuper(); 
    },
    getPayload = function (chartId) {
      # use jsonlite
      data = jsonlite::toJSON( params$data )
      chart = toChain(params$chart, 'myChart')
      opts = toJSON2(params[!(names(params) %in% c('data', 'chart'))])
      list(opts = opts, data = data, chart = chart, chartId = chartId)
    },
    render = function (chartId = NULL, cdn = F, static = T, standalone = F) 
    {
      params$dom <<- chartId %||% params$dom
      params$height <<- params$options$height
      params$width <<- params$options$width
      template = read_template(getOption("RCHART_TEMPLATE", templates$page))
      assets = Map("c", get_assets(LIB, static = static, cdn = cdn, 
                                   standalone = standalone), html_assets)
      html = render_template(
        template
        , list(
          params = params
          , assets = assets
          , chartId = params$dom
          , width = params$options$width
          , height = params$options$height
          , script = .self$html(params$dom)
          , CODE = srccode
          , lib = LIB$name
          , tObj = tObj
          , container = container
        )
        , partials = list(
          chartDiv = templates$chartDiv
          , afterScript = templates$afterScript %||% "<script></script>"
        )
      )
    }
  )
)


# now make a rChart with our rChartsMetrics

rM <- rChartsMetrics$new()
rM$setLib('http://timelyportfolio.github.io/rCharts_metrics')
#rM$setLib('.')
rM$lib = 'metrics'
rM$LIB$name = 'metrics'
rM$setTemplate(
  script = "
    <script>

    var opts = {{{ opts }}};
    opts.options.data =  {{{ data }}};
    opts.options.target = '#' + opts.dom
    
    data_graphic(
      opts.options
    )
    </script>
  "
)


rM$set(
  data = jsonlite::fromJSON("http://metricsgraphicsjs.org/data/ufo-sightings.json")
  ,options = list(
    x_accessor = "year"
    ,y_accessor = "sightings"
    ,width = 600
    ,height = 400
    ,title = 'UFO Sightings'
  )
)
rM
library(rCharts)
library(jsonlite)
library(xts)
#set up rCharts
#key is to define how to handle the data
rChartsMetrics <- setRefClass(
'rChartsMetrics',
contains = 'Dimple',
methods = list(
initialize = function(){
callSuper();
},
getPayload = function (chartId) {
# use jsonlite
data = jsonlite::toJSON( params$data )
chart = toChain(params$chart, 'myChart')
opts = toJSON2(params[!(names(params) %in% c('data', 'chart'))])
list(opts = opts, data = data, chart = chart, chartId = chartId)
},
render = function (chartId = NULL, cdn = F, static = T, standalone = F)
{
params$dom <<- chartId %||% params$dom
params$height <<- params$options$height
params$width <<- params$options$width
template = read_template(getOption("RCHART_TEMPLATE", templates$page))
assets = Map("c", get_assets(LIB, static = static, cdn = cdn,
standalone = standalone), html_assets)
html = render_template(
template
, list(
params = params
, assets = assets
, chartId = params$dom
, width = params$options$width
, height = params$options$height
, script = .self$html(params$dom)
, CODE = srccode
, lib = LIB$name
, tObj = tObj
, container = container
)
, partials = list(
chartDiv = templates$chartDiv
, afterScript = templates$afterScript %||% "<script></script>"
)
)
}
)
)
# now make a rChart with our rChartsMetrics
rM <- rChartsMetrics$new()
rM$setLib('http://timelyportfolio.github.io/rCharts_metrics')
#rM$setLib('.')
rM$lib = 'metrics'
rM$LIB$name = 'metrics'
rM$setTemplate(
script = "
<script>
var opts = {{{ opts }}};
opts.options.data = {{{ data }}};
opts.options.target = '#' + opts.dom
data_graphic(
opts.options
)
</script>
"
)
rM$set(
data = jsonlite::fromJSON("http://metricsgraphicsjs.org/data/ufo-sightings.json")
,options = list(
x_accessor = "year"
,y_accessor = "sightings"
,width = 600
,height = 400
,title = 'UFO Sightings'
)
)
rM
#rM$publish( "rCharts + metrics.js", id = "b826d93166334528f226" )
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='http://timelyportfolio.github.io/rCharts_metrics/css/metrics-graphics.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://timelyportfolio.github.io/rCharts_metrics/js/metrics-graphics.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 400px;
}
</style>
</head>
<body >
<div id = 'chart163c322e601' class = 'rChart metrics'></div>
<script>
var opts = {
"dom": "chart163c322e601",
"width": 600,
"height": 400,
"xAxis": {
"type": "addCategoryAxis",
"showPercent": false
},
"yAxis": {
"type": "addMeasureAxis",
"showPercent": false
},
"zAxis": [],
"colorAxis": [],
"defaultColors": [],
"layers": [],
"legend": [],
"controls": [],
"filters": [],
"options": {
"x_accessor": "year",
"y_accessor": "sightings",
"width": 600,
"height": 400,
"title": "UFO Sightings"
},
"id": "chart163c322e601"
};
opts.options.data = [{"year":"1945","sightings":6},{"year":"1946","sightings":8},{"year":"1947","sightings":34},{"year":"1948","sightings":8},{"year":"1949","sightings":15},{"year":"1950","sightings":25},{"year":"1951","sightings":20},{"year":"1952","sightings":48},{"year":"1953","sightings":34},{"year":"1954","sightings":50},{"year":"1955","sightings":31},{"year":"1956","sightings":38},{"year":"1957","sightings":67},{"year":"1958","sightings":40},{"year":"1959","sightings":47},{"year":"1960","sightings":64},{"year":"1961","sightings":39},{"year":"1962","sightings":55},{"year":"1963","sightings":75},{"year":"1964","sightings":77},{"year":"1965","sightings":167},{"year":"1966","sightings":169},{"year":"1967","sightings":178},{"year":"1968","sightings":183},{"year":"1969","sightings":138},{"year":"1970","sightings":126},{"year":"1971","sightings":110},{"year":"1972","sightings":146},{"year":"1973","sightings":209},{"year":"1974","sightings":241},{"year":"1975","sightings":279},{"year":"1976","sightings":246},{"year":"1977","sightings":239},{"year":"1978","sightings":301},{"year":"1979","sightings":221},{"year":"1980","sightings":211},{"year":"1981","sightings":146},{"year":"1982","sightings":182},{"year":"1983","sightings":132},{"year":"1984","sightings":172},{"year":"1985","sightings":192},{"year":"1986","sightings":173},{"year":"1987","sightings":193},{"year":"1988","sightings":203},{"year":"1989","sightings":220},{"year":"1990","sightings":217},{"year":"1991","sightings":210},{"year":"1992","sightings":228},{"year":"1993","sightings":285},{"year":"1994","sightings":381},{"year":"1995","sightings":1336},{"year":"1996","sightings":862},{"year":"1997","sightings":1248},{"year":"1998","sightings":1812},{"year":"1999","sightings":2906},{"year":"2000","sightings":2780},{"year":"2001","sightings":3105},{"year":"2002","sightings":3176},{"year":"2003","sightings":3896},{"year":"2004","sightings":4208},{"year":"2005","sightings":3996},{"year":"2006","sightings":3590},{"year":"2007","sightings":4195},{"year":"2008","sightings":4705},{"year":"2009","sightings":4297},{"year":"2010","sightings":2531}];
opts.options.target = '#' + opts.dom
data_graphic(
opts.options
)
</script>
<script></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment