explore other options for line charts

dev/demo/demo.Rmd

@@ -20,10 +20,10 @@ tagList(
 
 ```{r data}
 data <- list(
-  labels = c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
+  labels = rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4),
   datasets = list(
-    list(name = "Python", values = runif(8, 0, 50)),
-    list(name = "R", values = runif(8, 0, 100))
+    list(name = "Python", values = runif(7 * 4, 0, 50)),
+    list(name = "R", values = runif(7 * 4, 0, 100))
   )
 )
 
@@ -32,7 +32,9 @@ opts <- list(
   type = "line",
   height = 250,
   colors = c("#466683", "#44bc96"),
-  data = data
+  data = data,
+  lineOptions = list(regionFill = TRUE, hideDots = TRUE),
+  axisOptions = list(xIsSeries = TRUE)
 )
 
 tags$script(

dev/demo/demo.html

@@ -509,10 +509,10 @@ 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">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-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">8</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">8</span>, <span class="dv">0</span>, <span class="dv">100</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>
 <a class="sourceLine" id="cb1-8" data-line-number="8"></a>
@@ -521,15 +521,17 @@ const redirectLogger = (function (origConsole) {
 <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">)</a>
-<a class="sourceLine" id="cb1-16" data-line-number="16"></a>
-<a class="sourceLine" id="cb1-17" data-line-number="17">tags<span class="op">$</span><span class="kw">script</span>(</a>
-<a class="sourceLine" id="cb1-18" data-line-number="18">  <span class="dt">id =</span> <span class="st">&quot;chart-opts&quot;</span>,</a>
-<a class="sourceLine" id="cb1-19" data-line-number="19">  <span class="dt">type =</span> <span class="st">&quot;application/json&quot;</span>,</a>
-<a class="sourceLine" id="cb1-20" data-line-number="20">  htmlwidgets<span class="op">:::</span><span class="kw">toJSON</span>(opts)</a>
-<a class="sourceLine" id="cb1-21" data-line-number="21">)</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"],"datasets":[{"name":"Python","values":[39.9432864156552,25.2527938224375,39.8755516158417,48.0921488022432,5.01228478970006,27.5107749504969,20.1021222979762,32.4653589865193]},{"name":"R","values":[15.6279036076739,90.4843728756532,54.6546421479434,60.2293464588001,39.6337900310755,5.45349009335041,16.587344603613,0.042784633114934]}]}}</script>
+<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">TRUE</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">)</a>
+<a class="sourceLine" id="cb1-18" data-line-number="18"></a>
+<a class="sourceLine" id="cb1-19" data-line-number="19">tags<span class="op">$</span><span class="kw">script</span>(</a>
+<a class="sourceLine" id="cb1-20" data-line-number="20">  <span class="dt">id =</span> <span class="st">&quot;chart-opts&quot;</span>,</a>
+<a class="sourceLine" id="cb1-21" data-line-number="21">  <span class="dt">type =</span> <span class="st">&quot;application/json&quot;</span>,</a>
+<a class="sourceLine" id="cb1-22" data-line-number="22">  htmlwidgets<span class="op">:::</span><span class="kw">toJSON</span>(opts)</a>
+<a class="sourceLine" id="cb1-23" data-line-number="23">)</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":[27.8079907293431,48.6376440385357,14.289040712174,16.1302972817793,40.4263368342072,8.96539909299463,7.39056700840592,41.9472363777459,1.92708624526858,17.0715794200078,1.52271240949631,38.8807485927828,18.6887266114354,3.66263354662806,30.7442274875939,29.339785547927,8.5889266920276,7.09071918390691,42.5338652450591,47.3522113519721,10.2943439502269,28.225671662949,0.412961223628372,12.2721731313504,40.5411853455007,4.08651942852885,16.6512168128975,14.5558502641506]},{"name":"R","values":[60.6346025830135,28.8133186288178,6.19163243100047,79.6373375924304,28.0702020972967,76.252326532267,9.07979430630803,38.7683974113315,82.5955662876368,62.7872075419873,23.5086790984496,24.9986577779055,31.2637999653816,66.6085499804467,63.4278808021918,45.5374459037557,29.3142916867509,40.5886340886354,79.3140980182216,85.7972224242985,65.2966377092525,40.9052459988743,17.9486706852913,88.9790299348533,15.7261246815324,98.3932231552899,7.79129408765584,77.8003470506519]}]},"lineOptions":{"regionFill":true,"hideDots":true},"axisOptions":{"xIsSeries":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>

dev/dev.Rmd

@@ -259,3 +259,19 @@ Change the colors to
 - `#44bc96` (green)
 - `#d33f49` (red)
 - `#993d70` (purple)
+
+## Learn about other options for line charts
+
+Read <https://frappe.io/charts/docs/basic/trends_regions>
+and add and test additional line options.
+
+Goal: shaded area chart with lines only.
+
+Make the `labels` one week and repeat 4 times.
+Generate `runif(7 * 4)` random numbers.
+
+```r
+rep(c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"), 4)
+```
+
+Find and implement an option to reduce the number of labels on the x-axis.