datastorm-open / rAmCharts

API for Amcharts
48 stars 16 forks source link

Display message when amCharts renders a chart onto screen #81

Closed ghost closed 6 years ago

ghost commented 6 years ago

Hi,

I have reported this issue in Stackexchange, however, no satisfactory answer is received so far. So reporting this issue here as well hoping to get some pointer on the issue

I am wondering what is the correct way to display a Status message while amCharts plots chart on the screen. I am using amCharts in my Shiny app with the package rAmCharts, and my plot consists of huge number of data. In local server chart is plotted quite quickly, however, when I deploy my app onto AWS, rendering chart takes a considerable amount of time. I, therefore, plan to display some message to let the user know something is happening.

library(shiny)
library(rAmCharts) 
require(purrr)
library(htmlwidgets)
library(shinyjs)

 ui = fluidPage(
    inlineCSS(" #curtain {
                  background: rgba(0, 0, 0, 0.8);
                  color: #fff;
                  font-size: 25px;
                  position: absolute;
                  top: 1%;
                  width: 50%;
                  text-align: center;
                  z-index: 1000;
                }"),

    div(id="chart-container", 
        div(id="chart-div"),
        div(id="curtain", "Chart is loading...")),

    amChartsOutput("amPLot", height = "485px")                              

)

server = function(input, output, session) {
     PDF = density(rnorm(1000000))
     Dat = data.frame(x = PDF$x, y = PDF$y)

     Plot = amXYChart(x = Dat$x, y = Dat$y) %>%
            setDataProvider(dataProvider = Dat, keepNA = TRUE) %>%
            addGraph(xField = "x", yField = "y", lineColor = "#058e54", fillAlphas = 0.5, bullet = "round", lineThickness = 1, bulletColor = "transparent")
    Plot@listeners = list(event = 'rendered', method = JS("function(e) {
                                                              document.getElementById('curtain').style.display = 'none';
                                                            }"))    

    output$amPLot = renderAmCharts(Plot)
}

shinyApp(ui = ui, server = server)

However code doesnt seem to be working as intended, as I failed to see any message while chart is beling plotted onto screen.

I would appreciate if someone guide me through the right approach.

Thanks,

bthieurmel commented 6 years ago

Hi,

You have to use directly the name of the event :

Plot@listeners = list(rendered = JS("function(e) {
    document.getElementById('curtain').style.display = 'none';
}"))

Or use addListener function :

  Plot = amXYChart(x = Dat$x, y = Dat$y) %>%
    setDataProvider(dataProvider = Dat, keepNA = TRUE) %>%
    addGraph(xField = "x", yField = "y", lineColor = "#058e54", 
    fillAlphas = 0.5, bullet = "round", lineThickness = 1, bulletColor = "transparent") %>%
    addListener(name = "rendered", expression = "function(e) {
    document.getElementById('curtain').style.display = 'none';
}")