Panel Event Listener not working in latest version

[debsush]

Hi,

I have 2 queries:

1. "Changed" is one of the events that I can use with a stockpanel. I have successfully implemented the below example in R using the v1.1.3. I am somehow not able to make it work with the latest version of rAmCharts

Reference Link: http://jsfiddle.net/amcharts/MTRjt/

Code:

stockpanels_Ls <<-  lapply(1:1, function(i)
        stockPanel(id=paste('fp',i,sep=""),
                   Title=i,
                   precision=2, 
                   drawingIconsEnabled=TRUE,
                   eraseAll=FALSE,
                   showCategoryAxis= TRUE,
                   autoDisplay=FALSE,
                   recalculateToPercents="never",                   
                   stockGraphs=stockgraphs_Ls
                   borderColor = "#ffffff",
                   columnWidth=.8,
                   thousandsSeparator=",",
                   borderAlpha = 1)%>>%
          setTrendLines(c(TrendlinersA,TrendlinersB))%>>%
          addValueAxis(valueAxis_obj1)%>>%
          addValueAxis(valueAxis_obj2)%>>%
          addListener('changed', 'function(event) {
                      var d = event.target.data[event.index].category; 
                      var ds = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate();
                      document.getElementById("date").innerHTML = ds;
                      }')%>>%           
          setGuides(c(guides_objP,guides_obj,guides_pivot))%>>%
          setStockLegend(periodValueTextComparing = '[[percents.value.close]]%',
                         periodValueTextRegular = '[[value.close]]')
          )  

1. Do you have an example of how can I use a chart Cursor event listener. I am specifically interested in the "draw" event which gets rendered once the user draws a trend line using the draw button.

Thank you SD

[bthieurmel]

the changed event still works, but not with your javascript code inside. Perhaps the structure of the data event change also with new amCharts version. You can see :

data('data_stock1')
pipeR::pipeline(
  amStockChart(startDuration = 0),
  setExport(),
  addDataSet(
    pipeR::pipeline(
      dataSet(title = 'first data set', categoryField = 'date',
              dataProvider = data_stock1$chartData1),
      addFieldMapping(fromField = 'value', toField = 'value'),
      addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'second data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData2),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'third data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData3),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'fourth data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData4),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addPanel(
    pipeR::pipeline(
      stockPanel(showCategoryAxis = FALSE, title = 'Value', percentHeight = 70),
      addStockGraph(id = 'g1', valueField = 'value', comparable = TRUE,
                    compareField = 'value', balloonText = '[[title]] =<b>[[value]]</b>',
                    compareGraphBalloonText = '[[title]] =<b>[[value]]</b>'),
      setStockLegend(periodValueTextComparing = '[[percents.value.close]]%',
                     periodValueTextRegular = '[[value.close]]'),
      addListener('changed', 'function(event) {
                  console.info(event);
                  alert(event);
                  }'))
  ),
  addPanel(
    pipeR::pipeline(stockPanel(title = 'Volume', percentHeight = 30),
                    addStockGraph(valueField = 'volume', type = 'column', fillAlphas = 1),
                    setStockLegend(periodValueTextRegular = '[[value.close]]'))
  ),
  setChartScrollbarSettings(graph = 'g1'),
  setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
                         cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
                         valueLineEnabled = TRUE, valueLineAlpha = 0.5),
  setPeriodSelector(
    pipeR::pipeline(periodSelector(position = 'left'),
                    addPeriod(period = 'DD', selected = TRUE, count = 7, label = '1 week'),
                    addPeriod(period = 'MAX', label = 'MAX'))
  ),
  setDataSetSelector(position = 'left'),
  setPanelsSettings(recalculateToPercents = FALSE)
)

[debsush]

Per your suggestion, I changed the JavaScript code inside the addListener. When I run it in shiny, I get the following error in the Google Chrome console:

Uncaught TypeError: instance.amchart.panels[indice].addListener is not a function

