how to render HTML plot in shiny app

Question

I want to render HTML plot in shiny app.
I refer radar chart from http://www.buildingwidgets.com/blog/2015/12/9/week-49-d3radarr

But this plot doesn't render to shiny app.

I refer this question plotGoogleMaps in shiny app

But it's kind of different.

Is there way to render this plot in shiny app??

My code is following:

library(shiny)
library(d3radarR)
library(jsonlite)

dataset = jsonlite::fromJSON(
'
  [  
    {  
      "key":"Nokia Smartphone",
      "values":[  
        {  "axis":"Battery Life", "value":0.26 }, {  "axis":"Brand", "value":0.10 },
        {  "axis":"Contract Cost", "value":0.30 }, {  "axis":"Design And Quality", "value":0.14 },
        {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.04 },
        {  "axis":"Price Of Device", "value":0.41 }, {  "axis":"To Be A Smartphone", "value":0.30 }
        ]
    },
    {  
      "key":"Samsung",
      "values":[  
        {  "axis":"Battery Life", "value":0.27 }, {  "axis":"Brand", "value":0.16 },
        {  "axis":"Contract Cost", "value":0.35 }, {  "axis":"Design And Quality", "value":0.13 },
        {  "axis":"Have Internet Connectivity", "value":0.20 }, {  "axis":"Large Screen", "value":0.13 },
        {  "axis":"Price Of Device", "value":0.35 }, {  "axis":"To Be A Smartphone", "value":0.38 }
        ]
    },
    {  
      "key":"iPhone",
      "values":[  
        {  "axis":"Battery Life", "value":0.22 }, {  "axis":"Brand", "value":0.28 },
        {  "axis":"Contract Cost", "value":0.29 }, {  "axis":"Design And Quality", "value":0.17 },
        {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.02 },
        {  "axis":"Price Of Device", "value":0.21 }, {  "axis":"To Be A Smartphone", "value":0.50 }
        ]
    }
  ]
',
  simplifyDataFrame = FALSE
) 


ui <- pageWithSidebar(

  headerPanel("Rader Chart"),

  sidebarPanel(

    selectInput('tmp1', 'Tmp1', c(None='.')),
    selectInput('tmp2', 'Tmp2', c(None='.'))

  ),

  mainPanel(
    tabPanel("Plot", uiOutput('plot'))
  )
)

server <- function(input, output) {

  output$plot <- renderUI({
    d3radar(json_data)
  })
}

shinyApp(ui=ui, server=server)

Answer 1

You need to use specific shiny function from d3radarR package :

dataset = jsonlite::fromJSON(
  '
  [  
  {  
  "key":"Nokia Smartphone",
  "values":[  
  {  "axis":"Battery Life", "value":0.26 }, {  "axis":"Brand", "value":0.10 },
  {  "axis":"Contract Cost", "value":0.30 }, {  "axis":"Design And Quality", "value":0.14 },
  {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.04 },
  {  "axis":"Price Of Device", "value":0.41 }, {  "axis":"To Be A Smartphone", "value":0.30 }
  ]
  },
  {  
  "key":"Samsung",
  "values":[  
  {  "axis":"Battery Life", "value":0.27 }, {  "axis":"Brand", "value":0.16 },
  {  "axis":"Contract Cost", "value":0.35 }, {  "axis":"Design And Quality", "value":0.13 },
  {  "axis":"Have Internet Connectivity", "value":0.20 }, {  "axis":"Large Screen", "value":0.13 },
  {  "axis":"Price Of Device", "value":0.35 }, {  "axis":"To Be A Smartphone", "value":0.38 }
  ]
  },
  {  
  "key":"iPhone",
  "values":[  
  {  "axis":"Battery Life", "value":0.22 }, {  "axis":"Brand", "value":0.28 },
  {  "axis":"Contract Cost", "value":0.29 }, {  "axis":"Design And Quality", "value":0.17 },
  {  "axis":"Have Internet Connectivity", "value":0.22 }, {  "axis":"Large Screen", "value":0.02 },
  {  "axis":"Price Of Device", "value":0.21 }, {  "axis":"To Be A Smartphone", "value":0.50 }
  ]
  }
  ]
  ',
  simplifyDataFrame = FALSE
) 


ui <- pageWithSidebar(

  headerPanel("Rader Chart"),

  sidebarPanel(

    selectInput('tmp1', 'Tmp1', c(None='.')),
    selectInput('tmp2', 'Tmp2', c(None='.'))

  ),

  mainPanel(
    tabPanel("Plot", d3radarOutput('plot'))
  )
)

server <- function(input, output) {

  output$plot <- renderD3radar({
    d3radar(dataset)
  })
}

shinyApp(ui=ui, server=server)