Add real data and reformat in the browser

dev/demo/demo.Rmd

@@ -4,6 +4,9 @@ output: js4shiny::html_document_js
 
 ```{r htmldeps, echo=FALSE}
 library(htmltools)
+library(dplyr)
+library(tidyr)
+library(babynames)
 
 tagList(
   div(id = "chart"),
@@ -19,13 +22,26 @@ tagList(
 ```
 
 ```{r data}
-data <- list(
-  labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
-  datasets = list(
-    list(name = "Python", values = runif(7 * 4, 0, 50)),
-    list(name = "R", values = runif(7 * 4, 0, 100))
-  )
-)
+# data <- list(
+#   labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
+#   datasets = list(
+#     list(name = "Python", values = runif(7 * 4, 0, 50)),
+#     list(name = "R", values = runif(7 * 4, 0, 100))
+#   )
+# )
+
+data <-
+  babynames %>% 
+  filter(
+    name %in% c("Ruth", "August"),
+    year >= 1980
+  ) %>% 
+  group_by(year, name) %>% 
+  summarize(n = sum(n)) %>% 
+  ungroup() %>% 
+  pivot_wider(year, name, values_from = n)
+
+data[1:5, ]
 
 opts <- list(
   title = "My AwesomeR Chart",
@@ -35,7 +51,7 @@ opts <- list(
   data = data,
   lineOptions = list(regionFill = TRUE, hideDots = FALSE),
   axisOptions = list(xIsSeries = TRUE),
-  isNavigable = TRUE
+  isNavigable = c(TRUE, TRUE)
 )
 
 tags$script(
@@ -49,13 +65,21 @@ tags$script(
 let x = document.getElementById('chart-opts')
 x = JSON.parse(x.textContent)
 
-// const data = {
-//     labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-//     datasets: [
-//       { name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
-//       { name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
-//     ]
-// }
+const chartData = {labels: [], datasets: []}
+
+// Get keys of data, assume that first entry is for labels, the rest are data
+let labelColumn = Object.keys(x.data)[0]
+let columns = Object.keys(x.data).slice(1)
+
+// First column in x.data is the labels
+chartData.labels = x.data[labelColumn]
+
+// Create an appropriate object for each column, reformat data and add to chartData
+columns.forEach(function(col) {
+  chartData.datasets.push({name: col, values: x.data[col]})
+})
+
+x.data = chartData
 
 const chart = new frappe.Chart("#chart", x)
 ```

dev/demo/demo.html

@@ -508,43 +508,71 @@ const redirectLogger = (function (origConsole) {
 
 
 <div id="chart"></div>
-<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1">data &lt;-<span class="st"> </span><span class="kw">list</span>(</a>
-<a class="sourceLine" id="cb1-2" data-line-number="2">  <span class="dt">labels =</span> <span class="kw">rep</span>(<span class="kw">c</span>(<span class="st">&quot;Sun&quot;</span>, <span class="st">&quot;Mon&quot;</span>, <span class="st">&quot;Tue&quot;</span>, <span class="st">&quot;Wed&quot;</span>, <span class="st">&quot;Thu&quot;</span>, <span class="st">&quot;Fri&quot;</span>, <span class="st">&quot;Sat&quot;</span>), <span class="dv">4</span>),</a>
-<a class="sourceLine" id="cb1-3" data-line-number="3">  <span class="dt">datasets =</span> <span class="kw">list</span>(</a>
-<a class="sourceLine" id="cb1-4" data-line-number="4">    <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&quot;Python&quot;</span>, <span class="dt">values =</span> <span class="kw">runif</span>(<span class="dv">7</span> <span class="op">*</span><span class="st"> </span><span class="dv">4</span>, <span class="dv">0</span>, <span class="dv">50</span>)),</a>
-<a class="sourceLine" id="cb1-5" data-line-number="5">    <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&quot;R&quot;</span>, <span class="dt">values =</span> <span class="kw">runif</span>(<span class="dv">7</span> <span class="op">*</span><span class="st"> </span><span class="dv">4</span>, <span class="dv">0</span>, <span class="dv">100</span>))</a>
-<a class="sourceLine" id="cb1-6" data-line-number="6">  )</a>
-<a class="sourceLine" id="cb1-7" data-line-number="7">)</a>
+<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co"># data &lt;- list(</span></a>
+<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="co">#   labels = rep(c(&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thu&quot;, &quot;Fri&quot;, &quot;Sat&quot;), 4),</span></a>
+<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="co">#   datasets = list(</span></a>
+<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co">#     list(name = &quot;Python&quot;, values = runif(7 * 4, 0, 50)),</span></a>
+<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co">#     list(name = &quot;R&quot;, values = runif(7 * 4, 0, 100))</span></a>
+<a class="sourceLine" id="cb1-6" data-line-number="6"><span class="co">#   )</span></a>
+<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="co"># )</span></a>
 <a class="sourceLine" id="cb1-8" data-line-number="8"></a>
