* Parse the JSON

* Use data from R
* Make R's data random (so it updates)
* Clean up so we only have one data object

dev/demo/demo.Rmd

 data <- list(
   labels = c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
   datasets = list(
-    list(name = "R", values = c(18, 40, 30, 35, 8, 52, 17, -4)),
-    list(name = "Python", values = c(30, 50, -10, 15, 18, 32, 27, 14))
+    list(name = "R", values = runif(8, 0, 100)),
+    list(name = "Python", values = runif(8, 0, 50))
   )
 )
 
 ```
 
 ```{js}
-let rData = document.getElementById('data')
-rData.textContent
-```
-
-```{js}
-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] }
-    ]
-}
+let data = document.getElementById('data')
+data = JSON.parse(data.textContent)
 
 const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                             // new Chart() in case of ES6 module with above usage

dev/demo/demo.html

 <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">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="st">&quot;Sun&quot;</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;R&quot;</span>, <span class="dt">values =</span> <span class="kw">c</span>(<span class="dv">18</span>, <span class="dv">40</span>, <span class="dv">30</span>, <span class="dv">35</span>, <span class="dv">8</span>, <span class="dv">52</span>, <span class="dv">17</span>, <span class="dv">-4</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;Python&quot;</span>, <span class="dt">values =</span> <span class="kw">c</span>(<span class="dv">30</span>, <span class="dv">50</span>, <span class="dv">-10</span>, <span class="dv">15</span>, <span class="dv">18</span>, <span class="dv">32</span>, <span class="dv">27</span>, <span class="dv">14</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;R&quot;</span>, <span class="dt">values =</span> <span class="kw">runif</span>(<span class="dv">8</span>, <span class="dv">0</span>, <span class="dv">100</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;Python&quot;</span>, <span class="dt">values =</span> <span class="kw">runif</span>(<span class="dv">8</span>, <span class="dv">0</span>, <span class="dv">50</span>))</a>
 <a class="sourceLine" id="cb1-6" data-line-number="6">  )</a>
 <a class="sourceLine" id="cb1-7" data-line-number="7">)</a>
 <a class="sourceLine" id="cb1-8" data-line-number="8"></a>
 <a class="sourceLine" id="cb1-11" data-line-number="11">  <span class="dt">type =</span> <span class="st">&quot;application/json&quot;</span>,</a>
 <a class="sourceLine" id="cb1-12" data-line-number="12">  htmlwidgets<span class="op">:::</span><span class="kw">toJSON</span>(data)</a>
 <a class="sourceLine" id="cb1-13" data-line-number="13">)</a></code></pre></div>
