Incorporating html tags in shiny

shiny
1

I am trying to paste html tags in shiny dashboard but looks like it is not rendering . But the same html tags when tried in w3schools, it is working well. But it is not rendering in shiny. Basically i need to have a dot plot in shiny dashboard

library(shiny)

ui <- fluidPage(
  htmlOutput("graph1")
)

server <- function(input, output, session) {
  output$graph1 <- renderUI({
    HTML('<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>')
  })
}

shinyApp(ui, server)
2

You need to read in the dataset and create the graph using R. You can pass in various things using html, javascript, css, etc. but you are are trying to create a whole javascript dataset and graph.

That isn't how shiny works.

https://shiny.rstudio.com/tutorial/

3

I see :slight_smile: But Where I got confused it, The below code works Here also I am trying to create whole script but it is rendering

library(shiny)

ui <- fluidPage(
  htmlOutput("graph1")
)

server <- function(input, output, session) {
  output$graph1 <- renderUI({
    HTML('<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>')
  })
}

shinyApp(ui, server)
4

What you listed as working is simple static HTML.
Providing javascript and integration of the javascript with a wider shiny app is generally nontrivial, and the prefered/expected approach would be to create a htmlwidget.
Seems like someone has done that for chartjs and you may be able to leverage their effort.

http://tutuchan.github.io/chartjs/

5

If you really want to get your example working, as static html like nirgrahamuk mentioned, you can save the html portion separately and load it into your app using htmltools::includeHTML

library(shiny)
ui <- fluidPage(
  includeHTML('www/testhtml.html')
 )

server <- function(input, output, session) {
}
shinyApp(ui, server)
6

I understand . Thanks

7

But is there a way so that I can run the code I have asked. @williaml mentioned that is not how shiny works :slight_smile: So wanted to check if there is any other way to run my code (putting in entire javascript)

8

Well yea the entire JavaScript you have would be saved in that html file in my example above. The only difference is moving it from the server portion to the ui portion. Any reason why you want to keep it in a renderUI and not load in the beginning? Do you anticipate wanting to change variables in the JavaScript code with reactives from the app?

9

U got me right :slight_smile: Yes that is my goal. If this is possible, I can try putting these scripts in datatable and when i call DT table (escape = FALSE) , it reflects in the table as expected.
You can also see my another question Convert values into plot in a dataframe - #6 by arthur.t where I am trying to make use of kable package as alternate.

But if we can incorporate html scripts then we can drop kable pacakge :slight_smile:

10

Yea so I would ask that question upfront so others coming here for help with the same problem can easily identify it. Plus, this will inform the best solution possible. On that note, unfortunately I am not well versed in JavaScript so can't be of much help here.

11

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.