Styjun

I am trying to create a pop-up in my Shiny app, which should hold a simple plot created using AmChart. Below is my bare shell Shiny app without any plot:

runApp(list(
 ui = bootstrapPage(
 tags$style(type = 'text/css', 
 ".wrap 
 position: absolute;
 overflow: hidden;
 top: 10%;
 right: 10%;
 bottom: 85px;
 left: 10%;
 padding: 10px 50px;
 display: block;
 border-radius: 4px;
 transform: translateY(20px);
 transition: all 0.5s;
 visibility: hidden;
 "),
 tags$style(type = 'text/css', 
 "
 .wrap .content 
 opacity: 0;
 "),
 tags$style(type = 'text/css', 
 "
 .wrap:before 
 position: absolute;
 width: 1px;
 height: 1px;
 background: white;
 content: '';
 bottom: 10px;
 left: 50%;
 top: 95%;
 color: #fff;
 border-radius: 50%;
 -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
 transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
 "),
 tags$style(type = 'text/css', 
 "
 .wrap.active 
 display: block;
 visibility: visible;
 box-shadow: 2px 3px 16px silver;
 transition: all 600ms;
 transform: translateY(0px);
 transition: all 0.5s;
 "),
 tags$style(type = 'text/css', 
 "
 .wrap.active:before 
 height: 2000px;
 width: 2000px;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 margin-left: -1000px;
 margin-top: -1000px;
 display: block;
 -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
 transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
 "),
 tags$style(type = 'text/css', 
 "
 .wrap.active .content 
 position: relative;
 opacity: 1;
 font-size: 30px;
 transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
 "),

 div(id = "xxx", style = 'background: rgba(0,0,0,.2); height: 20px; width: 100%', htmlOutput("xxx_Output"))
 ),
 server = function(input, output) 
 output$xxx_Output = renderText(
 paste("<script>
 $('#xxx').on('click', function() 
 $('.wrap').toggleClass('active');

 return false;
 );
 </script>


 <div class = 'wrap'>
 <div class = 'contentF' id = 'content_ID'>

 </div>
 </div>"


 , 
 sep = "")

 )
 
 ))

This works perfectly fine, however, if I include amChart (as in my Codepen: https://codepen.io/Volabos/pen/MxdRRd?&editable=true) within the paste() function, that chart is not visible at all.

I am aware of amChart API for R/Shiny i.e. rAmChart package, however which may require bsModal() function from shinyBS, but I want to avoid taking this route.

I would like to know why my approach is not working where I wanted to embed AmChart JS code within HTML body and render it in the App body. What can be done to achieve this in above way?

Much appreciate for any pointer.

Thanks,