Google has some nifty charts. I'm sure there's nice R wrapper packages to do what I want but I want to learn how to include a google chart myself as it will likely be more flexible than an R wrapper for including a google chart.
Below is an .Rmd that has a donut function to produce the donut from Google chart gallery. The function outputs a code as expected seen below but to actually knit this results in the following pandoc conversion error. How do I include the google chart code properly in an Rmarkdown .Rmd file?
Error
output file: ttt.knit.md
pandoc.exe: Could not fetch https://www.gstatic.com/charts/loader.js
HttpExceptionRequest Request {
host = "www.gstatic.com"
port = 443
secure = True
requestHeaders = []
path = "/charts/loader.js"
queryString = ""
method = "GET"
proxy = Nothing
rawBody = False
redirectCount = 10
responseTimeout = ResponseTimeoutDefault
requestVersion = HTTP/1.1
}
(InternalException (HandshakeFailed Error_EOF))
Error: pandoc document conversion failed with error 67
In addition: Warning message:
running command '"C:/Program Files/RStudio/bin/pandoc/pandoc" +RTS -K512m -RTS ttt.utf8.md --to html --from markdown+autolink_bare_uris+ascii_identifiers+tex_math_single_backslash --output ttt.html --smart --email-obfuscation none --self-contained --standalone --section-divs --template "C:\R\R-3.3.2\library\rmarkdown\rmd\h\default.html" --no-highlight --variable highlightjs=1 --variable "theme:bootstrap" --include-in-header "C:\Users\trinker\AppData\Local\Temp\RtmpWI5M7o\rmarkdown-str5910399322d6.html" --mathjax --variable "mathjax-url:https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"' had status 67
Execution halted
Rmd MWE
---
title: "Untitled"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
donut <- function(){
out <- c("<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>",
"<script type=\"text/javascript\">", " google.charts.load(\"current\", {packages:[\"corechart\"]});",
" google.charts.setOnLoadCallback(drawChart);", " function drawChart() {",
"var data = google.visualization.arrayToDataTable([", " ['Task', 'Hours per Day'],",
" ['Work', 11],", " ['Eat', 2],", " ['Commute', 2],",
" ['Watch TV', 2],", " ['Sleep', 7]", "]);", "", "var options = {",
" title: 'My Daily Activities',", " pieHole: 0.4,", "};", "",
"var chart = new google.visualization.PieChart(document.getElementById('donutchart'));",
"chart.draw(data, options);", " }", "</script>", "", "<div id=\"donutchart\" style=\"width: 900px; height: 500px;\"></div>"
)
cat(paste(out, collapse = "\n"))
}
```
```{r results='asis'}
donut()
```
donut output sans rmarkdown knitting
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
