How to use composite bar in markdown? about sparkline

I do not know Java. Is there possibility to create composite bar in R ?

[timelyportfolio]

@tazik, I'll make this much better.

With existing sparkline using onRender

With the newest Github version of htmlwidgets,

devtools::install_github("ramnathv/htmlwidgets")

we get onRender, so we could do something like this.

# hack to provide composite charts
# https://github.com/htmlwidgets/sparkline/issues/13

library(htmlwidgets)
library(sparkline)

onRender(
  sparkline(
    c(5,4,5,-2,0,3),
    type='bar',
    barColor="#aaf",
    chartRangeMin=-5,
    chartRangeMax=10
  ),
"
function(el,x){
$(el).sparkline(
  [4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7],
  {
    composite: true,
    fillColor: false,
    lineColor: 'red',
    chartRangeMin: -5,
    chartRangeMax: 10
  }
)
}
"
)

With hack in experimental forked branch

# here is another way if we use experimental forked branch
#  but I still don't like this way of accomplishing
#  I think a addComposite function would be better

# first install from Github
#devtools::install_github("timelyportfolio/sparkline@update/sparkline")

library(sparkline)
library(htmltools)

sl1 <- sparkline(
  c(5,4,5,-2,0,3),
  type='bar',
  barColor="#aaf",
  chartRangeMin=-5,
  chartRangeMax=10,
  # set an id that will make it easier to refer
  #  in the next sparkline
  elementId="sparkline-for-composite"
)
sl2 <- sparkline(
  c(4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7),
  type="line",
  fillColor = FALSE,
  lineColor ='red',
  chartRangeMin = -5,
  chartRangeMax = 10,
  # will need to set composite = TRUE
  composite = TRUE,
  # and set renderSelector to the id we set in the previous sparkline
  renderSelector = "#sparkline-for-composite"
)
browsable(tagList(sl1,sl2))

With helper function and experimental forked branch

# first install from Github
#devtools::install_github("timelyportfolio/sparkline@update/sparkline")
sl1 <- sparkline(
  c(5,4,5,-2,0,3),
  type='bar',
  barColor="#aaf",
  chartRangeMin=-5,
  chartRangeMax=10
)

# try to make a function to add a composite to an existing sparkline
#  of course if we did this for real, we would make much more robust
#  also, I added some JavaScript code to handle composites
addComposite <- function(sparkline=NULL, ...){
  stopifnot(!is.null(sparkline),inherits(sparkline,"sparkline"))

  sparkline_options <- list(...)
  sparkline_options$options$composite <- TRUE
  sparkline$x$composites[[length(sparkline$x$composites)+1]] <- sparkline_options
  return(sparkline)
}

addComposite(
  sl1,
  values=c(4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7),
  options = list(
    type="line",
    fillColor = FALSE,
    lineColor ='red',
    chartRangeMin = -5,
    chartRangeMax = 10
  )
)

[ramnathv]

Can you point me to the equivalent javascript code?

@ramnathv
I'd like to do to something like this:
$('#sparkline').sparkline([5, 4, 5, -2, 0, 3], { type: 'bar', barColor: '#aaf' }); $('#sparkline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], { composite: true, fillColor: false, lineColor: 'red' });

with that kind of code:
{"x":{"values":[0,12,22,38,20,32,32,21],"options":{"type":"bar", "height":20,"width":60},"width":60,"height":20},"evals":[]} {"x":{"values":[0,12,22,38,20,32,32,21],"options":{"composite":true, "type":"line", "height":20,"width":60},"width":60,"height":20},"evals":[]}

but I do not understand syntax. Can you help me?

[ramnathv]

I get it now. This package does not support composite plots currently, but I have a pending PR that will make that possible. I don't have an ETA on when those changes would get merged in, but when I do merge them in, I will leave a note for you here.

Thanks for response. I can't wait you drop this feature. It'll be very useful for me!

[jaredlander]

Did this get merged?

[danklotz]

Hm... isn't there any possibility to do in the meantime?

[timelyportfolio]

@ramnathv, I would love to see this. Will push forward with this unless you tell me no :) I know yours will be way more elegant though.