-<a class="sourceLine" id="cb1-9" data-line-number="9">opts &lt;-<span class="st"> </span><span class="kw">list</span>(</a>
-<a class="sourceLine" id="cb1-10" data-line-number="10">  <span class="dt">title =</span> <span class="st">&quot;My AwesomeR Chart&quot;</span>,</a>
-<a class="sourceLine" id="cb1-11" data-line-number="11">  <span class="dt">type =</span> <span class="st">&quot;line&quot;</span>,</a>
-<a class="sourceLine" id="cb1-12" data-line-number="12">  <span class="dt">height =</span> <span class="dv">250</span>,</a>
-<a class="sourceLine" id="cb1-13" data-line-number="13">  <span class="dt">colors =</span> <span class="kw">c</span>(<span class="st">&quot;#466683&quot;</span>, <span class="st">&quot;#44bc96&quot;</span>),</a>
-<a class="sourceLine" id="cb1-14" data-line-number="14">  <span class="dt">data =</span> data,</a>
-<a class="sourceLine" id="cb1-15" data-line-number="15">  <span class="dt">lineOptions =</span> <span class="kw">list</span>(<span class="dt">regionFill =</span> <span class="ot">TRUE</span>, <span class="dt">hideDots =</span> <span class="ot">FALSE</span>),</a>
-<a class="sourceLine" id="cb1-16" data-line-number="16">  <span class="dt">axisOptions =</span> <span class="kw">list</span>(<span class="dt">xIsSeries =</span> <span class="ot">TRUE</span>),</a>
-<a class="sourceLine" id="cb1-17" data-line-number="17">  <span class="dt">isNavigable =</span> <span class="ot">TRUE</span></a>
-<a class="sourceLine" id="cb1-18" data-line-number="18">)</a>
+<a class="sourceLine" id="cb1-9" data-line-number="9">data &lt;-</a>
+<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="st">  </span>babynames <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-11" data-line-number="11"><span class="st">  </span><span class="kw">filter</span>(</a>
+<a class="sourceLine" id="cb1-12" data-line-number="12">    name <span class="op">%in%</span><span class="st"> </span><span class="kw">c</span>(<span class="st">&quot;Ruth&quot;</span>, <span class="st">&quot;August&quot;</span>),</a>
+<a class="sourceLine" id="cb1-13" data-line-number="13">    year <span class="op">&gt;=</span><span class="st"> </span><span class="dv">1980</span></a>
+<a class="sourceLine" id="cb1-14" data-line-number="14">  ) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-15" data-line-number="15"><span class="st">  </span><span class="kw">group_by</span>(year, name) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="st">  </span><span class="kw">summarize</span>(<span class="dt">n =</span> <span class="kw">sum</span>(n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-17" data-line-number="17"><span class="st">  </span><span class="kw">ungroup</span>() <span class="op">%&gt;%</span><span class="st"> </span></a>
+<a class="sourceLine" id="cb1-18" data-line-number="18"><span class="st">  </span><span class="kw">pivot_wider</span>(year, name, <span class="dt">values_from =</span> n)</a>
 <a class="sourceLine" id="cb1-19" data-line-number="19"></a>