-<script id="data" type="application/json">{"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]}]}</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> rData <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">'data'</span>)</a>
-<a class="sourceLine" id="cb2-2" data-line-number="2"><span class="va">rData</span>.<span class="at">textContent</span></a></code></pre></div>
+<script id="data" type="application/json">{"labels":["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"datasets":[{"name":"R","values":[88.8308963971213,19.3186549702659,42.8294315235689,24.7349868295714,62.31626693625,88.1233525462449,34.5980829792097,12.8944476367906]},{"name":"Python","values":[46.5215470409021,12.8393815713935,4.01114537380636,29.971885564737,4.40267870435491,8.44610662898049,3.04688910255209,42.4346339190379]}]}</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> data <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">'data'</span>)</a>
+<a class="sourceLine" id="cb2-2" data-line-number="2">data <span class="op">=</span> <span class="va">JSON</span>.<span class="at">parse</span>(<span class="va">data</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="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> <span class="op">{</span>  <span class="co">// or a DOM element,</span></a>
+<a class="sourceLine" id="cb2-5" data-line-number="5">                                            <span class="co">// new Chart() in case of ES6 module with above usage</span></a>
+<a class="sourceLine" id="cb2-6" data-line-number="6">    <span class="dt">title</span><span class="op">:</span> <span class="st">&quot;My Awesome Chart&quot;</span><span class="op">,</span></a>
+<a class="sourceLine" id="cb2-7" data-line-number="7">    <span class="dt">data</span><span class="op">:</span> data<span class="op">,</span></a>
+<a class="sourceLine" id="cb2-8" data-line-number="8">    <span class="dt">type</span><span class="op">:</span> <span class="st">'line'</span><span class="op">,</span></a>
+<a class="sourceLine" id="cb2-9" data-line-number="9">    <span class="dt">height</span><span class="op">:</span> <span class="dv">250</span><span class="op">,</span></a>
+<a class="sourceLine" id="cb2-10" data-line-number="10">    <span class="dt">colors</span><span class="op">:</span> [<span class="st">'#7cd6fd'</span><span class="op">,</span> <span class="st">'#743ee2'</span>]</a>
+<a class="sourceLine" id="cb2-11" data-line-number="11"><span class="op">}</span>)</a></code></pre></div>
 <div id="out-unnamed-chunk-1">
 <pre></pre>
 </div>
 <script type="text/javascript">
 const log_out_unnamed_chunk_1 = redirectLogger(document.querySelector("#out-unnamed-chunk-1 > pre"))
 document.addEventListener("DOMContentLoaded", function() {
-log_out_unnamed_chunk_1(`let rData = document.getElementById('data')
-rData.textContent`)
-})
-</script>
-<div class="sourceCode" id="cb3"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="kw">const</span> data <span class="op">=</span> <span class="op">{</span></a>
-<a class="sourceLine" id="cb3-2" data-line-number="2">    <span class="dt">labels</span><span class="op">:</span> [<span class="st">&quot;Sun&quot;</span><span class="op">,</span> <span class="st">&quot;Mon&quot;</span><span class="op">,</span> <span class="st">&quot;Tue&quot;</span><span class="op">,</span> <span class="st">&quot;Wed&quot;</span><span class="op">,</span> <span class="st">&quot;Thu&quot;</span><span class="op">,</span> <span class="st">&quot;Fri&quot;</span><span class="op">,</span> <span class="st">&quot;Sat&quot;</span><span class="op">,</span> <span class="st">&quot;Sun&quot;</span>]<span class="op">,</span></a>
-<a class="sourceLine" id="cb3-3" data-line-number="3">    <span class="dt">datasets</span><span class="op">:</span> [</a>
-<a class="sourceLine" id="cb3-4" data-line-number="4">      <span class="op">{</span> <span class="dt">name</span><span class="op">:</span> <span class="st">&quot;R&quot;</span><span class="op">,</span> <span class="dt">values</span><span class="op">:</span> [<span class="dv">18</span><span class="op">,</span> <span class="dv">40</span><span class="op">,</span> <span class="dv">30</span><span class="op">,</span> <span class="dv">35</span><span class="op">,</span> <span class="dv">8</span><span class="op">,</span> <span class="dv">52</span><span class="op">,</span> <span class="dv">17</span><span class="op">,</span> <span class="dv">-4</span>] <span class="op">},</span></a>
-<a class="sourceLine" id="cb3-5" data-line-number="5">      <span class="op">{</span> <span class="dt">name</span><span class="op">:</span> <span class="st">&quot;Python&quot;</span><span class="op">,</span> <span class="dt">values</span><span class="op">:</span> [<span class="dv">30</span><span class="op">,</span> <span class="dv">50</span><span class="op">,</span> <span class="dv">-10</span><span class="op">,</span> <span class="dv">15</span><span class="op">,</span> <span class="dv">18</span><span class="op">,</span> <span class="dv">32</span><span class="op">,</span> <span class="dv">27</span><span class="op">,</span> <span class="dv">14</span>] <span class="op">}</span></a>
-<a class="sourceLine" id="cb3-6" data-line-number="6">    ]</a>
-<a class="sourceLine" id="cb3-7" data-line-number="7"><span class="op">}</span></a>
-<a class="sourceLine" id="cb3-8" data-line-number="8"></a>
-<a class="sourceLine" id="cb3-9" data-line-number="9"><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> <span class="op">{</span>  <span class="co">// or a DOM element,</span></a>
-<a class="sourceLine" id="cb3-10" data-line-number="10">                                            <span class="co">// new Chart() in case of ES6 module with above usage</span></a>
-<a class="sourceLine" id="cb3-11" data-line-number="11">    <span class="dt">title</span><span class="op">:</span> <span class="st">&quot;My Awesome Chart&quot;</span><span class="op">,</span></a>
-<a class="sourceLine" id="cb3-12" data-line-number="12">    <span class="dt">data</span><span class="op">:</span> data<span class="op">,</span></a>
-<a class="sourceLine" id="cb3-13" data-line-number="13">    <span class="dt">type</span><span class="op">:</span> <span class="st">'line'</span><span class="op">,</span></a>
-<a class="sourceLine" id="cb3-14" data-line-number="14">    <span class="dt">height</span><span class="op">:</span> <span class="dv">250</span><span class="op">,</span></a>
-<a class="sourceLine" id="cb3-15" data-line-number="15">    <span class="dt">colors</span><span class="op">:</span> [<span class="st">'#7cd6fd'</span><span class="op">,</span> <span class="st">'#743ee2'</span>]</a>
-<a class="sourceLine" id="cb3-16" data-line-number="16"><span class="op">}</span>)</a></code></pre></div>
-<div id="out-unnamed-chunk-2">
-<pre></pre>
-</div>
-<script type="text/javascript">
-const log_out_unnamed_chunk_2 = redirectLogger(document.querySelector("#out-unnamed-chunk-2 > pre"))
-document.addEventListener("DOMContentLoaded", function() {
-log_out_unnamed_chunk_2(`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] }
-    ]
-}
+log_out_unnamed_chunk_1(`let data = document.getElementById('data')
+data = JSON.parse(data.textContent)
 
 const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                             // new Chart() in case of ES6 module with above usage

dev/dev.Rmd

 rData.textContent
 ```
 
-Use `JSON.parse()` to turn the data into a JS object.
+Use `JSON.parse()` to turn the data into a JS object
+and replace the data used in the chart.
+
+```{js find-r-data-script}
+let rData = document.getElementById('data')
+rData = JSON.parse(rData.textContent)
+```
+
+Switch between `data` and `rData` and it should be the same!
+
+Change the values of the data in the R side to be random
+so that each re-run gives a new plot.
+
+Delete the `data` in the JS side.
+