datastorm-open / rAmCharts

API for Amcharts
48 stars 17 forks source link

Functionality to create Time-lapse animation in rAmCharts #80

Closed arun700004 closed 6 years ago

arun700004 commented 6 years ago

Hi,

I am an ardent user of rAmCharts, use various amCharts in the context of R-Shiny framework through the package rAmCharts.

I thank you for such a great package for interactive plotting.

In my latest Shiny implementation, I needed to use a Time-lapse animation for my time-series data and upon few web-searches I came across a Github implementation of animation in https://github.com/amcharts/animate

While above link demonstrates various implementations of animations for amCharts, I found below points are not available, which I needed most :

  1. How to implement such animation in R/Shiny through the package rAmCharts?
  2. How to create a time-lapse animation for implementation of R/Shiny

My definition of Time-lapse animation

I thought I should be clear on what I mean as Time-lapse animation. Just to explain further, let say we create a Stack-bar chart with 2 categories (Category A : 40% and Category B 60%). Now there could be possibility that those values of A and B (i.e. 40% and 60% in this example) would change over time. So assume my previous ratio was for the Year 2000, and in 2001 that Category-values become 30% and 70%, and in 2002 that again changed to 20% and 80% respectively, and so on.

I wanted to create a Time-lapse animation to show interactively in R, how such change had happened over many years.

Any support/suggestion to find out if there is any existing functionality in rAmCharts to create such Time-lapse animation, or if not is there any plan to bring in such functionality - would be highly appreciated.

Looking for your valuable feedback.

bthieurmel commented 6 years ago

Hi,

I've just add a new function add_animate_dependency on new 2.1.7 on github, and this is a simple example to do that :

library(shiny)
library(rAmCharts)
library(shinyjs)
library(magrittr)

# data pie
data("data_pie")

# set color
data_pie$color <- c("red", "blue", "purple", "yellow", "green")

# js code to update data
jsCode <- "shinyjs.udpateData = function(params){
  var chart = getAmChart(params[0]);
  if(chart !== undefined){
    chart.animateData(params[1], { duration: params[2] });
  }
}"

# Define UI for application that draws a histogram
ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  amChartsOutput("pie"),
  actionButton("go", "go")
)

# Define server logic required to draw a histogram
server <- function(input, output) {

   output$pie <- renderAmCharts({
     gr <- amPie(data = data_pie)
     # add animate dependencies
     plot(gr) %>% add_animate_dependency()
   })

   observe({
     input$go
     new_data <- data_pie
     new_data$value <- new_data$value[sample(1:5, 5, replace = F)]
     js$udpateData("pie", jsonlite::toJSON(new_data), 2000)
   })
}

# Run the application 
shinyApp(ui = ui, server = server)
arun700004 commented 6 years ago

Thanks Thieurmel,

While this is workable, is it however possible to have a Control bar to control the animation?

Having just a button may not be really very convenient from User perspective since Use cant see the current Position of the Animation with respect to entire Animation-range, neither User can stop midway and start from the beginning.

Appreciate your view. Thanks,

On 17 April 2018 at 13:07, B. Thieurmel notifications@github.com wrote:

Hi,

I've just add a new function add_animate_dependency on new 2.1.7 on github, and this is a simple example to do that :

library(shiny) library(rAmCharts) library(shinyjs) library(magrittr)

data pie

data("data_pie")

set color

data_pie$color <- c("red", "blue", "purple", "yellow", "green")

js code to update data

jsCode <- "shinyjs.udpateData = function(params){ var chart = getAmChart(params[0]); if(chart !== undefined){ chart.animateData(params[1], { duration: params[2] }); } }"

Define UI for application that draws a histogram

ui <- fluidPage( useShinyjs(), extendShinyjs(text = jsCode), amChartsOutput("pie"), actionButton("go", "go") )

Define server logic required to draw a histogram

server <- function(input, output) {

output$pie <- renderAmCharts({ gr <- amPie(data = data_pie)

add animate dependencies

 plot(gr) %>% add_animate_dependency()

})

observe({ input$go new_data <- data_pie new_data$value <- new_data$value[sample(1:5, 5, replace = F)] js$udpateData("pie", jsonlite::toJSON(new_data), 2000) }) }

Run the application

shinyApp(ui = ui, server = server)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/datastorm-open/rAmCharts/issues/80#issuecomment-381880676, or mute the thread https://github.com/notifications/unsubscribe-auth/Ako_zfm1BBLx1lfGx1R99sY-YcOQhO3Oks5tpZu_gaJpZM4TWBsP .

bthieurmel commented 6 years ago

You just have to code this using shiny.