[timelyportfolio]

cc @diegocgaona, if interested in potential new sparkline functionality.

[timelyportfolio]

As I work through this, I think a composite function addComposite like this would be more flexible.

# first install from Github
#devtools::install_github("timelyportfolio/sparkline@update/sparkline")
sl1 <- sparkline(
  c(5,4,5,-2,0,3),
  type='bar',
  barColor="#aaf",
  chartRangeMin=-5,
  chartRangeMax=10,
  # set an id that will make it easier to refer
  #  in the next sparkline
  elementId="sparkline-for-composite"
)
sl2 <- sparkline(
  c(4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7),
  type="line",
  fillColor = FALSE,
  lineColor ='red',
  chartRangeMin = -5,
  chartRangeMax = 10,
  # will need to set composite = TRUE
  composite = TRUE,
  # and set renderSelector to the id we set in the previous sparkline
  renderSelector = "#sparkline-for-composite"
)

# try to make a function to add a composite to an existing sparkline
addComposite <- function(sparkline=NULL, sparklineToAdd=NULL, ...){
  stopifnot(
    !is.null(sparkline),
    inherits(sparkline,"sparkline")
  )

  sparkline_options <- list()

  # if a sparkline is provided to add
  #   then get its values and options
  if(!is.null(sparklineToAdd)) {
    sparkline_options <- list(
      values = sparklineToAdd$x$values,
      options = sparklineToAdd$x$options
    )
  }

  # if ... are provided
  #   then use these for values and options
  if(length(list(...)) > 0) {
    sparkline_options <- modifyList(sparkline_options,list(...))
  }

  sparkline_options$options$composite <- TRUE
  sparkline$x$composites[[length(sparkline$x$composites)+1]] <- sparkline_options
  return(sparkline)
}

# add sparkline as a composite
addComposite(sl1, sl2)

# add values and options as a composite
addComposite(
  sl1,
  values=c(4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7),
  options = list(
    type="line",
    fillColor = FALSE,
    lineColor ='red',
    chartRangeMin = -5,
    chartRangeMax = 10
  )
)

# add combination of sparkline and options as a composite
addComposite(
  sl1,
  sl2,
  options = list(
    type="box"
  )
)

[diegocgaona]

Hi @timelyportfolio , sorry for this dumb question, but how can I install your dev version to test?
thanks!

EDIT: Sorry for may lack of attention, I was in my work and didn't read the code, now I see the fork to install

Now I tested it, and I loved it! When you finish the update I will modify my project to use it in several graphs.

One doubt, how I set the size of the spark? I tried some like this (as I did in the without composite) but the size don't change

sl1 <- sparkline(
    c(5,4,5,-2,0,3),
    type='bar',
    barColor="#aaf",
    chartRangeMin=-5,
    chartRangeMax=10,
    width = 200, # the normal argument to set the width
    height = 32, # the normal argument to set the heigth
    # set an id that will make it easier to refer
    #  in the next sparkline
    elementId="sparkline-for-composite"
)
sl2 <- sparkline(
    c(4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7),
    type="line",
    fillColor = FALSE,
    lineColor ='red',
    chartRangeMin = -5,
    chartRangeMax = 10,
    width = 200,
    height = 32,
    # will need to set composite = TRUE
    composite = TRUE,
    # and set renderSelector to the id we set in the previous sparkline
    renderSelector = "#sparkline-for-composite"
)

# add combination of sparkline and options as a composite
addComposite(
    sl1,
    sl2,
    options = list(
        type="line",
        width=200, # I tried with this line and without, but I had the same result, the default size.
        heigth=32 # I tried with this line and without, but I had the same result, the default size.
        )
)

Thanks!!

[timelyportfolio]

I will close this for now. Please reopen if not addressed. I will open a separate issue for composites of different types no longer lining up.