garrick
/
frappeCharts
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

replace data with another example that doesn't use multiple chart types

master
Garrick Aden-Buie 6 jaren geleden
bovenliggende
036d454f80
commit
8fd703a08b
3 gewijzigde bestanden met toevoegingen van 48 en 61 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. +5
    -13
      dev/demo/demo.Rmd
  2. +27
    -48
      dev/demo/demo.html
  3. +16
    -0
      dev/dev.Rmd

+ 5
- 13
dev/demo/demo.Rmd Bestand weergeven

@@ -2,7 +2,7 @@
output: js4shiny::html_document_plain
---

```{r htmldeps}
```{r htmldeps, echo=FALSE}
library(htmltools)

tagList(
@@ -20,18 +20,10 @@ tagList(

```{js}
const data = {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
name: "Some Data", type: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", type: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
{ name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
{ name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
]
}

@@ -39,7 +31,7 @@ const chart = new frappe.Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
type: 'line',
height: 250,
colors: ['#7cd6fd', '#743ee2']
})

+ 27
- 48
dev/demo/demo.html Bestand weergeven

@@ -205,58 +205,37 @@ display: none;
</head>
<body>

<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="kw">library</span>(htmltools)</a>
<a class="sourceLine" id="cb1-2" data-line-number="2"></a>
<a class="sourceLine" id="cb1-3" data-line-number="3"><span class="kw">tagList</span>(</a>
<a class="sourceLine" id="cb1-4" data-line-number="4"> <span class="kw">div</span>(<span class="dt">id =</span> <span class="st">&quot;chart&quot;</span>),</a>
<a class="sourceLine" id="cb1-5" data-line-number="5"> htmltools<span class="op">::</span><span class="kw">htmlDependency</span>(</a>
<a class="sourceLine" id="cb1-6" data-line-number="6"> <span class="dt">name =</span> <span class="st">&quot;frappe-charts&quot;</span>,</a>
<a class="sourceLine" id="cb1-7" data-line-number="7"> <span class="dt">version =</span> <span class="st">&quot;1.3.0&quot;</span>,</a>
<a class="sourceLine" id="cb1-8" data-line-number="8"> <span class="dt">package =</span> <span class="st">&quot;frappeCharts&quot;</span>,</a>
<a class="sourceLine" id="cb1-9" data-line-number="9"> <span class="dt">src =</span> <span class="st">&quot;htmlwidgets/lib/frappe-charts&quot;</span>,</a>
<a class="sourceLine" id="cb1-10" data-line-number="10"> <span class="dt">script =</span> <span class="st">&quot;frappe-charts.min.iife.js&quot;</span>,</a>
<a class="sourceLine" id="cb1-11" data-line-number="11"> <span class="dt">all_files =</span> <span class="ot">TRUE</span></a>
<a class="sourceLine" id="cb1-12" data-line-number="12"> )</a>
<a class="sourceLine" id="cb1-13" data-line-number="13">)</a></code></pre></div>
<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>tibble<span class="op">::</span><span class="kw">tibble</span>(</a>
<a class="sourceLine" id="cb1-2" data-line-number="2"> <span class="dt">labels =</span> <span class="kw">c</span>(</a>
<a class="sourceLine" id="cb1-3" data-line-number="3"> <span class="st">&quot;12am-3am&quot;</span>, <span class="st">&quot;3am-6pm&quot;</span>, <span class="st">&quot;6am-9am&quot;</span>, <span class="st">&quot;9am-12am&quot;</span>,</a>
<a class="sourceLine" id="cb1-4" data-line-number="4"> <span class="st">&quot;12pm-3pm&quot;</span>, <span class="st">&quot;3pm-6pm&quot;</span>, <span class="st">&quot;6pm-9pm&quot;</span>, <span class="st">&quot;9am-12am&quot;</span></a>
<a class="sourceLine" id="cb1-5" data-line-number="5"> ),</a>
<a class="sourceLine" id="cb1-6" data-line-number="6"> <span class="st">&quot;Some Data&quot;</span> =<span class="st"> </span><span class="kw">c</span>(<span class="dv">25</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-7" data-line-number="7"> <span class="st">&quot;&quot;</span></a>
<a class="sourceLine" id="cb1-8" data-line-number="8">)</a></code></pre></div>
<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">const</span> data <span class="op">=</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb2-2" data-line-number="2"> <span class="dt">labels</span><span class="op">:</span> [<span class="st">&quot;12am-3am&quot;</span><span class="op">,</span> <span class="st">&quot;3am-6pm&quot;</span><span class="op">,</span> <span class="st">&quot;6am-9am&quot;</span><span class="op">,</span> <span class="st">&quot;9am-12am&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb2-3" data-line-number="3"> <span class="st">&quot;12pm-3pm&quot;</span><span class="op">,</span> <span class="st">&quot;3pm-6pm&quot;</span><span class="op">,</span> <span class="st">&quot;6pm-9pm&quot;</span><span class="op">,</span> <span class="st">&quot;9am-12am&quot;</span></a>
<a class="sourceLine" id="cb2-4" data-line-number="4"> ]<span class="op">,</span></a>
<a class="sourceLine" id="cb2-5" data-line-number="5"> <span class="dt">datasets</span><span class="op">:</span> [</a>
<a class="sourceLine" id="cb2-6" data-line-number="6"> <span class="op">{</span></a>
<a class="sourceLine" id="cb2-7" data-line-number="7"> <span class="dt">name</span><span class="op">:</span> <span class="st">&quot;Some Data&quot;</span><span class="op">,</span> <span class="dt">type</span><span class="op">:</span> <span class="st">&quot;bar&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb2-8" data-line-number="8"> <span class="dt">values</span><span class="op">:</span> [<span class="dv">25</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>]</a>
<a class="sourceLine" id="cb2-9" data-line-number="9"> <span class="op">},</span></a>
<a class="sourceLine" id="cb2-10" data-line-number="10"> <span class="op">{</span></a>
<a class="sourceLine" id="cb2-11" data-line-number="11"> <span class="dt">name</span><span class="op">:</span> <span class="st">&quot;Another Set&quot;</span><span class="op">,</span> <span class="dt">type</span><span class="op">:</span> <span class="st">&quot;line&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb2-12" data-line-number="12"> <span class="dt">values</span><span class="op">:</span> [<span class="dv">25</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>]</a>
<a class="sourceLine" id="cb2-13" data-line-number="13"> <span class="op">}</span></a>
<a class="sourceLine" id="cb2-14" data-line-number="14"> ]</a>
<a class="sourceLine" id="cb2-15" data-line-number="15"><span class="op">}</span></a>
<a class="sourceLine" id="cb2-16" data-line-number="16"></a>
<a class="sourceLine" id="cb2-17" data-line-number="17"><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-18" data-line-number="18"> <span class="co">// new Chart() in case of ES6 module with above usage</span></a>
<a class="sourceLine" id="cb2-19" data-line-number="19"> <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-20" data-line-number="20"> <span class="dt">data</span><span class="op">:</span> data<span class="op">,</span></a>
<a class="sourceLine" id="cb2-21" data-line-number="21"> <span class="dt">type</span><span class="op">:</span> <span class="st">'axis-mixed'</span><span class="op">,</span> <span class="co">// or 'bar', 'line', 'scatter', 'pie', 'percentage'</span></a>
<a class="sourceLine" id="cb2-22" data-line-number="22"> <span class="dt">height</span><span class="op">:</span> <span class="dv">250</span><span class="op">,</span></a>
<a class="sourceLine" id="cb2-23" data-line-number="23"> <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-24" data-line-number="24"><span class="op">}</span>)</a></code></pre></div>
<a class="sourceLine" id="cb2-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="cb2-3" data-line-number="3"> <span class="dt">datasets</span><span class="op">:</span> [</a>
<a class="sourceLine" id="cb2-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="cb2-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="cb2-6" data-line-number="6"> ]</a>
<a class="sourceLine" id="cb2-7" data-line-number="7"><span class="op">}</span></a>
<a class="sourceLine" id="cb2-8" data-line-number="8"></a>
<a class="sourceLine" id="cb2-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="cb2-10" data-line-number="10"> <span class="co">// new Chart() in case of ES6 module with above usage</span></a>
<a class="sourceLine" id="cb2-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="cb2-12" data-line-number="12"> <span class="dt">data</span><span class="op">:</span> data<span class="op">,</span></a>
<a class="sourceLine" id="cb2-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="cb2-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="cb2-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="cb2-16" data-line-number="16"><span class="op">}</span>)</a></code></pre></div>
<script type="text/javascript">
const data = {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
name: "Some Data", type: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", type: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
{ name: "R", values: [18, 40, 30, 35, 8, 52, 17, -4] },
{ name: "Python", values: [30, 50, -10, 15, 18, 32, 27, 14] }
]
}

@@ -264,7 +243,7 @@ const chart = new frappe.Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
type: 'line',
height: 250,
colors: ['#7cd6fd', '#743ee2']
})

+ 16
- 0
dev/dev.Rmd Bestand weergeven

@@ -179,3 +179,19 @@ it's most likely because
```
src = "inst/htmlwidgets/lib/frappe-charts"
```

## Replace the example data with another data set and example

The first demo mixes chart types and we don't want to do that.
Use the example from
[Basic Chart](https://frappe.io/charts/docs/basic/basic_chart#adding-more-datasets).

```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] }
]
}
```

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan