Including javascript for google chart

shiny
1

I'm trying to directly include some code from google charts to learn how to embed them within my app without the overhead of the google charts library. Below are my ui, server, and HTML files. The HTML is saved in a file test.html in an HTML directory under my main app. When I double click the html file, everything I expect to be in that file appears in my browser. When I run my shiny app some of the html appears, but the charts do not.

I have also tried saving the javascript into its own .js file under a www directory, but no luck with that either.

Any suggestions on how to make sure the charts appear when the html is displayed when running from shiny?

Here is a minimal ui and server file to use for my problem:

 ui <- fluidPage(
titlePanel("Hello!"),
sidebarLayout(
	sidebarPanel(
		h1('Hello')
	),
# Main panel for displaying outputs ----
mainPanel(
	uiOutput('htmlTest')
	)
)
 )

 server <- function(input, output) {
output$htmlTest <- renderUI({
	includeHTML('HTML/test.html')
}) 	
}

The complete HTML File

 <center>
 <h1>Testing</h1>
 </center>

 <h2> Testing </h2>

<p>
Text here to read
</p>


	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

	<script type="text/javascript">
	  google.charts.load('current', {'packages':['gauge']});
	  google.charts.setOnLoadCallback(drawChart);

	  function drawChart() {
	  
		var test = 500

		var data = google.visualization.arrayToDataTable([
		  ['Label', 'Value'],
		  ['Memory', test],
		  ['CPU', 55],
		  ['Network', 68]
		]);

		var options = {
		  width: 400, height: 120,
		  redFrom: 75, redTo: 100,
		  yellowFrom:50, yellowTo: 75,
		  minorTicks: 10
		};

		var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

		chart.draw(data, options);

		setInterval(function() {
		  data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
		  chart.draw(data, options);
		}, 10000);
		setInterval(function() {
		  data.setValue(1, 1, 40 + Math.round(60 * Math.random()) );
		  chart.draw(data, options);
		}, 100);
		setInterval(function() {
		  data.setValue(2, 1, 10 );
		  chart.draw(data, options);
		}, 100);
	  }
	</script>

	<div id="chart_div" style="width: 400px; height: 120px;"></div>
2

Hey @hdoran,

For htmlTemplates to work, the test.html has to be located in the same directory as the shiny files (i.e., the same level as your ui.Rand server.R files or the app.R file). I do not think there is a way around this using shiny. This would allow you to link the html file directly in the ui using the htmlTemplate function.

ui <- htmlTemplate("test.html")

You will need to adjust the html file a bit to make sure shiny dependencies are injected into your html file.

<!DOCTYPE html>
<html>
    <head>
        {{ headContent() }}
    </head>
    <body>
        <!-- your content here -->
    </body>
</html>

If you want to go the custom build route, you could use the plumber package. This would allow you to create your own APIs and define custom routing using the mount() function.

Hope that helps!

3

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