rebuild & reupdate correctly
This commit is contained in:
pvictor
parent
21edc8d1e5
commit
3979d0c44c
|
|
@ -80,7 +80,7 @@
|
|||
<!--/.navbar -->
|
||||
|
||||
|
||||
</header><script src="labs_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="labs_files/apexcharts-3.6.10/apexcharts.min.js"></script><script src="labs_files/apexcharter-binding-0.0.4.900/apexcharter.js"></script><div class="row">
|
||||
</header><script src="labs_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="labs_files/apexcharts-3.6.10/apexcharts.min.js"></script><script src="labs_files/apexcharter-binding-0.0.4.910/apexcharter.js"></script><div class="row">
|
||||
<div class="col-md-9 contents">
|
||||
<div class="page-header toc-ignore">
|
||||
<h1>Labs: title, subtitle & axis</h1>
|
||||
|
|
@ -104,16 +104,16 @@
|
|||
<a href="#chart-title" class="anchor"></a>Chart title</h2>
|
||||
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb2-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(<span class="dt">text =</span> <span class="st">"Cut distribution"</span>)</a></code></pre></div>
|
||||
<div id="htmlwidget-5bd0321a5441282f3400" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-5bd0321a5441282f3400">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
|
||||
<div id="htmlwidget-8773b783d497e2593448" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-8773b783d497e2593448">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
|
||||
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb3-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(</a>
|
||||
<a class="sourceLine" id="cb3-3" title="3"> <span class="dt">text =</span> <span class="st">"Cut distribution"</span>, </a>
|
||||
<a class="sourceLine" id="cb3-4" title="4"> <span class="dt">align =</span> <span class="st">"center"</span>,</a>
|
||||
<a class="sourceLine" id="cb3-5" title="5"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
|
||||
<a class="sourceLine" id="cb3-6" title="6"> )</a></code></pre></div>
|
||||
<div id="htmlwidget-f12ee9479262b4bc95d2" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-f12ee9479262b4bc95d2">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/title/" class="uri">https://apexcharts.com/docs/options/title/</a></p>
|
||||
<div id="htmlwidget-22c185026a5ab1f1920b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-22c185026a5ab1f1920b">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/title/" class="uri">https://apexcharts.com/docs/options/title/</a></p>
|
||||
</div>
|
||||
<div id="chart-subtitle" class="section level2">
|
||||
<h2 class="hasAnchor">
|
||||
|
|
@ -121,8 +121,8 @@
|
|||
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb4-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(<span class="dt">text =</span> <span class="st">"Cut distribution"</span>) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb4-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span>(<span class="dt">text =</span> <span class="st">"Data from ggplot2"</span>)</a></code></pre></div>
|
||||
<div id="htmlwidget-5499e2105a69f7b3a4ac" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-5499e2105a69f7b3a4ac">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
|
||||
<div id="htmlwidget-88e882597852721d0ae8" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-88e882597852721d0ae8">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
|
||||
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb5-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(</a>
|
||||
<a class="sourceLine" id="cb5-3" title="3"> <span class="dt">text =</span> <span class="st">"Cut distribution"</span>, </a>
|
||||
|
|
@ -134,8 +134,8 @@
|
|||
<a class="sourceLine" id="cb5-9" title="9"> <span class="dt">align =</span> <span class="st">"center"</span>,</a>
|
||||
<a class="sourceLine" id="cb5-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
|
||||
<a class="sourceLine" id="cb5-11" title="11"> )</a></code></pre></div>
|
||||
<div id="htmlwidget-d14bc44a7ad6171f7b9d" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-d14bc44a7ad6171f7b9d">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/subtitle/" class="uri">https://apexcharts.com/docs/options/subtitle/</a></p>
|
||||
<div id="htmlwidget-864e2229ab1b773dc77d" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-864e2229ab1b773dc77d">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/subtitle/" class="uri">https://apexcharts.com/docs/options/subtitle/</a></p>
|
||||
</div>
|
||||
<div id="axis-title" class="section level2">
|
||||
<h2 class="hasAnchor">
|
||||
|
|
@ -143,8 +143,8 @@
|
|||
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb6-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">title =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">text =</span> <span class="st">"Count"</span>)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb6-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span>(<span class="dt">title =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">text =</span> <span class="st">"Cut"</span>))</a></code></pre></div>
|
||||
<div id="htmlwidget-d4a98c73e457c0ebb19a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-d4a98c73e457c0ebb19a">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count"}},"xaxis":{"title":{"text":"Cut"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
|
||||
<div id="htmlwidget-d8a42e897f113ed56be1" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-d8a42e897f113ed56be1">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count"}},"xaxis":{"title":{"text":"Cut"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
|
||||
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%>%</span><span class="st"> </span></a>
|
||||
<a class="sourceLine" id="cb7-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">title =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
|
||||
<a class="sourceLine" id="cb7-3" title="3"> <span class="dt">text =</span> <span class="st">"Count"</span>,</a>
|
||||
|
|
@ -154,8 +154,8 @@
|
|||
<a class="sourceLine" id="cb7-7" title="7"> <span class="dt">text =</span> <span class="st">"Cut"</span>, </a>
|
||||
<a class="sourceLine" id="cb7-8" title="8"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"14px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
|
||||
<a class="sourceLine" id="cb7-9" title="9"> ))</a></code></pre></div>
|
||||
<div id="htmlwidget-a9482eb1104143357056" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-a9482eb1104143357056">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
||||
<div id="htmlwidget-d6119d8bda0bb3f9e570" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||||
<script type="application/json" data-for="htmlwidget-d6119d8bda0bb3f9e570">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
HTMLWidgets.widget({
|
||||
|
||||
name: 'apexcharter',
|
||||
|
||||
type: 'output',
|
||||
|
||||
factory: function(el, width, height) {
|
||||
|
||||
var ax_opts;
|
||||
var apexchart = null;
|
||||
|
||||
return {
|
||||
|
||||
renderValue: function(x) {
|
||||
|
||||
|
||||
// Global options
|
||||
ax_opts = x.ax_opts;
|
||||
|
||||
// Sizing
|
||||
if (typeof ax_opts.chart === 'undefined') {
|
||||
ax_opts.chart = {};
|
||||
}
|
||||
ax_opts.chart.width = width;
|
||||
ax_opts.chart.height = height;
|
||||
|
||||
// Generate or update chart
|
||||
if (apexchart === null) {
|
||||
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
|
||||
apexchart.render();
|
||||
} else {
|
||||
if (x.auto_update) {
|
||||
apexchart.updateSeries(ax_opts.series);
|
||||
} else {
|
||||
apexchart.destroy();
|
||||
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
|
||||
apexchart.render();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
getChart: function(){
|
||||
return apexchart;
|
||||
},
|
||||
|
||||
resize: function(width, height) {
|
||||
apexchart.updateOptions({
|
||||
chart: {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
|
||||
function get_widget(id){
|
||||
|
||||
// Get the HTMLWidgets object
|
||||
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
||||
|
||||
// Use the getChart method we created to get the underlying billboard chart
|
||||
var widgetObj ;
|
||||
|
||||
if (typeof htmlWidgetsObj != 'undefined') {
|
||||
widgetObj = htmlWidgetsObj.getChart();
|
||||
}
|
||||
|
||||
return(widgetObj);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (HTMLWidgets.shinyMode) {
|
||||
// data = load
|
||||
Shiny.addCustomMessageHandler('update-apexchart-series',
|
||||
function(obj) {
|
||||
var chart = get_widget(obj.id);
|
||||
if (typeof chart != 'undefined') {
|
||||
chart.updateSeries(obj.data.newSeries, obj.data.animate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,93 @@
|
|||
HTMLWidgets.widget({
|
||||
|
||||
name: 'apexcharter',
|
||||
|
||||
type: 'output',
|
||||
|
||||
factory: function(el, width, height) {
|
||||
|
||||
var ax_opts;
|
||||
var apexchart = null;
|
||||
|
||||
return {
|
||||
|
||||
renderValue: function(x) {
|
||||
|
||||
|
||||
// Global options
|
||||
ax_opts = x.ax_opts;
|
||||
|
||||
// Sizing
|
||||
if (typeof ax_opts.chart === 'undefined') {
|
||||
ax_opts.chart = {};
|
||||
}
|
||||
ax_opts.chart.width = width;
|
||||
ax_opts.chart.height = height;
|
||||
|
||||
// Generate or update chart
|
||||
if (apexchart === null) {
|
||||
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
|
||||
apexchart.render();
|
||||
} else {
|
||||
if (x.auto_update) {
|
||||
apexchart.updateSeries(ax_opts.series);
|
||||
} else {
|
||||
apexchart.destroy();
|
||||
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
|
||||
apexchart.render();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
getChart: function(){
|
||||
return apexchart;
|
||||
},
|
||||
|
||||
resize: function(width, height) {
|
||||
apexchart.updateOptions({
|
||||
chart: {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
|
||||
function get_widget(id){
|
||||
|
||||
// Get the HTMLWidgets object
|
||||
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
|
||||
|
||||
// Use the getChart method we created to get the underlying billboard chart
|
||||
var widgetObj ;
|
||||
|
||||
if (typeof htmlWidgetsObj != 'undefined') {
|
||||
widgetObj = htmlWidgetsObj.getChart();
|
||||
}
|
||||
|
||||
return(widgetObj);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (HTMLWidgets.shinyMode) {
|
||||
// data = load
|
||||
Shiny.addCustomMessageHandler('update-apexchart-series',
|
||||
function(obj) {
|
||||
var chart = get_widget(obj.id);
|
||||
if (typeof chart != 'undefined') {
|
||||
chart.updateSeries(obj.data.newSeries, obj.data.animate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -83,7 +83,8 @@ economics_long <- economics_long %>%
|
|||
group_by(variable) %>%
|
||||
slice((n()-100):n())
|
||||
|
||||
apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable))
|
||||
apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>%
|
||||
ax_yaxis(decimalsInFloat = 2) # number of decimals to keep
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -91,6 +92,7 @@ Create area charts with `type = "area"`:
|
|||
|
||||
```{r area}
|
||||
apex(data = economics_long, type = "area", mapping = aes(x = date, y = value01, fill = variable)) %>%
|
||||
ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
|
||||
ax_chart(stacked = TRUE)
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue