Highcharter sparklines in DataTables: proof of concept

nuno-agostinho commented 8 years ago

First of all, I know this issue is related to #132 and #141, but this is specific to inserting a Highchart object in a rendered DataTable. Watch the demo in action.

Highchart objects can't be rendered inside DataTables so this is what I did:

Create an Highchart object as usual (you can do almost whatever you want with it, except using JavaScript expressions) with the addition of the function hc_new_sparkline() to group data series
Convert the Highchart object to many HTML elements containing the Highchart's JSON code
Include one HTML element for each row of the DataTable
Every time the DataTable is drawn (for instance, when it changes pages), it calls a callback function that convert the JSON code in the HTML elements to interactive Highcharts

This allows to use all the advantages of DataTables with Highcharts. So, what do you think @jbkunst?

I put the code available in here if you want to take a look: https://github.com/nuno-agostinho/Highcharter-in-DataTables

Some of this was based on http://www.highcharts.com/demo/sparkline.

nuno-agostinho commented 8 years ago

Update: the previous implementation modified the hc$x$hc_opts$series from the hcobject. Now, a specific attribute of that object is modified instead to track which series belong to which sparkline and the hc$x$hc_opts$series is unchanged. This way, the hc object is still usable with the available functions of Highcharter.

jbkunst commented 8 years ago

@nuno-agostinho What I think? It's awesome! I'll fork it and play with your example and understand all the logic, then surely I'll talk to you with questions :B.

nuno-agostinho commented 8 years ago

@jbkunst Sure thing! :)

Just one more thing: when using the DT package for DataTables instead of the native Shiny implementation, the drawCallback function needs to pass JavaScript with the JS function instead of the I function.

mayeromain commented 6 years ago

@nuno-agostinho Thank you for this exemple it's awesome! I am trying to implement similar embeeded graph but using the DT::renderDataTable(datatable(variable)). I change the drawCallback=I("drawSparklines") by drawCallback=JS("drawSparklines") but it didn"t seems to work. Could you tell me what I should modifiy to make your exemple work? I have try this so far: Thank you! 👍

library(shiny) library(highcharter) library(jsonlite)

source("www/hc.R")

Define UI for application that calls JavaScript functions and renders the

DataTables

ui <- shinyUI(fluidPage(includeScript("www/functions.js"), titlePanel("Highcharts sparklines in DataTables"),
dataTableOutput("table"),
highchartOutput("") # Only used to load the Highcharts library
))

creat the table variable:

hc <- highchart()

for (i in 1:20) { hc <- hc %>% hc_chart(type="area")# %>%

hc_add_series(name="Pears", data=sample(100, 5))

data <- round(runif(12,-100,300)) dates <- month.name

hc <- hc %>% hc_xAxis(categories = dates) %>% hc_add_series(name="Oranges", data=data,showInLegend =T) %>% hc_new_sparkline()

}

dummy <- data.frame(replicate(5, sample(0:1, 20, rep=TRUE))) tableVaribale <- cbind(dummy, Sparkline=hchart(hc))

Define server logic required to draw the sparklines within the DataTable

server <- shinyServer(function(input, output) { output$table <- DT::renderDataTable({ datatable(tableVaribale) }, escape=FALSE, env=parent.frame(n=1), options=list(drawCallback=JS("drawSparklines"),pageLength=10)) })

Run the application

shinyApp(ui = ui, server = server)

nuno-agostinho commented 6 years ago

@mayeromain Instead of doing DT::renderDataTable({ datatable(tableVaribale) }, ... do without calling datatable, i.e. DT::renderDataTable({ tableVaribale }, ...

Does it work?

mayeromain commented 6 years ago

I found a solution using :

DT::datatable(tableVaribale ,options = list(drawCallback=JS("function drawSparklines() {
                                                                                                 var $data = $('sparkline'), sparkline, obj;

                                                                                                 for (var i = 0; i < $data.length; i += 1) {
                                                                                                 sparkline = $($data[i]);
                                                                                                 obj = sparkline.data('sparkline'); // Obtain the JSON code
                                                                                                 obj.tooltip.positioner = tooltipPos; // Correctly position the tooltip
                                                                                                 sparkline.highcharts('SparkLine', obj);
                                                                                                 }}")),escape = F)})

I needed the datatable to have some more option on it

nuno-agostinho commented 6 years ago

Okay @mayeromain, nice that you got it working! :)

mayeromain commented 6 years ago

yes and thank you for your answer :)

robertogilsaura commented 4 years ago

Hi guys, I need to show a datatable with highchart objects, but if I test your solution, it don't works for me. My code is very simple and I want to do it extensive for other examples:

library(highcharter)
library(DT)
library(htmltools)
x <- c(as.character(as.tags(hcspark(cumsum(rnorm(10))))),as.character(as.tags(hcspark(cumsum(rnorm(10))))))
y <- c(1,2)
df <- data.frame(x,y)
datatable(df)

how can I display this datatable with the respective chart in column x?

Thanks in advance !!!

jbkunst commented 4 years ago

Hi @robertogilsaura

I just saw the https://github.com/rstudio/DT/issues/410#issuecomment-297495765 comments in datatable package, then I used highcharter with that approach without problems:

Is an old comment/solution and I don't know if the funcion used are already in the htmlwidgets package.

library(DT)
library(htmltools)
library(dplyr)
library(sparkline)
library(leaflet)

# Helper functions (I think should be added to HTMLWidgets) ----
as.character.htmlwidget <- function(x){
  as.character(htmlwidgets:::toHTML(x))
}

staticRenderJS <- htmlwidgets::JS('function(){
    HTMLWidgets.staticRender()                                    
}')

# Helper function (I think should be added to DT)
widgetTable <- function(data, options = list(), deps = list(), ...){
  options$fnDrawCallback = staticRenderJS
  dt <- DT::datatable(data, options = options, escape = F, ...)
  dt %>% tagList(deps) %>% browsable
}

# Example 1: Sparkline
mtcars %>%
  group_by(cyl) %>%
  summarise(
    spk_line = as.character(sparkline(hp, type = 'bar'))
  ) %>%
  widgetTable(deps = htmlwidgets::getDependency("sparkline", "sparkline"))

mtcars %>%
  group_by(cyl) %>%
  summarise(
    spk_line = as.character(hchart(ts(hp), type = "line") %>% hc_size(height = "60px") %>% hc_add_theme(hc_theme_sparkline()))
  ) %>%
  widgetTable(deps = htmlwidgets::getDependency("highchart" , "highcharter")
)

robertogilsaura commented 4 years ago

Thanks Joshua, your help was important for the solution. Share my code ...

library(DT)
library(highcharter)

# Helper functions (I think should be added to HTMLWidgets)
as.character.htmlwidget <-
function(x){as.character(htmlwidgets:::toHTML(x))}
staticRenderJS <- htmlwidgets::JS('function(){HTMLWidgets.staticRender()}')
# Helper function (I think should be added to DT)
widgetTable <- function(data, options = list(), deps = list(), ...)
    {options$fnDrawCallback = staticRenderJS
    dt <- DT::datatable(data, options = options, escape = F, ...)
    dt %>% tagList(deps) %>% browsable}

x <-
c(as.character(as.tags(hcspark(cumsum(rnorm(10))))),as.character(as.tags(hcspark(cumsum(rnorm(10))))))
# simple example ...
y <- c(1,2)
df <- data.frame(x,y)
widgetTable(df, deps = htmlwidgets::getDependency("highchart" ,
"highcharter"))

Set of functions are very valuable for my work, I love highcharter 💯!!!

A lot of thanks...

PD. Un extraordinario trabajo con 'highcharter'. -.-.-.-.- *Roberto Gil Saura * https://www.facebook.com/InvestigaOnline-552640944937849/ https://twitter.com/robertogilsaura https://www.linkedin.com/in/robertogilsaura/

https://www.investigaonline.com/*

Este mensaje y los ficheros anexos que, en su caso, incorpore pueden contener información confidencial o de uso exclusivamente interno de investigaonline.com, sujeto a secreto profesional. Si usted lo recibe por error o considera que no es el destinatario del mismo, debe destruirlo y comunicar al emisor esta circunstancia, no pudiendo en ningún caso distribuir, divulgar ni copiar el mensaje.

El jue., 9 abr. 2020 a las 16:20, Joshua Kunst (notifications@github.com) escribió:

Hi @robertogilsaura https://github.com/robertogilsaura

I just saw the rstudio/DT#410 (comment) https://github.com/rstudio/DT/issues/410#issuecomment-297495765 comments in datatable package, then I used highcharter with that approach without problems:

Is an old comment/solution and I don't know if the funcion used are already in the htmlwidgets package.

library(DT) library(htmltools) library(dplyr) library(sparkline) library(leaflet)

Helper functions (I think should be added to HTMLWidgets) ----as.character.htmlwidget <- function(x){

as.character(htmlwidgets:::toHTML(x)) } staticRenderJS <- htmlwidgets::JS('function(){ HTMLWidgets.staticRender() }')

Helper function (I think should be added to DT)widgetTable <- function(data, options = list(), deps = list(), ...){

options$fnDrawCallback = staticRenderJS dt <- DT::datatable(data, options = options, escape = F, ...) dt %>% tagList(deps) %>% browsable }

Example 1: Sparklinemtcars %>%

group_by(cyl) %>% summarise( spk_line = as.character(sparkline(hp, type = 'bar')) ) %>% widgetTable(deps = htmlwidgets::getDependency("sparkline", "sparkline")) mtcars %>% group_by(cyl) %>% summarise( spk_line = as.character(hchart(ts(hp), type = "line") %>% hc_size(height = "60px") %>% hc_add_theme(hc_theme_sparkline())) ) %>% widgetTable(deps = htmlwidgets::getDependency("highchart" , "highcharter") )

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jbkunst/highcharter/issues/142#issuecomment-611554101, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWGQP5JQ2FIV5E3Y52SXKLRLXKT5ANCNFSM4CJLZJZQ .

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. Feel free to reopen it if you find it necessary.

jbkunst / highcharter

Highcharter sparklines in DataTables: proof of concept #142

Define UI for application that calls JavaScript functions and renders the

DataTables

creat the table variable:

hc_add_series(name="Pears", data=sample(100, 5))

Define server logic required to draw the sparklines within the DataTable

Run the application

https://www.investigaonline.com/*

Helper functions (I think should be added to HTMLWidgets) ----as.character.htmlwidget <- function(x){

Helper function (I think should be added to DT)widgetTable <- function(data, options = list(), deps = list(), ...){

Example 1: Sparklinemtcars %>%