-<a class="sourceLine" id="cb1-20" data-line-number="20">tags<span class="op">$</span><span class="kw">script</span>(</a>
-<a class="sourceLine" id="cb1-21" data-line-number="21">  <span class="dt">id =</span> <span class="st">&quot;chart-opts&quot;</span>,</a>
-<a class="sourceLine" id="cb1-22" data-line-number="22">  <span class="dt">type =</span> <span class="st">&quot;application/json&quot;</span>,</a>
-<a class="sourceLine" id="cb1-23" data-line-number="23">  htmlwidgets<span class="op">:::</span><span class="kw">toJSON</span>(opts)</a>
-<a class="sourceLine" id="cb1-24" data-line-number="24">)</a></code></pre></div>
-<script id="chart-opts" type="application/json">{"title":"My AwesomeR Chart","type":"line","height":250,"colors":["#466683","#44bc96"],"data":{"labels":["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"datasets":[{"name":"Python","values":[36.8783984449692,0.3008205560036,28.5852213855833,33.7746525881812,32.3063875199296,30.7150896871462,8.29450781457126,49.1399688180536,6.33369348943233,27.6973958243616,6.37135574361309,32.0640357909724,34.8882558988407,19.375601503998,49.6214389917441,28.2911687972955,46.0429937695153,36.2517389701679,11.3456455990672,32.413131732028,33.8291544001549,49.593669816386,39.5639568567276,36.6662442567758,24.016499274876,21.2378127500415,12.9865748574957,34.1270580189303]},{"name":"R","values":[36.1423551337793,9.12210487294942,8.53648635093123,52.5985381798819,51.8149034352973,55.7358885416761,87.718225363642,51.5195427695289,30.7746515143663,98.5726148355752,89.6104783285409,30.9769994113594,47.0162642886862,6.11476264894009,53.8708401611075,39.8319646948949,41.982742282562,0.284124375320971,51.467036921531,55.6050417246297,13.1211278261617,37.7798362169415,60.3605185169727,39.7546014282852,28.6238499218598,7.69493547268212,13.510471326299,85.0977816618979]}]},"lineOptions":{"regionFill":true,"hideDots":false},"axisOptions":{"xIsSeries":true},"isNavigable":true}</script>
-<div class="sourceCode" id="cb2"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw">let</span> x <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">'chart-opts'</span>)</a>
-<a class="sourceLine" id="cb2-2" data-line-number="2">x <span class="op">=</span> <span class="va">JSON</span>.<span class="at">parse</span>(<span class="va">x</span>.<span class="at">textContent</span>)</a>
-<a class="sourceLine" id="cb2-3" data-line-number="3"></a>
-<a class="sourceLine" id="cb2-4" data-line-number="4"><span class="co">// const data = {</span></a>
-<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="co">//     labels: [&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thu&quot;, &quot;Fri&quot;, &quot;Sat&quot;, &quot;Sun&quot;],</span></a>
-<a class="sourceLine" id="cb2-6" data-line-number="6"><span class="co">//     datasets: [</span></a>
-<a class="sourceLine" id="cb2-7" data-line-number="7"><span class="co">//       { name: &quot;R&quot;, values: [18, 40, 30, 35, 8, 52, 17, -4] },</span></a>
-<a class="sourceLine" id="cb2-8" data-line-number="8"><span class="co">//       { name: &quot;Python&quot;, values: [30, 50, -10, 15, 18, 32, 27, 14] }</span></a>
-<a class="sourceLine" id="cb2-9" data-line-number="9"><span class="co">//     ]</span></a>
-<a class="sourceLine" id="cb2-10" data-line-number="10"><span class="co">// }</span></a>
-<a class="sourceLine" id="cb2-11" data-line-number="11"></a>
-<a class="sourceLine" id="cb2-12" data-line-number="12"><span class="kw">const</span> chart <span class="op">=</span> <span class="kw">new</span> <span class="va">frappe</span>.<span class="at">Chart</span>(<span class="st">&quot;#chart&quot;</span><span class="op">,</span> x)</a></code></pre></div>
+<a class="sourceLine" id="cb1-20" data-line-number="20">data[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, ]</a></code></pre></div>
+<pre><code>## # A tibble: 5 x 3
+##    year August  Ruth
+##   &lt;dbl&gt;  &lt;int&gt; &lt;int&gt;
+## 1  1980    149  1262
+## 2  1981    137  1272
+## 3  1982    130  1193
+## 4  1983    135  1135
+## 5  1984    142  1174</code></pre>
+<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" data-line-number="1">opts &lt;-<span class="st"> </span><span class="kw">list</span>(</a>
+<a class="sourceLine" id="cb3-2" data-line-number="2">  <span class="dt">title =</span> <span class="st">&quot;My AwesomeR Chart&quot;</span>,</a>
+<a class="sourceLine" id="cb3-3" data-line-number="3">  <span class="dt">type =</span> <span class="st">&quot;line&quot;</span>,</a>
+<a class="sourceLine" id="cb3-4" data-line-number="4">  <span class="dt">height =</span> <span class="dv">250</span>,</a>
+<a class="sourceLine" id="cb3-5" data-line-number="5">  <span class="dt">colors =</span> <span class="kw">c</span>(<span class="st">&quot;#466683&quot;</span>, <span class="st">&quot;#44bc96&quot;</span>),</a>
+<a class="sourceLine" id="cb3-6" data-line-number="6">  <span class="dt">data =</span> data,</a>
+<a class="sourceLine" id="cb3-7" data-line-number="7">  <span class="dt">lineOptions =</span> <span class="kw">list</span>(<span class="dt">regionFill =</span> <span class="ot">TRUE</span>, <span class="dt">hideDots =</span> <span class="ot">FALSE</span>),</a>
+<a class="sourceLine" id="cb3-8" data-line-number="8">  <span class="dt">axisOptions =</span> <span class="kw">list</span>(<span class="dt">xIsSeries =</span> <span class="ot">TRUE</span>),</a>
+<a class="sourceLine" id="cb3-9" data-line-number="9">  <span class="dt">isNavigable =</span> <span class="kw">c</span>(<span class="ot">TRUE</span>, <span class="ot">TRUE</span>)</a>
+<a class="sourceLine" id="cb3-10" data-line-number="10">)</a>
+<a class="sourceLine" id="cb3-11" data-line-number="11"></a>
+<a class="sourceLine" id="cb3-12" data-line-number="12">tags<span class="op">$</span><span class="kw">script</span>(</a>
+<a class="sourceLine" id="cb3-13" data-line-number="13">  <span class="dt">id =</span> <span class="st">&quot;chart-opts&quot;</span>,</a>
+<a class="sourceLine" id="cb3-14" data-line-number="14">  <span class="dt">type =</span> <span class="st">&quot;application/json&quot;</span>,</a>
+<a class="sourceLine" id="cb3-15" data-line-number="15">  htmlwidgets<span class="op">:::</span><span class="kw">toJSON</span>(opts)</a>
+<a class="sourceLine" id="cb3-16" data-line-number="16">)</a></code></pre></div>
+<script id="chart-opts" type="application/json">{"title":"My AwesomeR Chart","type":"line","height":250,"colors":["#466683","#44bc96"],"data":{"year":[1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017],"August":[149,137,130,135,142,146,155,145,147,181,169,183,194,211,255,327,316,377,425,368,409,387,378,376,375,431,470,512,690,760,758,837,1077,1170,1769,2331,2313,2295],"Ruth":[1262,1272,1193,1135,1174,1125,1096,1040,1012,997,913,990,853,863,880,858,801,856,850,870,903,943,900,888,905,906,889,958,929,912,929,901,926,986,1057,1102,1094,1194]},"lineOptions":{"regionFill":true,"hideDots":false},"axisOptions":{"xIsSeries":true},"isNavigable":[true,true]}</script>
+<div class="sourceCode" id="cb4"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="kw">let</span> x <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">'chart-opts'</span>)</a>
+<a class="sourceLine" id="cb4-2" data-line-number="2">x <span class="op">=</span> <span class="va">JSON</span>.<span class="at">parse</span>(<span class="va">x</span>.<span class="at">textContent</span>)</a>
+<a class="sourceLine" id="cb4-3" data-line-number="3"></a>
+<a class="sourceLine" id="cb4-4" data-line-number="4"><span class="kw">const</span> chartData <span class="op">=</span> <span class="op">{</span><span class="dt">labels</span><span class="op">:</span> []<span class="op">,</span> <span class="dt">datasets</span><span class="op">:</span> []<span class="op">}</span></a>
+<a class="sourceLine" id="cb4-5" data-line-number="5"></a>
+<a class="sourceLine" id="cb4-6" data-line-number="6"><span class="co">// Get keys of data, assume that first entry is for labels, the rest are data</span></a>
+<a class="sourceLine" id="cb4-7" data-line-number="7"><span class="kw">let</span> labelColumn <span class="op">=</span> <span class="va">Object</span>.<span class="at">keys</span>(<span class="va">x</span>.<span class="at">data</span>)[<span class="dv">0</span>]</a>
+<a class="sourceLine" id="cb4-8" data-line-number="8"><span class="kw">let</span> columns <span class="op">=</span> <span class="va">Object</span>.<span class="at">keys</span>(<span class="va">x</span>.<span class="at">data</span>).<span class="at">slice</span>(<span class="dv">1</span>)</a>
+<a class="sourceLine" id="cb4-9" data-line-number="9"></a>
+<a class="sourceLine" id="cb4-10" data-line-number="10"><span class="co">// First column in x.data is the labels</span></a>
+<a class="sourceLine" id="cb4-11" data-line-number="11"><span class="va">chartData</span>.<span class="at">labels</span> <span class="op">=</span> <span class="va">x</span>.<span class="at">data</span>[labelColumn]</a>
+<a class="sourceLine" id="cb4-12" data-line-number="12"></a>
+<a class="sourceLine" id="cb4-13" data-line-number="13"><span class="co">// Create an appropriate object for each column, reformat data and add to chartData</span></a>
+<a class="sourceLine" id="cb4-14" data-line-number="14"><span class="va">columns</span>.<span class="at">forEach</span>(<span class="kw">function</span>(col) <span class="op">{</span></a>
+<a class="sourceLine" id="cb4-15" data-line-number="15">  <span class="va">chartData</span>.<span class="va">datasets</span>.<span class="at">push</span>(<span class="op">{</span><span class="dt">name</span><span class="op">:</span> col<span class="op">,</span> <span class="dt">values</span><span class="op">:</span> <span class="va">x</span>.<span class="at">data</span>[col]<span class="op">}</span>)</a>
+<a class="sourceLine" id="cb4-16" data-line-number="16"><span class="op">}</span>)</a>
+<a class="sourceLine" id="cb4-17" data-line-number="17"></a>
+<a class="sourceLine" id="cb4-18" data-line-number="18"><span class="va">x</span>.<span class="at">data</span> <span class="op">=</span> chartData</a>
+<a class="sourceLine" id="cb4-19" data-line-number="19"></a>
+<a class="sourceLine" id="cb4-20" data-line-number="20"><span class="kw">const</span> chart <span class="op">=</span> <span class="kw">new</span> <span class="va">frappe</span>.<span class="at">Chart</span>(<span class="st">&quot;#chart&quot;</span><span class="op">,</span> x)</a></code></pre></div>
 <div id="out-unnamed-chunk-1">
 <pre></pre>
 </div>
@@ -554,13 +582,21 @@ document.addEventListener("DOMContentLoaded", function() {
 log_out_unnamed_chunk_1(`let x = document.getElementById('chart-opts')
 x = JSON.parse(x.textContent)
 
-// const data = {
-//     labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-//     datasets: [
-//       { name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
-//       { name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
-//     ]
-// }
+const chartData = {labels: [], datasets: []}
+
+// Get keys of data, assume that first entry is for labels, the rest are data
+let labelColumn = Object.keys(x.data)[0]
+let columns = Object.keys(x.data).slice(1)
+
+// First column in x.data is the labels
+chartData.labels = x.data[labelColumn]
+
+// Create an appropriate object for each column, reformat data and add to chartData
+columns.forEach(function(col) {
+  chartData.datasets.push({name: col, values: x.data[col]})
+})
+
+x.data = chartData
 
 const chart = new frappe.Chart("#chart", x)`)
 })

dev/demo/reformat-r2js-data.Rmd

@@ -0,0 +1,67 @@
+---
+pagetitle: Prepare Data for htmlwidget
+example:
+  title: Prepare Data for htmlwidget
+  instructions: |-
+    An R list has been converted to JSON for use in an htmlwidget, but the `.data` property is still in "R" format.
+    Assume that the first key (column) should be used as `labels` and the remaining columns should be used as the `datasets`.
+
+    Reformat the data to follow the pattern in the example below and replace the `x.data` property.
+  hint: |-
+    ```js
+    x.data = {
+        labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        datasets: [
+          { name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+          { name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+        ]
+    }
+    ```
+  runtime: repl
+  mode:
+    document: html
+  initial:
+    js: |-
+      let x = document.getElementById('chart-opts')
+      x = JSON.parse(x.textContent)
+
+      // create an empty object to hold the formatted chart data
+      const chartData = {labels: [], datasets: []}
+
+      // Get keys of data, assume that first entry is for labels, the rest are data
+      // chartData.labels = ...
+      
+      // Create an appropriate object for each column, reformat data and add to chartData
+      
+      x.data = chartData
+    css: ~
+  solution:
+    js: |-
+      let x = document.getElementById('chart-opts')
+      x = JSON.parse(x.textContent)
+
+      // create an empty object to hold the formatted chart data
+      const chartData = {labels: [], datasets: []}
+
+      // Get keys of data, assume that first entry is for labels, the rest are data
+      let labelColumn = Object.keys(x.data)[0]
+      let columns = Object.keys(x.data).slice(1)
+
+      console.log({labelColumn, columns})
+
+      // First column in x.data is the labels
+      chartData.labels = x.data[labelColumn]
+
+      // Create an appropriate object for each column, reformat data and add to chartData
+      columns.forEach(function(col) {
+        chartData.datasets.push({name: col, values: x.data[col]})
+      })
+
+      x.data = chartData
+    css: ~
+output: js4shiny::html_document_js4shiny
+
+---
+<div><!--for pandoc-->
+<script id="chart-opts" type="application/json">{"title":"My AwesomeR Chart","type":"line","height":250,"colors":["#466683","#44bc96"],"data":{"year":[1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017],"August":[149,137,130,135,142,146,155,145,147,181,169,183,194,211,255,327,316,377,425,368,409,387,378,376,375,431,470,512,690,760,758,837,1077,1170,1769,2331,2313,2295],"Ruth":[1262,1272,1193,1135,1174,1125,1096,1040,1012,997,913,990,853,863,880,858,801,856,850,870,903,943,900,888,905,906,889,958,929,912,929,901,926,986,1057,1102,1094,1194]},"lineOptions":{"regionFill":true,"hideDots":false},"axisOptions":{"xIsSeries":true},"isNavigable":true}</script>
+</div><!--for pandoc-->

dev/dev.Rmd

@@ -290,3 +290,60 @@ opts <- list(
   isNavigable = TRUE
 )
 ```
+
+## Add a real data source
+
+Using the `babynames` package, pick two names to compare.
+
+```{r babynames}
+library(dplyr)
+library(babynames)
+
+
+data <-
+  babynames %>% 
+  filter(
+    name %in% c("Ruth", "August"),
+    year >= 1980
+  ) %>% 
+  group_by(year, name) %>% 
+  summarize(n = sum(n)) %>% 
+  ungroup() %>% 
+  pivot_wider(year, name, values_from = n)
+```
+
+At this point the chart won't work,
+but you can use the browser dev console 
+to find the right steps to reformat the data into the expected format.
+
+We'll make the **strong** assumption that the tibble in R
+should always be formatted with the columns
+
+1. `labels`
+2. first data set...
+3. second data set...
+4. etc.
+
+`repl_example("reformat-r2js-data")`
+
+<details><summary>Answer</summary>
+
+```js
+const chartData = {labels: [], datasets: []}
+
+// Get keys of data, assume that first entry is for labels, the rest are data
+let labelColumn = Object.keys(x.data)[0]
+let columns = Object.keys(x.data).slice(1)
+
+// First column in x.data is the labels
+chartData.labels = x.data[labelColumn]
+
+// Create an appropriate object for each column, reformat data and add to chartData
+columns.forEach(function(col) {
+  chartData.datasets.push({name: col, values: x.data[col]})
+})
+
+x.data = chartData
+```
+
+</details>