stockpanels_Ls <<-  lapply(1:1, function(i)
        stockPanel(id=paste('fp',i,sep=""),
                   Title=i,
                   precision=2, 
                   drawingIconsEnabled=TRUE,
                   eraseAll=FALSE,
                   showCategoryAxis= TRUE,
                   autoDisplay=FALSE,
                   recalculateToPercents="never",                   
                   stockGraphs=stockgraphs_Ls
                   borderColor = "#ffffff",
                   columnWidth=.8,
                   thousandsSeparator=",",
                   borderAlpha = 1)%>>%
          setTrendLines(c(TrendlinersA,TrendlinersB))%>>%
          addValueAxis(valueAxis_obj1)%>>%
          addValueAxis(valueAxis_obj2)%>>%
          addListener('changed', 'function(event) {
                  console.info(event);
                  alert(event);
                      }')%>>%           
          setGuides(c(guides_objP,guides_obj,guides_pivot))%>>%
          setStockLegend(periodValueTextComparing = '[[percents.value.close]]%',
                         periodValueTextRegular = '[[value.close]]')
          )  

I do agree that your example works in shiny as well but I am clueless why is it not working in my case. Since I will have multiple panels I am using the lapply function which suits my requirement. Please suggest my shortcomings based on the error message

[bthieurmel]

Seems to work with two panels for me. Perhaps you're not passing data / options well. Without a full simple example with your error, I can't help you.

require(rAmCharts)
require(shiny)

data('data_stock1')

g1 <- pipeR::pipeline(
  amStockChart(startDuration = 0),
  setExport(),
  addDataSet(
    pipeR::pipeline(
      dataSet(title = 'first data set', categoryField = 'date',
              dataProvider = data_stock1$chartData1),
      addFieldMapping(fromField = 'value', toField = 'value'),
      addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'second data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData2),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'third data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData3),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addDataSet(
    pipeR::pipeline(dataSet(title = 'fourth data set', categoryField = 'date',
                            dataProvider = data_stock1$chartData4),
                    addFieldMapping(fromField = 'value', toField = 'value'),
                    addFieldMapping(fromField = 'volume', toField = 'volume'))
  ),
  addPanel(
    pipeR::pipeline(
      stockPanel(showCategoryAxis = FALSE, title = 'Value', percentHeight = 70),
      addStockGraph(id = 'g1', valueField = 'value', comparable = TRUE,
                    compareField = 'value', balloonText = '[[title]] =<b>[[value]]</b>',
                    compareGraphBalloonText = '[[title]] =<b>[[value]]</b>'),
      setStockLegend(periodValueTextComparing = '[[percents.value.close]]%',
                     periodValueTextRegular = '[[value.close]]'),
      addListener('changed', 'function(event) {
                  console.info("panel1");
                  }'))
  ),
  addPanel(
    pipeR::pipeline(stockPanel(title = 'Volume', percentHeight = 30),
                    addStockGraph(valueField = 'volume', type = 'column', fillAlphas = 1),
                    setStockLegend(periodValueTextRegular = '[[value.close]]'),
                    addListener('changed', 'function(event) {
                  console.info("panel2");
                                }'))
  ),
  setChartScrollbarSettings(graph = 'g1'),
  setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
                         cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
                         valueLineEnabled = TRUE, valueLineAlpha = 0.5),
  setPeriodSelector(
    pipeR::pipeline(periodSelector(position = 'left'),
                    addPeriod(period = 'DD', selected = TRUE, count = 7, label = '1 week'),
                    addPeriod(period = 'MAX', label = 'MAX'))
  ),
  setDataSetSelector(position = 'left'),
  setPanelsSettings(recalculateToPercents = FALSE)
  )

server <- function(input, output) {
  output$p <- renderAmCharts({
    g1
  })
}

ui <- fluidPage(
  amChartsOutput("p")
)

shinyApp(ui = ui, server = server)

[debsush]

I agree. I will provide the code of a simple example over the weekend