Robot
/
apexcharter
mirror of https://github.com/dreamRs/apexcharter.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rebuild pkgdown

This commit is contained in:
pvictor 2020-11-18 10:43:05 +01:00
parent ffefe8d394
commit 67f09cd048
138 changed files with 12296 additions and 3899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/404.html
View File

@ -149,11 +149,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -236,7 +236,7 @@ Content not found. Please use links in the navbar.
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

8
docs/LICENSE-text.html
View File

@ -149,11 +149,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -222,7 +222,7 @@
<h1>License</h1>
</div>
<pre>YEAR: 2019
<pre>YEAR: 2020
COPYRIGHT HOLDER: Victor Perrier
</pre>
@ -238,7 +238,7 @@ COPYRIGHT HOLDER: Victor Perrier
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

265
docs/LICENSE.html Normal file
View File

@ -0,0 +1,265 @@
<!-- Generated by pkgdown: do not edit by hand -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MIT License • apexcharter</title>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="css/theme.css" rel="stylesheet">
<style>
#pkgdown-sidebar {
z-index: 100;
background: #FFF;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script>
<!-- Font -->
<link href="css/montserrat.css" rel="stylesheet">
<style>body {font-family: 'Montserrat', sans-serif;}</style>
<!-- bootstrap-toc -->
<link rel="stylesheet" href="bootstrap-toc.css">
<script src="bootstrap-toc.js"></script>
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous" />
<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script>
<!-- headroom.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
<!-- pkgdown -->
<link href="pkgdown.css" rel="stylesheet">
<script src="pkgdown.js"></script>
<!-- Particles -->
<script src="js/particles.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
.contents {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
#sidebar {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
footer {
z-index: 1;
}
#particles {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
</style>
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous" />
<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script>
<!-- headroom.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js" integrity="sha256-DJFC1kqIhelURkuza0AvYal5RxMtpzLjFhsnVIeuk+U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
<!-- pkgdown -->
<link href="pkgdown.css" rel="stylesheet">
<script src="pkgdown.js"></script>
<meta property="og:title" content="MIT License" />
<!-- mathjax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="body">
<div class="container template-title-body">
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">
<span class="fas fa fas fa-home fa-lg"></span>
</a>
</li>
<li>
<a href="articles/apexcharter.html">Get started</a>
</li>
<li>
<a href="reference/index.html">Reference</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Articles
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="articles/articles/advanced-configuration.html">Advanced configuration examples</a>
</li>
<li>
<a href="articles/chart-options.html">Chart options</a>
</li>
<li>
<a href="articles/shiny-integration.html">Shiny integration</a>
</li>
<li>
<a href="articles/spark-box.html">Spark boxes</a>
</li>
<li>
<a href="articles/sync-charts.html">Syncing charts</a>
</li>
</ul>
</li>
<li>
<a href="news/index.html">Changelog</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/dreamRs/apexcharter/">
<span class="fab fa fab fa-github fa-lg"></span>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</header>
<div class="row">
<div class="contents col-md-9">
<div class="page-header">
<h1>MIT License</h1>
</div>
<div id="mit-license" class="section level1">
<p>Copyright (c) 2020 Victor Perrier</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</div>
</div>
</div>
<footer>
<div class="copyright">
<p>Developed by <a href='https://twitter.com/_pvictorr'><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"/> Victor Perrier</a>, <a href='https://twitter.com/_mfaan'><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg" /> Fanny Meyer</a>.</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>
</div>
<div id="particles"></div>
<script>
window.onload = function() {
var config = {"particles":{"number":{"value":90,"density":{"enable":true,"value_area":1200}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":5,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;
particlesJS("particles", config);
};
</script>
</body>
</html>

300
docs/articles/apexcharter.html
View File

File diff suppressed because one or more lines are too long

4
docs/articles/apexcharter_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/apexcharter_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/apexcharter_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/apexcharter_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/apexcharter_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/apexcharter_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/apexcharter_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/apexcharter_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/apexcharter_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

1048
docs/articles/articles/advanced-configuration.html
View File

File diff suppressed because one or more lines are too long

4
docs/articles/articles/advanced-configuration_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/articles/advanced-configuration_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/articles/advanced-configuration_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/articles/advanced-configuration_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/articles/advanced-configuration_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

321
docs/articles/chart-options.html
View File

@ -84,11 +84,11 @@
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;"><a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -151,8 +151,9 @@
</header><script src="chart-options_files/accessible-code-block-0.0.1/empty-anchor.js"></script><script src="chart-options_files/htmlwidgets-1.5.1/htmlwidgets.js"></script><script src="chart-options_files/apexcharts-3.20.1/apexcharts.min.js"></script><link href="chart-options_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
<script src="chart-options_files/d3-format-1.4.2/d3-format.min.js"></script><script src="chart-options_files/apexcharter-binding-0.1.5.920/apexcharter.js"></script><div class="row">
</header><script src="chart-options_files/accessible-code-block-0.0.1/empty-anchor.js"></script><link href="chart-options_files/anchor-sections-1.0/anchor-sections.css" rel="stylesheet">
<script src="chart-options_files/anchor-sections-1.0/anchor-sections.js"></script><script src="chart-options_files/htmlwidgets-1.5.2/htmlwidgets.js"></script><script src="chart-options_files/apexcharts-3.22.2/apexcharts.min.js"></script><link href="chart-options_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
<script src="chart-options_files/d3-format-1.4.2/d3-format.min.js"></script><script src="chart-options_files/apexcharter-binding-0.1.8/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Chart options</h1>
@ -169,215 +170,195 @@
<h2 class="hasAnchor">
<a href="#title-subtitle-and-axis-titles" class="anchor"></a>Title, subtitle and axis titles</h2>
<p>Packages and data used below:</p>
<div class="sourceCode" id="cb1"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span>)
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://dplyr.tidyverse.org">dplyr</a></span>)
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://dplyr.tidyverse.org">dplyr</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"diamonds"</span>, package = <span class="st">"ggplot2"</span>)
<span class="kw">n_cut</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span>(<span class="kw">diamonds</span>, <span class="kw">cut</span>)
</pre></div>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"diamonds"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">n_cut</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="va">cut</span><span class="op">)</span></code></pre></div>
<div id="labs" class="section level3">
<h3 class="hasAnchor">
<a href="#labs" class="anchor"></a>Labs</h3>
<p>You can set title, subtitle and axis’ titles at once with <code><a href="../reference/ax_labs.html">ax_labs()</a></code>:</p>
<div class="sourceCode" id="cb2"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_labs.html">ax_labs</a></span>(
title = <span class="st">"Cut distribution"</span>,
subtitle = <span class="st">"Data from ggplot2"</span>,
x = <span class="st">"Cut"</span>,
y = <span class="st">"Count"</span>
)
</pre></div>
<div id="htmlwidget-1de8293915cc528dc616" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-1de8293915cc528dc616">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontWeight":400,"fontSize":"14px"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontWeight":400,"fontSize":"14px"}}},"title":{"text":"Cut distribution","style":{"fontWeight":700,"fontSize":"16px"}},"subtitle":{"text":"Data from ggplot2","style":{"fontWeight":400,"fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>If you more control (font size, alignment, …), you can use <code><a href="../reference/ax_title.html">ax_title()</a></code>, <code><a href="../reference/ax_subtitle.html">ax_subtitle()</a></code>, <code><a href="../reference/ax_xaxis.html">ax_xaxis()</a></code> and <code><a href="../reference/ax_yaxis.html">ax_yaxis()</a></code>, as described below.</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span>
title <span class="op">=</span> <span class="st">"Cut distribution"</span>,
subtitle <span class="op">=</span> <span class="st">"Data from ggplot2"</span>,
x <span class="op">=</span> <span class="st">"Cut"</span>,
y <span class="op">=</span> <span class="st">"Count"</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-d66575488fce9d888048" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d66575488fce9d888048">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontWeight":400,"fontSize":"14px"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontWeight":400,"fontSize":"14px"}}},"title":{"text":"Cut distribution","style":{"fontWeight":700,"fontSize":"16px"}},"subtitle":{"text":"Data from ggplot2","style":{"fontWeight":400,"fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>If you more control (font size, alignment, …), you can use <code><a href="../reference/ax_title.html">ax_title()</a></code>, <code><a href="../reference/ax_subtitle.html">ax_subtitle()</a></code>, <code><a href="../reference/ax_xaxis.html">ax_xaxis()</a></code> and <code><a href="../reference/ax_yaxis.html">ax_yaxis()</a></code>, as described below.</p>
</div>
<div id="title" class="section level3">
<h3 class="hasAnchor">
<a href="#title" class="anchor"></a>Title</h3>
<div class="sourceCode" id="cb3"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span>(text = <span class="st">"Cut distribution"</span>)
</pre></div>
<div id="htmlwidget-dad7e8930da74d480d6b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-dad7e8930da74d480d6b">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
<div class="sourceCode" id="cb4"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span>(
text = <span class="st">"Cut distribution"</span>,
align = <span class="st">"center"</span>,
style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(fontSize = <span class="st">"22px"</span>, fontWeight = <span class="fl">700</span>)
)
</pre></div>
<div id="htmlwidget-3cf425bf425ca9f9c0ac" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3cf425bf425ca9f9c0ac">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"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 class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut distribution"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-b6e08822a07c27b0084e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-b6e08822a07c27b0084e">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut distribution"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"22px"</span>, fontWeight <span class="op">=</span> <span class="fl">700</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-f615b0b2d8234b353099" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-f615b0b2d8234b353099">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"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="subtitle" class="section level3">
<h3 class="hasAnchor">
<a href="#subtitle" class="anchor"></a>Subtitle</h3>
<div class="sourceCode" id="cb5"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span>(text = <span class="st">"Cut distribution"</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span>(text = <span class="st">"Data from ggplot2"</span>)
</pre></div>
<div id="htmlwidget-2020df3cfad7b9410206" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-2020df3cfad7b9410206">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
<div class="sourceCode" id="cb6"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span>(
text = <span class="st">"Cut distribution"</span>,
align = <span class="st">"center"</span>,
style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(fontSize = <span class="st">"22px"</span>, fontWeight = <span class="fl">700</span>)
) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span>(
text = <span class="st">"Data from ggplot2"</span>,
align = <span class="st">"center"</span>,
style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(fontSize = <span class="st">"16px"</span>, fontWeight = <span class="fl">400</span>, color = <span class="st">"#BDBDBD"</span>)
)
</pre></div>
<div id="htmlwidget-87c79731fdc09ed37f69" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-87c79731fdc09ed37f69">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","fontWeight":400,"color":"#BDBDBD"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"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 class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut distribution"</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Data from ggplot2"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-691ea461979f109ebaa5" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-691ea461979f109ebaa5">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut distribution"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"22px"</span>, fontWeight <span class="op">=</span> <span class="fl">700</span><span class="op">)</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Data from ggplot2"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"16px"</span>, fontWeight <span class="op">=</span> <span class="fl">400</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-c5368b72e085fb9fcbed" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c5368b72e085fb9fcbed">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","fontWeight":400,"color":"#BDBDBD"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"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 level3">
<h3 class="hasAnchor">
<a href="#axis-title" class="anchor"></a>Axis title</h3>
<div class="sourceCode" id="cb7"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(text = <span class="st">"Count"</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span>(title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(text = <span class="st">"Cut"</span>))
</pre></div>
<div id="htmlwidget-a210eda54a76ca5a7c19" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a210eda54a76ca5a7c19">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count"}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
<div class="sourceCode" id="cb8"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">n_cut</span>, type = <span class="st">"column"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">cut</span>, y = <span class="kw">n</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
text = <span class="st">"Count"</span>,
style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(fontSize = <span class="st">"14px"</span>, color = <span class="st">"#BDBDBD"</span>)
)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span>(title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
text = <span class="st">"Cut"</span>,
style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(fontSize = <span class="st">"14px"</span>, color = <span class="st">"#BDBDBD"</span>)
))
</pre></div>
<div id="htmlwidget-1078094e4e93a0c1242d" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-1078094e4e93a0c1242d">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script>
<div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut"</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-3808345843ef9f9ff843" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3808345843ef9f9ff843">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count"}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
<div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_cut</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Count"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"14px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"14px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-b8bbadc383ebbea342e5" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-b8bbadc383ebbea342e5">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="lines" class="section level2">
<h2 class="hasAnchor">
<a href="#lines" class="anchor"></a>Lines</h2>
<div class="sourceCode" id="cb9"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span>)
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://dplyr.tidyverse.org">dplyr</a></span>)
<div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://dplyr.tidyverse.org">dplyr</a></span><span class="op">)</span>
<span class="co">## economics dataset from ggplot2</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"economics"</span>, package = <span class="st">"ggplot2"</span>)
<span class="kw">economics</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span>(<span class="kw">economics</span>, <span class="fl">50</span>)
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"economics"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">economics</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">50</span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"economics_long"</span>, package = <span class="st">"ggplot2"</span>)
<span class="kw">economics_long</span> <span class="op">&lt;-</span> <span class="kw">economics_long</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html">filter</a></span>(<span class="kw">variable</span> <span class="op">%in%</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="st">"pce"</span>, <span class="st">"pop"</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/group_by.html">group_by</a></span>(<span class="kw">variable</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/slice.html">slice</a></span>(<span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span>(<span class="fu"><a href="https://dplyr.tidyverse.org/reference/ranking.html">row_number</a></span>(), <span class="fl">20</span>))
</pre></div>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"economics_long"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">economics_long</span> <span class="op">&lt;-</span> <span class="va">economics_long</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html">filter</a></span><span class="op">(</span><span class="va">variable</span> <span class="op">%in%</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="st">"pce"</span>, <span class="st">"pop"</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/group_by.html">group_by</a></span><span class="op">(</span><span class="va">variable</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="https://dplyr.tidyverse.org/reference/slice.html">slice</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span><span class="op">(</span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/ranking.html">row_number</a></span><span class="op">(</span><span class="op">)</span>, <span class="fl">20</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="type-of-line" class="section level3">
<h3 class="hasAnchor">
<a href="#type-of-line" class="anchor"></a>Type of line</h3>
<p>Classic line:</p>
<div class="sourceCode" id="cb10"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>))
</pre></div>
<div id="htmlwidget-196f3b71b7bbc445e77e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-196f3b71b7bbc445e77e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Spline curve:</p>
<div class="sourceCode" id="cb11"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(curve = <span class="st">"smooth"</span>)
</pre></div>
<div id="htmlwidget-fe05700e74da95c5b36f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-fe05700e74da95c5b36f">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Steps chart:</p>
<div class="sourceCode" id="cb12"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(curve = <span class="st">"stepline"</span>)
</pre></div>
<div id="htmlwidget-f40ecbb882c66df2cc8a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-f40ecbb882c66df2cc8a">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script>
<div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-10df38b6df9e29e189ca" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-10df38b6df9e29e189ca">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Spline curve:</p>
<div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>curve <span class="op">=</span> <span class="st">"smooth"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-386208400ff92ffc35d6" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-386208400ff92ffc35d6">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Steps chart:</p>
<div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>curve <span class="op">=</span> <span class="st">"stepline"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-a22eeae5cf7e97514aff" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a22eeae5cf7e97514aff">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script>
</div>
<div id="line-appearance" class="section level3">
<h3 class="hasAnchor">
<a href="#line-appearance" class="anchor"></a>Line appearance</h3>
<p>Color line with gradient:</p>
<div class="sourceCode" id="cb13"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span>(
type = <span class="st">"gradient"</span>,
gradient = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
shade = <span class="st">"dark"</span>,
gradientToColors = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="st">"#FDD835"</span>),
shadeIntensity = <span class="fl">1</span>,
type = <span class="st">"horizontal"</span>,
opacityFrom = <span class="fl">1</span>,
opacityTo = <span class="fl">1</span>,
stops = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">0</span>, <span class="fl">100</span>, <span class="fl">100</span>, <span class="fl">100</span>)
)
)
</pre></div>
<div id="htmlwidget-bc134aa83a82349acbbe" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-bc134aa83a82349acbbe">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Solid area color:</p>
<div class="sourceCode" id="cb14"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"area"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span>(type = <span class="st">"solid"</span>, opacity = <span class="fl">1</span>)
</pre></div>
<div id="htmlwidget-9e8fd86b1a876032e368" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9e8fd86b1a876032e368">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","type":"area","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"solid","opacity":1}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Line width:</p>
<div class="sourceCode" id="cb15"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(width = <span class="fl">1</span>)
</pre></div>
<div id="htmlwidget-22cb2a0552d2d1d92918" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-22cb2a0552d2d1d92918">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Dotted line</p>
<div class="sourceCode" id="cb16"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(dashArray = <span class="fl">6</span>)
</pre></div>
<div id="htmlwidget-58157eb78aaf200999c6" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-58157eb78aaf200999c6">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2,"dashArray":6},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script>
<div class="sourceCode" id="cb13"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span><span class="op">(</span>
type <span class="op">=</span> <span class="st">"gradient"</span>,
gradient <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
shade <span class="op">=</span> <span class="st">"dark"</span>,
gradientToColors <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span><span class="st">"#FDD835"</span><span class="op">)</span>,
shadeIntensity <span class="op">=</span> <span class="fl">1</span>,
type <span class="op">=</span> <span class="st">"horizontal"</span>,
opacityFrom <span class="op">=</span> <span class="fl">1</span>,
opacityTo <span class="op">=</span> <span class="fl">1</span>,
stops <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">100</span>, <span class="fl">100</span>, <span class="fl">100</span><span class="op">)</span>
<span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-45cb16ac0293120481ca" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-45cb16ac0293120481ca">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Solid area color:</p>
<div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"area"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span><span class="op">(</span>type <span class="op">=</span> <span class="st">"solid"</span>, opacity <span class="op">=</span> <span class="fl">1</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-8b4b541814f1c32efff1" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-8b4b541814f1c32efff1">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","type":"area","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"solid","opacity":1}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Line width:</p>
<div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">1</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-04dc5e9a08b40a7bacef" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-04dc5e9a08b40a7bacef">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script><p>Dotted line</p>
<div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>dashArray <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-cc294d50f4ec24e4e2cb" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-cc294d50f4ec24e4e2cb">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2011-03-01').getTime()",21.5],["new Date('2011-04-01').getTime()",20.9],["new Date('2011-05-01').getTime()",21.6],["new Date('2011-06-01').getTime()",22.4],["new Date('2011-07-01').getTime()",22],["new Date('2011-08-01').getTime()",22.4],["new Date('2011-09-01').getTime()",22],["new Date('2011-10-01').getTime()",20.6],["new Date('2011-11-01').getTime()",20.8],["new Date('2011-12-01').getTime()",20.5],["new Date('2012-01-01').getTime()",20.8],["new Date('2012-02-01').getTime()",19.7],["new Date('2012-03-01').getTime()",19.2],["new Date('2012-04-01').getTime()",19.1],["new Date('2012-05-01').getTime()",19.9],["new Date('2012-06-01').getTime()",20.4],["new Date('2012-07-01').getTime()",17.5],["new Date('2012-08-01').getTime()",18.4],["new Date('2012-09-01').getTime()",18.8],["new Date('2012-10-01').getTime()",19.9],["new Date('2012-11-01').getTime()",18.6],["new Date('2012-12-01').getTime()",17.7],["new Date('2013-01-01').getTime()",15.8],["new Date('2013-02-01').getTime()",17.2],["new Date('2013-03-01').getTime()",17.6],["new Date('2013-04-01').getTime()",17.1],["new Date('2013-05-01').getTime()",17.1],["new Date('2013-06-01').getTime()",17],["new Date('2013-07-01').getTime()",16.2],["new Date('2013-08-01').getTime()",16.5],["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2,"dashArray":6},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.0.data.20.0","ax_opts.series.0.data.21.0","ax_opts.series.0.data.22.0","ax_opts.series.0.data.23.0","ax_opts.series.0.data.24.0","ax_opts.series.0.data.25.0","ax_opts.series.0.data.26.0","ax_opts.series.0.data.27.0","ax_opts.series.0.data.28.0","ax_opts.series.0.data.29.0","ax_opts.series.0.data.30.0","ax_opts.series.0.data.31.0","ax_opts.series.0.data.32.0","ax_opts.series.0.data.33.0","ax_opts.series.0.data.34.0","ax_opts.series.0.data.35.0","ax_opts.series.0.data.36.0","ax_opts.series.0.data.37.0","ax_opts.series.0.data.38.0","ax_opts.series.0.data.39.0","ax_opts.series.0.data.40.0","ax_opts.series.0.data.41.0","ax_opts.series.0.data.42.0","ax_opts.series.0.data.43.0","ax_opts.series.0.data.44.0","ax_opts.series.0.data.45.0","ax_opts.series.0.data.46.0","ax_opts.series.0.data.47.0","ax_opts.series.0.data.48.0","ax_opts.series.0.data.49.0"],"jsHooks":[]}</script>
</div>
<div id="markers" class="section level3">
<h3 class="hasAnchor">
<a href="#markers" class="anchor"></a>Markers</h3>
<p>Add points to line :</p>
<div class="sourceCode" id="cb17"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span>(<span class="kw">economics</span>, <span class="fl">20</span>), type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span>(size = <span class="fl">6</span>)
</pre></div>
<div id="htmlwidget-ebbaeaab7905ec0531c0" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ebbaeaab7905ec0531c0">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>Add labels over points</p>
<div class="sourceCode" id="cb18"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span>(<span class="kw">economics</span>, <span class="fl">20</span>), type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span>(size = <span class="fl">6</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span>(enabled = <span class="fl">TRUE</span>)
</pre></div>
<div id="htmlwidget-7e921bc8371205457fac" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-7e921bc8371205457fac">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script>
<div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">20</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-8303578762c66f903aa3" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-8303578762c66f903aa3">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>Add labels over points</p>
<div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">20</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span><span class="op">(</span>enabled <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-3fa94b0c611c177734ef" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3fa94b0c611c177734ef">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[["new Date('2013-09-01').getTime()",16.5],["new Date('2013-10-01').getTime()",16.3],["new Date('2013-11-01').getTime()",17.1],["new Date('2013-12-01').getTime()",17.3],["new Date('2014-01-01').getTime()",15.4],["new Date('2014-02-01').getTime()",15.9],["new Date('2014-03-01').getTime()",15.8],["new Date('2014-04-01').getTime()",15.7],["new Date('2014-05-01').getTime()",14.6],["new Date('2014-06-01').getTime()",13.8],["new Date('2014-07-01').getTime()",13.1],["new Date('2014-08-01').getTime()",12.9],["new Date('2014-09-01').getTime()",13.4],["new Date('2014-10-01').getTime()",13.6],["new Date('2014-11-01').getTime()",13],["new Date('2014-12-01').getTime()",12.9],["new Date('2015-01-01').getTime()",13.2],["new Date('2015-02-01').getTime()",12.9],["new Date('2015-03-01').getTime()",12],["new Date('2015-04-01').getTime()",11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script>
</div>
<div id="multiple-lines" class="section level3">
<h3 class="hasAnchor">
<a href="#multiple-lines" class="anchor"></a>Multiple lines</h3>
<p>You can use vectors of parameters to custom series separately:</p>
<div class="sourceCode" id="cb19"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics_long</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">value01</span>, group = <span class="kw">variable</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(decimalsInFloat = <span class="fl">2</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span>(size = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">3</span>, <span class="fl">6</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(width = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">1</span>, <span class="fl">3</span>))
</pre></div>
<div id="htmlwidget-38fe8588a20945a7bf7e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-38fe8588a20945a7bf7e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[["new Date('2013-09-01').getTime()",0.92924677636026],["new Date('2013-10-01').getTime()",0.933773134481608],["new Date('2013-11-01').getTime()",0.939574402546397],["new Date('2013-12-01').getTime()",0.942167004646148],["new Date('2014-01-01').getTime()",0.941704956747183],["new Date('2014-02-01').getTime()",0.946299766409118],["new Date('2014-03-01').getTime()",0.952871114305516],["new Date('2014-04-01').getTime()",0.957970754079284],["new Date('2014-05-01').getTime()",0.961889604777918],["new Date('2014-06-01').getTime()",0.967759324383294],["new Date('2014-07-01').getTime()",0.971481376902739],["new Date('2014-08-01').getTime()",0.978651675779278],["new Date('2014-09-01').getTime()",0.979772569756398],["new Date('2014-10-01').getTime()",0.985385596084572],["new Date('2014-11-01').getTime()",0.987815625775428],["new Date('2014-12-01').getTime()",0.988722608688212],["new Date('2015-01-01').getTime()",0.987353577876462],["new Date('2015-02-01').getTime()",0.990468122973193],["new Date('2015-03-01').getTime()",0.99696246288643],["new Date('2015-04-01').getTime()",1]]},{"name":"pop","type":"line","data":[["new Date('2013-09-01').getTime()",0.970448177482025],["new Date('2013-10-01').getTime()",0.972224366782906],["new Date('2013-11-01').getTime()",0.97391518362249],["new Date('2013-12-01').getTime()",0.975423315392571],["new Date('2014-01-01').getTime()",0.976921972290395],["new Date('2014-02-01').getTime()",0.97823645673634],["new Date('2014-03-01').getTime()",0.97957855225842],["new Date('2014-04-01').getTime()",0.980992099657577],["new Date('2014-05-01').getTime()",0.982473622896551],["new Date('2014-06-01').getTime()",0.984073150615668],["new Date('2014-07-01').getTime()",0.985702006885595],["new Date('2014-08-01').getTime()",0.987603703319152],["new Date('2014-09-01').getTime()",0.989506155770269],["new Date('2014-10-01').getTime()",0.991383363808922],["new Date('2014-11-01').getTime()",0.993112959418826],["new Date('2014-12-01').getTime()",0.994608132061805],["new Date('2015-01-01').getTime()",0.996107750416745],["new Date('2015-02-01').getTime()",0.997306408041825],["new Date('2015-03-01').getTime()",0.998590610697427],["new Date('2015-04-01').getTime()",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":[1,3]},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":[3,6]}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.1.data.0.0","ax_opts.series.1.data.1.0","ax_opts.series.1.data.2.0","ax_opts.series.1.data.3.0","ax_opts.series.1.data.4.0","ax_opts.series.1.data.5.0","ax_opts.series.1.data.6.0","ax_opts.series.1.data.7.0","ax_opts.series.1.data.8.0","ax_opts.series.1.data.9.0","ax_opts.series.1.data.10.0","ax_opts.series.1.data.11.0","ax_opts.series.1.data.12.0","ax_opts.series.1.data.13.0","ax_opts.series.1.data.14.0","ax_opts.series.1.data.15.0","ax_opts.series.1.data.16.0","ax_opts.series.1.data.17.0","ax_opts.series.1.data.18.0","ax_opts.series.1.data.19.0"],"jsHooks":[]}</script><div class="sourceCode" id="cb20"><pre class="downlit">
<span class="fu"><a href="../reference/apex.html">apex</a></span>(data = <span class="kw">economics_long</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">value01</span>, group = <span class="kw">variable</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(decimalsInFloat = <span class="fl">2</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(dashArray = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">8</span>, <span class="fl">5</span>))
</pre></div>
<div id="htmlwidget-64c49264c8f93e2cb6ca" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-64c49264c8f93e2cb6ca">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[["new Date('2013-09-01').getTime()",0.92924677636026],["new Date('2013-10-01').getTime()",0.933773134481608],["new Date('2013-11-01').getTime()",0.939574402546397],["new Date('2013-12-01').getTime()",0.942167004646148],["new Date('2014-01-01').getTime()",0.941704956747183],["new Date('2014-02-01').getTime()",0.946299766409118],["new Date('2014-03-01').getTime()",0.952871114305516],["new Date('2014-04-01').getTime()",0.957970754079284],["new Date('2014-05-01').getTime()",0.961889604777918],["new Date('2014-06-01').getTime()",0.967759324383294],["new Date('2014-07-01').getTime()",0.971481376902739],["new Date('2014-08-01').getTime()",0.978651675779278],["new Date('2014-09-01').getTime()",0.979772569756398],["new Date('2014-10-01').getTime()",0.985385596084572],["new Date('2014-11-01').getTime()",0.987815625775428],["new Date('2014-12-01').getTime()",0.988722608688212],["new Date('2015-01-01').getTime()",0.987353577876462],["new Date('2015-02-01').getTime()",0.990468122973193],["new Date('2015-03-01').getTime()",0.99696246288643],["new Date('2015-04-01').getTime()",1]]},{"name":"pop","type":"line","data":[["new Date('2013-09-01').getTime()",0.970448177482025],["new Date('2013-10-01').getTime()",0.972224366782906],["new Date('2013-11-01').getTime()",0.97391518362249],["new Date('2013-12-01').getTime()",0.975423315392571],["new Date('2014-01-01').getTime()",0.976921972290395],["new Date('2014-02-01').getTime()",0.97823645673634],["new Date('2014-03-01').getTime()",0.97957855225842],["new Date('2014-04-01').getTime()",0.980992099657577],["new Date('2014-05-01').getTime()",0.982473622896551],["new Date('2014-06-01').getTime()",0.984073150615668],["new Date('2014-07-01').getTime()",0.985702006885595],["new Date('2014-08-01').getTime()",0.987603703319152],["new Date('2014-09-01').getTime()",0.989506155770269],["new Date('2014-10-01').getTime()",0.991383363808922],["new Date('2014-11-01').getTime()",0.993112959418826],["new Date('2014-12-01').getTime()",0.994608132061805],["new Date('2015-01-01').getTime()",0.996107750416745],["new Date('2015-02-01').getTime()",0.997306408041825],["new Date('2015-03-01').getTime()",0.998590610697427],["new Date('2015-04-01').getTime()",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2,"dashArray":[8,5]},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.1.data.0.0","ax_opts.series.1.data.1.0","ax_opts.series.1.data.2.0","ax_opts.series.1.data.3.0","ax_opts.series.1.data.4.0","ax_opts.series.1.data.5.0","ax_opts.series.1.data.6.0","ax_opts.series.1.data.7.0","ax_opts.series.1.data.8.0","ax_opts.series.1.data.9.0","ax_opts.series.1.data.10.0","ax_opts.series.1.data.11.0","ax_opts.series.1.data.12.0","ax_opts.series.1.data.13.0","ax_opts.series.1.data.14.0","ax_opts.series.1.data.15.0","ax_opts.series.1.data.16.0","ax_opts.series.1.data.17.0","ax_opts.series.1.data.18.0","ax_opts.series.1.data.19.0"],"jsHooks":[]}</script>
<div class="sourceCode" id="cb19"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, group <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">6</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">1</span>, <span class="fl">3</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-a978ec598c9576b992fa" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a978ec598c9576b992fa">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[["new Date('2013-09-01').getTime()",0.92924677636026],["new Date('2013-10-01').getTime()",0.933773134481608],["new Date('2013-11-01').getTime()",0.939574402546397],["new Date('2013-12-01').getTime()",0.942167004646148],["new Date('2014-01-01').getTime()",0.941704956747183],["new Date('2014-02-01').getTime()",0.946299766409118],["new Date('2014-03-01').getTime()",0.952871114305516],["new Date('2014-04-01').getTime()",0.957970754079284],["new Date('2014-05-01').getTime()",0.961889604777918],["new Date('2014-06-01').getTime()",0.967759324383294],["new Date('2014-07-01').getTime()",0.971481376902739],["new Date('2014-08-01').getTime()",0.978651675779278],["new Date('2014-09-01').getTime()",0.979772569756398],["new Date('2014-10-01').getTime()",0.985385596084572],["new Date('2014-11-01').getTime()",0.987815625775428],["new Date('2014-12-01').getTime()",0.988722608688212],["new Date('2015-01-01').getTime()",0.987353577876462],["new Date('2015-02-01').getTime()",0.990468122973193],["new Date('2015-03-01').getTime()",0.99696246288643],["new Date('2015-04-01').getTime()",1]]},{"name":"pop","type":"line","data":[["new Date('2013-09-01').getTime()",0.970448177482025],["new Date('2013-10-01').getTime()",0.972224366782906],["new Date('2013-11-01').getTime()",0.97391518362249],["new Date('2013-12-01').getTime()",0.975423315392571],["new Date('2014-01-01').getTime()",0.976921972290395],["new Date('2014-02-01').getTime()",0.97823645673634],["new Date('2014-03-01').getTime()",0.97957855225842],["new Date('2014-04-01').getTime()",0.980992099657577],["new Date('2014-05-01').getTime()",0.982473622896551],["new Date('2014-06-01').getTime()",0.984073150615668],["new Date('2014-07-01').getTime()",0.985702006885595],["new Date('2014-08-01').getTime()",0.987603703319152],["new Date('2014-09-01').getTime()",0.989506155770269],["new Date('2014-10-01').getTime()",0.991383363808922],["new Date('2014-11-01').getTime()",0.993112959418826],["new Date('2014-12-01').getTime()",0.994608132061805],["new Date('2015-01-01').getTime()",0.996107750416745],["new Date('2015-02-01').getTime()",0.997306408041825],["new Date('2015-03-01').getTime()",0.998590610697427],["new Date('2015-04-01').getTime()",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":[1,3]},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":[3,6]}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.1.data.0.0","ax_opts.series.1.data.1.0","ax_opts.series.1.data.2.0","ax_opts.series.1.data.3.0","ax_opts.series.1.data.4.0","ax_opts.series.1.data.5.0","ax_opts.series.1.data.6.0","ax_opts.series.1.data.7.0","ax_opts.series.1.data.8.0","ax_opts.series.1.data.9.0","ax_opts.series.1.data.10.0","ax_opts.series.1.data.11.0","ax_opts.series.1.data.12.0","ax_opts.series.1.data.13.0","ax_opts.series.1.data.14.0","ax_opts.series.1.data.15.0","ax_opts.series.1.data.16.0","ax_opts.series.1.data.17.0","ax_opts.series.1.data.18.0","ax_opts.series.1.data.19.0"],"jsHooks":[]}</script><div class="sourceCode" id="cb20"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, group <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>dashArray <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">8</span>, <span class="fl">5</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-ba1dff9b6ad4982a82b1" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ba1dff9b6ad4982a82b1">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[["new Date('2013-09-01').getTime()",0.92924677636026],["new Date('2013-10-01').getTime()",0.933773134481608],["new Date('2013-11-01').getTime()",0.939574402546397],["new Date('2013-12-01').getTime()",0.942167004646148],["new Date('2014-01-01').getTime()",0.941704956747183],["new Date('2014-02-01').getTime()",0.946299766409118],["new Date('2014-03-01').getTime()",0.952871114305516],["new Date('2014-04-01').getTime()",0.957970754079284],["new Date('2014-05-01').getTime()",0.961889604777918],["new Date('2014-06-01').getTime()",0.967759324383294],["new Date('2014-07-01').getTime()",0.971481376902739],["new Date('2014-08-01').getTime()",0.978651675779278],["new Date('2014-09-01').getTime()",0.979772569756398],["new Date('2014-10-01').getTime()",0.985385596084572],["new Date('2014-11-01').getTime()",0.987815625775428],["new Date('2014-12-01').getTime()",0.988722608688212],["new Date('2015-01-01').getTime()",0.987353577876462],["new Date('2015-02-01').getTime()",0.990468122973193],["new Date('2015-03-01').getTime()",0.99696246288643],["new Date('2015-04-01').getTime()",1]]},{"name":"pop","type":"line","data":[["new Date('2013-09-01').getTime()",0.970448177482025],["new Date('2013-10-01').getTime()",0.972224366782906],["new Date('2013-11-01').getTime()",0.97391518362249],["new Date('2013-12-01').getTime()",0.975423315392571],["new Date('2014-01-01').getTime()",0.976921972290395],["new Date('2014-02-01').getTime()",0.97823645673634],["new Date('2014-03-01').getTime()",0.97957855225842],["new Date('2014-04-01').getTime()",0.980992099657577],["new Date('2014-05-01').getTime()",0.982473622896551],["new Date('2014-06-01').getTime()",0.984073150615668],["new Date('2014-07-01').getTime()",0.985702006885595],["new Date('2014-08-01').getTime()",0.987603703319152],["new Date('2014-09-01').getTime()",0.989506155770269],["new Date('2014-10-01').getTime()",0.991383363808922],["new Date('2014-11-01').getTime()",0.993112959418826],["new Date('2014-12-01').getTime()",0.994608132061805],["new Date('2015-01-01').getTime()",0.996107750416745],["new Date('2015-02-01').getTime()",0.997306408041825],["new Date('2015-03-01').getTime()",0.998590610697427],["new Date('2015-04-01').getTime()",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2,"dashArray":[8,5]},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0","ax_opts.series.1.data.0.0","ax_opts.series.1.data.1.0","ax_opts.series.1.data.2.0","ax_opts.series.1.data.3.0","ax_opts.series.1.data.4.0","ax_opts.series.1.data.5.0","ax_opts.series.1.data.6.0","ax_opts.series.1.data.7.0","ax_opts.series.1.data.8.0","ax_opts.series.1.data.9.0","ax_opts.series.1.data.10.0","ax_opts.series.1.data.11.0","ax_opts.series.1.data.12.0","ax_opts.series.1.data.13.0","ax_opts.series.1.data.14.0","ax_opts.series.1.data.15.0","ax_opts.series.1.data.16.0","ax_opts.series.1.data.17.0","ax_opts.series.1.data.18.0","ax_opts.series.1.data.19.0"],"jsHooks":[]}</script>
</div>
</div>
</div>
@ -417,7 +398,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

4
docs/articles/chart-options_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/chart-options_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/chart-options_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/chart-options_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/chart-options_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/chart-options_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/chart-options_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/chart-options_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/chart-options_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

6
docs/articles/index.html
View File

@ -149,11 +149,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -245,7 +245,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

192
docs/articles/shiny-integration.html
View File

File diff suppressed because one or more lines are too long

4
docs/articles/shiny-integration_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/shiny-integration_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/shiny-integration_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/shiny-integration_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/shiny-integration_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/shiny-integration_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/shiny-integration_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/shiny-integration_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

73
docs/articles/spark-box.html
View File

@ -84,11 +84,11 @@
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;"><a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -151,8 +151,9 @@
</header><script src="spark-box_files/accessible-code-block-0.0.1/empty-anchor.js"></script><script src="spark-box_files/htmlwidgets-1.5.1/htmlwidgets.js"></script><script src="spark-box_files/apexcharts-3.20.1/apexcharts.min.js"></script><link href="spark-box_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
<script src="spark-box_files/d3-format-1.4.2/d3-format.min.js"></script><script src="spark-box_files/apexcharter-binding-0.1.5.920/apexcharter.js"></script><div class="row">
</header><script src="spark-box_files/accessible-code-block-0.0.1/empty-anchor.js"></script><link href="spark-box_files/anchor-sections-1.0/anchor-sections.css" rel="stylesheet">
<script src="spark-box_files/anchor-sections-1.0/anchor-sections.js"></script><script src="spark-box_files/htmlwidgets-1.5.2/htmlwidgets.js"></script><script src="spark-box_files/apexcharts-3.22.2/apexcharts.min.js"></script><link href="spark-box_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
<script src="spark-box_files/d3-format-1.4.2/d3-format.min.js"></script><script src="spark-box_files/apexcharter-binding-0.1.8/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Spark boxes</h1>
@ -165,41 +166,37 @@
<div class="sourceCode" id="cb1"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span>)
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="kw">spark_data</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/data.frame.html">data.frame</a></span>(
date = <span class="fu"><a href="https://rdrr.io/r/base/Sys.time.html">Sys.Date</a></span>() <span class="op">+</span> <span class="fl">1</span><span class="op">:</span><span class="fl">20</span>,
var1 = <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span>(<span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span>(<span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span>)),
var2 = <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span>(<span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span>(<span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span>)),
var3 = <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span>(<span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span>(<span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span>))
)
</pre></div>
<span class="va">spark_data</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/data.frame.html">data.frame</a></span><span class="op">(</span>
date <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Sys.time.html">Sys.Date</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span> <span class="fl">1</span><span class="op">:</span><span class="fl">20</span>,
var1 <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span><span class="op">(</span><span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span><span class="op">)</span><span class="op">)</span>,
var2 <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span><span class="op">(</span><span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span><span class="op">)</span><span class="op">)</span>,
var3 <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Round.html">round</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/stats/Normal.html">rnorm</a></span><span class="op">(</span><span class="fl">20</span>, <span class="fl">50</span>, <span class="fl">10</span><span class="op">)</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<p>Create boxes with a sparkline to display a specific value:</p>
<div class="sourceCode" id="cb2"><pre class="downlit">
<span class="fu"><a href="../reference/spark_box.html">spark_box</a></span>(
data = <span class="kw">spark_data</span>,
title = <span class="fu"><a href="https://rdrr.io/r/base/mean.html">mean</a></span>(<span class="kw">spark_data</span><span class="op">$</span><span class="kw">var1</span>),
subtitle = <span class="st">"Variable 1"</span>
)
</pre></div>
<div id="htmlwidget-4067c4190a516558fc06" style="width:100%;height:160px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4067c4190a516558fc06">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[["new Date('2020-09-10').getTime()",47],["new Date('2020-09-11').getTime()",37],["new Date('2020-09-12').getTime()",60],["new Date('2020-09-13').getTime()",44],["new Date('2020-09-14').getTime()",34],["new Date('2020-09-15').getTime()",49],["new Date('2020-09-16').getTime()",35],["new Date('2020-09-17').getTime()",53],["new Date('2020-09-18').getTime()",32],["new Date('2020-09-19').getTime()",46],["new Date('2020-09-20').getTime()",40],["new Date('2020-09-21').getTime()",59],["new Date('2020-09-22').getTime()",63],["new Date('2020-09-23').getTime()",31],["new Date('2020-09-24').getTime()",62],["new Date('2020-09-25').getTime()",56],["new Date('2020-09-26').getTime()",12],["new Date('2020-09-27').getTime()",42],["new Date('2020-09-28').getTime()",47],["new Date('2020-09-29').getTime()",45]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}},"show":false},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"colors":["#2E93fA"],"title":{"text":44.7,"style":{"fontSize":"24px"}},"subtitle":{"text":"Variable 1","style":{"fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":true,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":{"color":"#2E93fA","background":"#FFF"},"xaxis":{"min":"2020-09-10","max":"2020-09-29"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>With more styles :</p>
<div class="sourceCode" id="cb3"><pre class="downlit">
<span class="fu"><a href="../reference/spark_box.html">spark_box</a></span>(
data = <span class="kw">spark_data</span>,
title = <span class="fu"><a href="https://rdrr.io/r/base/mean.html">mean</a></span>(<span class="kw">spark_data</span><span class="op">$</span><span class="kw">var1</span>),
subtitle = <span class="st">"Variable 1"</span>,
color = <span class="st">"#FFF"</span>, background = <span class="st">"#2E93fA"</span>,
title_style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(color = <span class="st">"#FFF"</span>),
subtitle_style = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(color = <span class="st">"#FFF"</span>)
)
</pre></div>
<div id="htmlwidget-29214aaf080dd98d8784" style="width:100%;height:160px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-29214aaf080dd98d8784">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[["new Date('2020-09-10').getTime()",47],["new Date('2020-09-11').getTime()",37],["new Date('2020-09-12').getTime()",60],["new Date('2020-09-13').getTime()",44],["new Date('2020-09-14').getTime()",34],["new Date('2020-09-15').getTime()",49],["new Date('2020-09-16').getTime()",35],["new Date('2020-09-17').getTime()",53],["new Date('2020-09-18').getTime()",32],["new Date('2020-09-19').getTime()",46],["new Date('2020-09-20').getTime()",40],["new Date('2020-09-21').getTime()",59],["new Date('2020-09-22').getTime()",63],["new Date('2020-09-23').getTime()",31],["new Date('2020-09-24').getTime()",62],["new Date('2020-09-25').getTime()",56],["new Date('2020-09-26').getTime()",12],["new Date('2020-09-27').getTime()",42],["new Date('2020-09-28').getTime()",47],["new Date('2020-09-29').getTime()",45]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}},"show":false},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"colors":["#FFF"],"title":{"text":44.7,"style":{"color":"#FFF","fontSize":"24px"}},"subtitle":{"text":"Variable 1","style":{"color":"#FFF","fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":true,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":{"color":"#FFF","background":"#2E93fA"},"xaxis":{"min":"2020-09-10","max":"2020-09-29"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>You can also use spark boxes in Shiny application, use code to launch an example :</p>
<div class="sourceCode" id="cb4"><pre class="downlit">
<span class="fu">run_sparkbox_demo</span>()
</pre></div>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/spark_box.html">spark_box</a></span><span class="op">(</span>
data <span class="op">=</span> <span class="va">spark_data</span>,
title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/mean.html">mean</a></span><span class="op">(</span><span class="va">spark_data</span><span class="op">$</span><span class="va">var1</span><span class="op">)</span>,
subtitle <span class="op">=</span> <span class="st">"Variable 1"</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-6e0813785f669cdbcf64" style="width:100%;height:160px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-6e0813785f669cdbcf64">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[["new Date('2020-11-19').getTime()",70],["new Date('2020-11-20').getTime()",48],["new Date('2020-11-21').getTime()",36],["new Date('2020-11-22').getTime()",35],["new Date('2020-11-23').getTime()",54],["new Date('2020-11-24').getTime()",66],["new Date('2020-11-25').getTime()",53],["new Date('2020-11-26').getTime()",46],["new Date('2020-11-27').getTime()",63],["new Date('2020-11-28').getTime()",40],["new Date('2020-11-29').getTime()",47],["new Date('2020-11-30').getTime()",44],["new Date('2020-12-01').getTime()",47],["new Date('2020-12-02').getTime()",34],["new Date('2020-12-03').getTime()",63],["new Date('2020-12-04').getTime()",35],["new Date('2020-12-05').getTime()",46],["new Date('2020-12-06').getTime()",42],["new Date('2020-12-07').getTime()",46],["new Date('2020-12-08').getTime()",49]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}},"show":false},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"colors":["#2E93fA"],"title":{"text":48.2,"style":{"fontSize":"24px"}},"subtitle":{"text":"Variable 1","style":{"fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":true,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":{"color":"#2E93fA","background":"#FFF"},"xaxis":{"min":"2020-11-19","max":"2020-12-08"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>With more styles :</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/spark_box.html">spark_box</a></span><span class="op">(</span>
data <span class="op">=</span> <span class="va">spark_data</span>,
title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/mean.html">mean</a></span><span class="op">(</span><span class="va">spark_data</span><span class="op">$</span><span class="va">var1</span><span class="op">)</span>,
subtitle <span class="op">=</span> <span class="st">"Variable 1"</span>,
color <span class="op">=</span> <span class="st">"#FFF"</span>, background <span class="op">=</span> <span class="st">"#2E93fA"</span>,
title_style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>color <span class="op">=</span> <span class="st">"#FFF"</span><span class="op">)</span>,
subtitle_style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>color <span class="op">=</span> <span class="st">"#FFF"</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-c4cf7c28e4b5bd2cf5c2" style="width:100%;height:160px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c4cf7c28e4b5bd2cf5c2">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[["new Date('2020-11-19').getTime()",70],["new Date('2020-11-20').getTime()",48],["new Date('2020-11-21').getTime()",36],["new Date('2020-11-22').getTime()",35],["new Date('2020-11-23').getTime()",54],["new Date('2020-11-24').getTime()",66],["new Date('2020-11-25').getTime()",53],["new Date('2020-11-26').getTime()",46],["new Date('2020-11-27').getTime()",63],["new Date('2020-11-28').getTime()",40],["new Date('2020-11-29').getTime()",47],["new Date('2020-11-30').getTime()",44],["new Date('2020-12-01').getTime()",47],["new Date('2020-12-02').getTime()",34],["new Date('2020-12-03').getTime()",63],["new Date('2020-12-04').getTime()",35],["new Date('2020-12-05').getTime()",46],["new Date('2020-12-06').getTime()",42],["new Date('2020-12-07').getTime()",46],["new Date('2020-12-08').getTime()",49]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}},"show":false},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"colors":["#FFF"],"title":{"text":48.2,"style":{"color":"#FFF","fontSize":"24px"}},"subtitle":{"text":"Variable 1","style":{"color":"#FFF","fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":true,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":{"color":"#FFF","background":"#2E93fA"},"xaxis":{"min":"2020-11-19","max":"2020-12-08"}},"evals":["ax_opts.series.0.data.0.0","ax_opts.series.0.data.1.0","ax_opts.series.0.data.2.0","ax_opts.series.0.data.3.0","ax_opts.series.0.data.4.0","ax_opts.series.0.data.5.0","ax_opts.series.0.data.6.0","ax_opts.series.0.data.7.0","ax_opts.series.0.data.8.0","ax_opts.series.0.data.9.0","ax_opts.series.0.data.10.0","ax_opts.series.0.data.11.0","ax_opts.series.0.data.12.0","ax_opts.series.0.data.13.0","ax_opts.series.0.data.14.0","ax_opts.series.0.data.15.0","ax_opts.series.0.data.16.0","ax_opts.series.0.data.17.0","ax_opts.series.0.data.18.0","ax_opts.series.0.data.19.0"],"jsHooks":[]}</script><p>You can also use spark boxes in Shiny application, use code to launch an example :</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu">run_sparkbox_demo</span><span class="op">(</span><span class="op">)</span></code></pre></div>
<p><img src="figures/spark-box.png" alt="spark-box" style="width:100%;"></p>
</div>
@ -216,7 +213,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

4
docs/articles/spark-box_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/spark-box_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/spark-box_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/spark-box_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/spark-box_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/spark-box_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/spark-box_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/spark-box_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

133
docs/articles/sync-charts.html
View File

File diff suppressed because one or more lines are too long

4
docs/articles/sync-charts_files/anchor-sections-1.0/anchor-sections.css Normal file
View File

@ -0,0 +1,4 @@
/* Styles for section anchors */
a.anchor-section {margin-left: 10px; visibility: hidden; color: inherit;}
a.anchor-section::before {content: '#';}
.hasAnchor:hover a.anchor-section {visibility: visible;}

33
docs/articles/sync-charts_files/anchor-sections-1.0/anchor-sections.js Normal file
View File

@ -0,0 +1,33 @@
// Anchor sections v1.0 written by Atsushi Yasumoto on Oct 3rd, 2020.
document.addEventListener('DOMContentLoaded', function() {
// Do nothing if AnchorJS is used
if (typeof window.anchors === 'object' && anchors.hasOwnProperty('hasAnchorJSLink')) {
return;
}
const h = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
// Do nothing if sections are already anchored
if (Array.from(h).some(x => x.classList.contains('hasAnchor'))) {
return null;
}
// Use section id when pandoc runs with --section-divs
const section_id = function(x) {
return ((x.classList.contains('section') || (x.tagName === 'SECTION'))
? x.id : '');
};
// Add anchors
h.forEach(function(x) {
const id = x.id || section_id(x.parentElement);
if (id === '') {
return null;
}
let anchor = document.createElement('a');
anchor.href = '#' + id;
anchor.classList = ['anchor-section'];
x.classList.add('hasAnchor');
x.appendChild(anchor);
});
});

350
docs/articles/sync-charts_files/apexcharter-binding-0.1.8/apexcharter.js Normal file
View File

@ -0,0 +1,350 @@
/*!
*
* htmlwidgets bindings for ApexCharts
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
HTMLWidgets.widget({
name: "apexcharter",
type: "output",
factory: function(el, width, height) {
var axOpts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
axOpts = x.ax_opts;
if (x.sparkbox) {
el.style.background = x.sparkbox.background;
el.classList.add("apexcharter-spark-box");
}
// Sizing
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
if (!axOpts.chart.hasOwnProperty("parentHeightOffset")) {
axOpts.chart.parentHeightOffset = 0;
}
// added events to remove minheight container
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (!axOpts.chart.events.hasOwnProperty("mounted")) {
axOpts.chart.events.mounted = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (!axOpts.chart.events.hasOwnProperty("updated")) {
axOpts.chart.events.updated = function(chartContext, config) {
el.style.minHeight = 0;
};
}
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (!axOpts.hasOwnProperty("chart")) {
axOpts.chart = {};
}
if (!axOpts.chart.hasOwnProperty("events")) {
axOpts.chart.events = {};
}
if (x.shinyEvents.hasOwnProperty("click")) {
axOpts.chart.events.dataPointSelection = function(
event,
chartContext,
opts
) {
var options = opts;
var nonEmpty = opts.selectedDataPoints.filter(function(el) {
return el !== null && el.length > 0;
});
if (nonEmpty.length > 0) {
var select = {};
for (var i = 0; i < opts.selectedDataPoints.length; i++) {
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
);
if (selection !== null) {
if (opts.w.config.series[i].hasOwnProperty("name")) {
var name = opts.w.config.series[i].name;
select[name] = selection;
} else {
select[i] = selection;
}
}
}
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
}
};
}
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
if (x.shinyEvents.hasOwnProperty("selection")) {
axOpts.chart.events.selection = function(
chartContext,
xaxis,
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
}
}
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
if (x.auto_update.update_options) {
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
apexcharter.exportChart(x, apexchart);
});
}
}
},
getChart: function() {
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
{
data: obj.data.newSeries
}
],
obj.data.animate
);
}
});
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

285
docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.js
View File

@ -4,123 +4,127 @@
* https://github.com/dreamRs/apexcharter
*
*/
/*global HTMLWidgets, ApexCharts, Shiny */
/// Functions
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
}
function is_single(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
}
function is_datetime(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
return false;
}
}
function getSelection(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
}
function getYaxis(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
var apexcharter = {
getWidget: function(id) {
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
var widgetObj;
if (typeof htmlWidgetsObj !== "undefined") {
widgetObj = htmlWidgetsObj.getChart();
}
return widgetObj;
},
isSingleSerie: function(options) {
var typeLabels = ["pie", "radialBar", "donut"];
var lab = typeLabels.indexOf(options.w.config.chart.type) > -1;
var single = options.w.config.series.length === 1;
return lab | single;
},
isDatetimeAxis: function(chartContext) {
if (
chartContext.hasOwnProperty("w") &&
chartContext.w.hasOwnProperty("config") &&
chartContext.w.config.hasOwnProperty("xaxis") &&
chartContext.w.config.xaxis.hasOwnProperty("type")
) {
return chartContext.w.config.xaxis.type == "datetime";
} else {
y_axis = axis.yaxis[0];
return false;
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
},
getSelection: function(chartContext, selectedDataPoints, serieIndex) {
var typeLabels = ["pie", "radialBar", "donut"];
var typeXY = ["scatter", "bubble"];
var selected;
if (typeLabels.indexOf(chartContext.opts.chart.type) > -1) {
var labels = chartContext.opts.labels;
selected = selectedDataPoints[serieIndex].map(function(index) {
return labels[index];
});
} else {
var data = chartContext.opts.series[serieIndex].data;
selected = selectedDataPoints[serieIndex].map(function(index) {
var val = data[index];
if (typeXY.indexOf(chartContext.opts.chart.type) < 0) {
if (val.hasOwnProperty("x")) {
val = val.x;
} else {
val = val[0];
}
}
return val;
});
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
//console.log(selected);
if (typeXY.indexOf(chartContext.opts.chart.type) > -1) {
selected = {
x: selected.map(function(obj) {
return obj.x;
}),
y: selected.map(function(obj) {
return obj.y;
})
};
}
if (typeof selected == "undefined") {
selected = null;
}
return selected;
},
getYaxis: function(axis) {
var yzoom = { min: null, max: null };
if (typeof axis.yaxis !== "undefined" && axis.yaxis !== null) {
var y_axis;
if (axis.yaxis.hasOwnProperty("min")) {
y_axis = axis.yaxis;
} else {
y_axis = axis.yaxis[0];
}
if (y_axis.hasOwnProperty("min") && typeof y_axis.min !== "undefined") {
yzoom.min = y_axis.min;
}
if (y_axis.hasOwnProperty("max") && typeof y_axis.max !== "undefined") {
yzoom.max = y_axis.max;
}
}
return yzoom;
},
getXaxis: function(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
},
exportChart: function(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
return yzoom;
}
function getXaxis(axis) {
var xzoom = { min: null, max: null };
if (typeof axis.xaxis !== "undefined") {
var x_axis = axis.xaxis;
if (x_axis.hasOwnProperty("min") && typeof x_axis.min !== "undefined") {
xzoom.min = x_axis.min;
}
if (x_axis.hasOwnProperty("max") && typeof x_axis.max !== "undefined") {
xzoom.max = x_axis.max;
}
}
return xzoom;
}
function exportChart(x, chart) {
if (x.hasOwnProperty("shinyEvents") & HTMLWidgets.shinyMode) {
if (x.shinyEvents.hasOwnProperty("export")) {
setTimeout(function() {
chart.dataURI().then(function(imgURI) {
Shiny.setInputValue(x.shinyEvents.export.inputId, imgURI);
});
}, 1000);
}
}
}
};
/// Widget
@ -147,8 +151,8 @@ HTMLWidgets.widget({
if (typeof axOpts.chart === "undefined") {
axOpts.chart = {};
}
axOpts.chart.width = width;
axOpts.chart.height = height;
axOpts.chart.width = el.clientWidth;
axOpts.chart.height = el.clientHeight;
if (!axOpts.chart.hasOwnProperty("id")) {
axOpts.chart.id = el.id;
}
@ -194,7 +198,7 @@ HTMLWidgets.widget({
if (typeof opts.selectedDataPoints[i] === "undefined") {
continue;
}
var selection = getSelection(
var selection = apexcharter.getSelection(
chartContext,
options.selectedDataPoints,
i
@ -208,12 +212,12 @@ HTMLWidgets.widget({
}
}
}
if (is_single(options)) {
if (apexcharter.isSingleSerie(options)) {
select = select[Object.keys(select)[0]];
}
Shiny.setInputValue(
x.shinyEvents.click.inputId + ":apex_click",
{ value: select, datetime: is_datetime(chartContext) }
{ value: select, datetime: apexcharter.isDatetimeAxis(chartContext) }
);
} else {
Shiny.setInputValue(x.shinyEvents.click.inputId, null);
@ -223,12 +227,12 @@ HTMLWidgets.widget({
if (x.shinyEvents.hasOwnProperty("zoomed")) {
axOpts.chart.events.zoomed = function(chartContext, xaxis, yaxis) {
var id = x.shinyEvents.zoomed.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
Shiny.setInputValue(id, {
x: getXaxis(xaxis),
y: getYaxis(xaxis)
x: apexcharter.getXaxis(xaxis),
y: apexcharter.getYaxis(xaxis)
});
};
}
@ -239,16 +243,16 @@ HTMLWidgets.widget({
yaxis
) {
var id = x.shinyEvents.selection.inputId;
if (is_datetime(chartContext)) {
if (apexcharter.isDatetimeAxis(chartContext)) {
id = id + ":apex_datetime";
}
var selectionValue;
if (x.shinyEvents.selection.type === "x") {
selectionValue = { x: xaxis.xaxis };
} else if (x.shinyEvents.selection.type === "xy") {
selectionValue = { x: xaxis.xaxis, y: getYaxis(xaxis) };
selectionValue = { x: xaxis.xaxis, y: apexcharter.getYaxis(xaxis) };
} else if (x.shinyEvents.selection.type === "y") {
selectionValue = { y: getYaxis(xaxis) };
selectionValue = { y: apexcharter.getYaxis(xaxis) };
}
Shiny.setInputValue(id, selectionValue);
};
@ -259,36 +263,34 @@ HTMLWidgets.widget({
if (apexchart === null) {
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
} else {
if (x.auto_update) {
//console.log(x.auto_update);
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
exportChart(x, chart);
});
if (x.auto_update.update_options) {
delete axOpts.series;
delete axOpts.chart.width;
delete axOpts.chart.height;
var options = Object.assign({}, axOpts);
delete options.series;
delete options.chart.width;
delete options.chart.height;
apexchart
.updateOptions(
axOpts,
options,
x.auto_update.options_redrawPaths,
x.auto_update.options_animate,
x.auto_update.update_synced_charts
)
.then(function(a, b) {
exportChart(x, chart);
});
);
}
apexchart
.updateSeries(axOpts.series, x.auto_update.series_animate)
.then(function(chart) {
apexcharter.exportChart(x, chart);
});
} else {
apexchart.destroy();
apexchart = new ApexCharts(el, axOpts);
apexchart.render().then(function() {
exportChart(x, apexchart);
apexcharter.exportChart(x, apexchart);
});
}
}
@ -313,7 +315,7 @@ HTMLWidgets.widget({
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler("update-apexchart-series", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateSeries(
[
@ -328,10 +330,21 @@ if (HTMLWidgets.shinyMode) {
// update options
Shiny.addCustomMessageHandler("update-apexchart-options", function(obj) {
var chart = get_widget(obj.id);
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
chart.updateOptions(obj.data.options);
}
});
// toggle series
Shiny.addCustomMessageHandler("update-apexchart-toggle-series", function(obj) {
var chart = apexcharter.getWidget(obj.id);
if (typeof chart != "undefined") {
var seriesName = obj.data.seriesName;
for(var i = 0; i < seriesName.length; i++) {
chart.toggleSeries(seriesName[i]);
}
}
});
}

4
docs/articles/sync-charts_files/apexcharter-css-0.1.0/apexcharter.yaml
View File

@ -1,7 +1,7 @@
dependencies:
- name: apexcharts
version: 3.20.1
src: htmlwidgets/lib/apexcharts-3.20
version: 3.22.2
src: htmlwidgets/lib/apexcharts-3.22
script: apexcharts.min.js
- name: apexcharter-css
version: 0.1.0

14
docs/articles/sync-charts_files/apexcharter-css-0.1.0/lib/apexcharts-3.19/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/sync-charts_files/apexcharter-css-0.1.0/lib/apexcharts-3.20/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
docs/articles/sync-charts_files/apexcharter-css-0.1.0/lib/apexcharts-3.22/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

14
docs/articles/sync-charts_files/apexcharts-3.22.2/apexcharts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

903
docs/articles/sync-charts_files/htmlwidgets-1.5.2/htmlwidgets.js Normal file
View File

@ -0,0 +1,903 @@
(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
// See if we're running in Shiny mode. If not, it's a static document.
// Note that static widgets can appear in both Shiny and static modes, but
// obviously, Shiny widgets can only appear in Shiny apps/documents.
var shinyMode = window.HTMLWidgets.shinyMode =
typeof(window.Shiny) !== "undefined" && !!window.Shiny.outputBindings;
// We can't count on jQuery being available, so we implement our own
// version if necessary.
function querySelectorAll(scope, selector) {
if (typeof(jQuery) !== "undefined" && scope instanceof jQuery) {
return scope.find(selector);
}
if (scope.querySelectorAll) {
return scope.querySelectorAll(selector);
}
}
function asArray(value) {
if (value === null)
return [];
if ($.isArray(value))
return value;
return [value];
}
// Implement jQuery's extend
function extend(target /*, ... */) {
if (arguments.length == 1) {
return target;
}
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
target[prop] = source[prop];
}
}
}
return target;
}
// IE8 doesn't support Array.forEach.
function forEach(values, callback, thisArg) {
if (values.forEach) {
values.forEach(callback, thisArg);
} else {
for (var i = 0; i < values.length; i++) {
callback.call(thisArg, values[i], i, values);
}
}
}
// Replaces the specified method with the return value of funcSource.
//
// Note that funcSource should not BE the new method, it should be a function
// that RETURNS the new method. funcSource receives a single argument that is
// the overridden method, it can be called from the new method. The overridden
// method can be called like a regular function, it has the target permanently
// bound to it so "this" will work correctly.
function overrideMethod(target, methodName, funcSource) {
var superFunc = target[methodName] || function() {};
var superFuncBound = function() {
return superFunc.apply(target, arguments);
};
target[methodName] = funcSource(superFuncBound);
}
// Add a method to delegator that, when invoked, calls
// delegatee.methodName. If there is no such method on
// the delegatee, but there was one on delegator before
// delegateMethod was called, then the original version
// is invoked instead.
// For example:
//
// var a = {
// method1: function() { console.log('a1'); }
// method2: function() { console.log('a2'); }
// };
// var b = {
// method1: function() { console.log('b1'); }
// };
// delegateMethod(a, b, "method1");
// delegateMethod(a, b, "method2");
// a.method1();
// a.method2();
//
// The output would be "b1", "a2".
function delegateMethod(delegator, delegatee, methodName) {
var inherited = delegator[methodName];
delegator[methodName] = function() {
var target = delegatee;
var method = delegatee[methodName];
// The method doesn't exist on the delegatee. Instead,
// call the method on the delegator, if it exists.
if (!method) {
target = delegator;
method = inherited;
}
if (method) {
return method.apply(target, arguments);
}
};
}
// Implement a vague facsimilie of jQuery's data method
function elementData(el, name, value) {
if (arguments.length == 2) {
return el["htmlwidget_data_" + name];
} else if (arguments.length == 3) {
el["htmlwidget_data_" + name] = value;
return el;
} else {
throw new Error("Wrong number of arguments for elementData: " +
arguments.length);
}
}
// http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function hasClass(el, className) {
var re = new RegExp("\\b" + escapeRegExp(className) + "\\b");
return re.test(el.className);
}
// elements - array (or array-like object) of HTML elements
// className - class name to test for
// include - if true, only return elements with given className;
// if false, only return elements *without* given className
function filterByClass(elements, className, include) {
var results = [];
for (var i = 0; i < elements.length; i++) {
if (hasClass(elements[i], className) == include)
results.push(elements[i]);
}
return results;
}
function on(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(eventName, func);
}
}
function off(obj, eventName, func) {
if (obj.removeEventListener)
obj.removeEventListener(eventName, func, false);
else if (obj.detachEvent) {
obj.detachEvent(eventName, func);
}
}
// Translate array of values to top/right/bottom/left, as usual with
// the "padding" CSS property
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
function unpackPadding(value) {
if (typeof(value) === "number")
value = [value];
if (value.length === 1) {
return {top: value[0], right: value[0], bottom: value[0], left: value[0]};
}
if (value.length === 2) {
return {top: value[0], right: value[1], bottom: value[0], left: value[1]};
}
if (value.length === 3) {
return {top: value[0], right: value[1], bottom: value[2], left: value[1]};
}
if (value.length === 4) {
return {top: value[0], right: value[1], bottom: value[2], left: value[3]};
}
}
// Convert an unpacked padding object to a CSS value
function paddingToCss(paddingObj) {
return paddingObj.top + "px " + paddingObj.right + "px " + paddingObj.bottom + "px " + paddingObj.left + "px";
}
// Makes a number suitable for CSS
function px(x) {
if (typeof(x) === "number")
return x + "px";
else
return x;
}
// Retrieves runtime widget sizing information for an element.
// The return value is either null, or an object with fill, padding,
// defaultWidth, defaultHeight fields.
function sizingPolicy(el) {
var sizingEl = document.querySelector("script[data-for='" + el.id + "'][type='application/htmlwidget-sizing']");
if (!sizingEl)
return null;
var sp = JSON.parse(sizingEl.textContent || sizingEl.text || "{}");
if (viewerMode) {
return sp.viewer;
} else {
return sp.browser;
}
}
// @param tasks Array of strings (or falsy value, in which case no-op).
// Each element must be a valid JavaScript expression that yields a
// function. Or, can be an array of objects with "code" and "data"
// properties; in this case, the "code" property should be a string
// of JS that's an expr that yields a function, and "data" should be
// an object that will be added as an additional argument when that
// function is called.
// @param target The object that will be "this" for each function
// execution.
// @param args Array of arguments to be passed to the functions. (The
// same arguments will be passed to all functions.)
function evalAndRun(tasks, target, args) {
if (tasks) {
forEach(tasks, function(task) {
var theseArgs = args;
if (typeof(task) === "object") {
theseArgs = theseArgs.concat([task.data]);
task = task.code;
}
var taskFunc = tryEval(task);
if (typeof(taskFunc) !== "function") {
throw new Error("Task must be a function! Source:\n" + task);
}
taskFunc.apply(target, theseArgs);
});
}
}
// Attempt eval() both with and without enclosing in parentheses.
// Note that enclosing coerces a function declaration into
// an expression that eval() can parse
// (otherwise, a SyntaxError is thrown)
function tryEval(code) {
var result = null;
try {
result = eval(code);
} catch(error) {
if (!error instanceof SyntaxError) {
throw error;
}
try {
result = eval("(" + code + ")");
} catch(e) {
if (e instanceof SyntaxError) {
throw error;
} else {
throw e;
}
}
}
return result;
}
function initSizing(el) {
var sizing = sizingPolicy(el);
if (!sizing)
return;
var cel = document.getElementById("htmlwidget_container");
if (!cel)
return;
if (typeof(sizing.padding) !== "undefined") {
document.body.style.margin = "0";
document.body.style.padding = paddingToCss(unpackPadding(sizing.padding));
}
if (sizing.fill) {
document.body.style.overflow = "hidden";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.documentElement.style.width = "100%";
document.documentElement.style.height = "100%";
if (cel) {
cel.style.position = "absolute";
var pad = unpackPadding(sizing.padding);
cel.style.top = pad.top + "px";
cel.style.right = pad.right + "px";
cel.style.bottom = pad.bottom + "px";
cel.style.left = pad.left + "px";
el.style.width = "100%";
el.style.height = "100%";
}
return {
getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }
};
} else {
el.style.width = px(sizing.width);
el.style.height = px(sizing.height);
return {
getWidth: function() { return el.offsetWidth; },
getHeight: function() { return el.offsetHeight; }
};
}
}
// Default implementations for methods
var defaults = {
find: function(scope) {
return querySelectorAll(scope, "." + this.name);
},
renderError: function(el, err) {
var $el = $(el);
this.clearError(el);
// Add all these error classes, as Shiny does
var errClass = "shiny-output-error";
if (err.type !== null) {
// use the classes of the error condition as CSS class names
errClass = errClass + " " + $.map(asArray(err.type), function(type) {
return errClass + "-" + type;
}).join(" ");
}
errClass = errClass + " htmlwidgets-error";
// Is el inline or block? If inline or inline-block, just display:none it
// and add an inline error.
var display = $el.css("display");
$el.data("restore-display-mode", display);
if (display === "inline" || display === "inline-block") {
$el.hide();
if (err.message !== "") {
var errorSpan = $("<span>").addClass(errClass);
errorSpan.text(err.message);
$el.after(errorSpan);
}
} else if (display === "block") {
// If block, add an error just after the el, set visibility:none on the
// el, and position the error to be on top of the el.
// Mark it with a unique ID and CSS class so we can remove it later.
$el.css("visibility", "hidden");
if (err.message !== "") {
var errorDiv = $("<div>").addClass(errClass).css("position", "absolute")
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
// setting width can push out the page size, forcing otherwise
// unnecessary scrollbars to appear and making it impossible for
// the element to shrink; so use max-width instead
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
errorDiv.text(err.message);
$el.after(errorDiv);
// Really dumb way to keep the size/position of the error in sync with
// the parent element as the window is resized or whatever.
var intId = setInterval(function() {
if (!errorDiv[0].parentElement) {
clearInterval(intId);
return;
}
errorDiv
.css("top", el.offsetTop)
.css("left", el.offsetLeft)
.css("maxWidth", el.offsetWidth)
.css("height", el.offsetHeight);
}, 500);
}
}
},
clearError: function(el) {
var $el = $(el);
var display = $el.data("restore-display-mode");
$el.data("restore-display-mode", null);
if (display === "inline" || display === "inline-block") {
if (display)
$el.css("display", display);
$(el.nextSibling).filter(".htmlwidgets-error").remove();
} else if (display === "block"){
$el.css("visibility", "inherit");
$(el.nextSibling).filter(".htmlwidgets-error").remove();
}
},
sizing: {}
};
// Called by widget bindings to register a new type of widget. The definition
// object can contain the following properties:
// - name (required) - A string indicating the binding name, which will be
// used by default as the CSS classname to look for.
// - initialize (optional) - A function(el) that will be called once per
// widget element; if a value is returned, it will be passed as the third
// value to renderValue.
// - renderValue (required) - A function(el, data, initValue) that will be
// called with data. Static contexts will cause this to be called once per
// element; Shiny apps will cause this to be called multiple times per
// element, as the data changes.
window.HTMLWidgets.widget = function(definition) {
if (!definition.name) {
throw new Error("Widget must have a name");
}
if (!definition.type) {
throw new Error("Widget must have a type");
}
// Currently we only support output widgets
if (definition.type !== "output") {
throw new Error("Unrecognized widget type '" + definition.type + "'");
}
// TODO: Verify that .name is a valid CSS classname
// Support new-style instance-bound definitions. Old-style class-bound
// definitions have one widget "object" per widget per type/class of
// widget; the renderValue and resize methods on such widget objects
// take el and instance arguments, because the widget object can't
// store them. New-style instance-bound definitions have one widget
// object per widget instance; the definition that's passed in doesn't
// provide renderValue or resize methods at all, just the single method
// factory(el, width, height)
// which returns an object that has renderValue(x) and resize(w, h).
// This enables a far more natural programming style for the widget
// author, who can store per-instance state using either OO-style
// instance fields or functional-style closure variables (I guess this
// is in contrast to what can only be called C-style pseudo-OO which is
// what we required before).
if (definition.factory) {
definition = createLegacyDefinitionAdapter(definition);
}
if (!definition.renderValue) {
throw new Error("Widget must have a renderValue function");
}
// For static rendering (non-Shiny), use a simple widget registration
// scheme. We also use this scheme for Shiny apps/documents that also
// contain static widgets.
window.HTMLWidgets.widgets = window.HTMLWidgets.widgets || [];
// Merge defaults into the definition; don't mutate the original definition.
var staticBinding = extend({}, defaults, definition);
overrideMethod(staticBinding, "find", function(superfunc) {
return function(scope) {
var results = superfunc(scope);
// Filter out Shiny outputs, we only want the static kind
return filterByClass(results, "html-widget-output", false);
};
});
window.HTMLWidgets.widgets.push(staticBinding);
if (shinyMode) {
// Shiny is running. Register the definition with an output binding.
// The definition itself will not be the output binding, instead
// we will make an output binding object that delegates to the
// definition. This is because we foolishly used the same method
// name (renderValue) for htmlwidgets definition and Shiny bindings
// but they actually have quite different semantics (the Shiny
// bindings receive data that includes lots of metadata that it
// strips off before calling htmlwidgets renderValue). We can't
// just ignore the difference because in some widgets it's helpful
// to call this.renderValue() from inside of resize(), and if
// we're not delegating, then that call will go to the Shiny
// version instead of the htmlwidgets version.
// Merge defaults with definition, without mutating either.
var bindingDef = extend({}, defaults, definition);
// This object will be our actual Shiny binding.
var shinyBinding = new Shiny.OutputBinding();
// With a few exceptions, we'll want to simply use the bindingDef's
// version of methods if they are available, otherwise fall back to
// Shiny's defaults. NOTE: If Shiny's output bindings gain additional
// methods in the future, and we want them to be overrideable by
// HTMLWidget binding definitions, then we'll need to add them to this
// list.
delegateMethod(shinyBinding, bindingDef, "getId");
delegateMethod(shinyBinding, bindingDef, "onValueChange");
delegateMethod(shinyBinding, bindingDef, "onValueError");
delegateMethod(shinyBinding, bindingDef, "renderError");
delegateMethod(shinyBinding, bindingDef, "clearError");
delegateMethod(shinyBinding, bindingDef, "showProgress");
// The find, renderValue, and resize are handled differently, because we
// want to actually decorate the behavior of the bindingDef methods.
shinyBinding.find = function(scope) {
var results = bindingDef.find(scope);
// Only return elements that are Shiny outputs, not static ones
var dynamicResults = results.filter(".html-widget-output");
// It's possible that whatever caused Shiny to think there might be
// new dynamic outputs, also caused there to be new static outputs.
// Since there might be lots of different htmlwidgets bindings, we
// schedule execution for later--no need to staticRender multiple
// times.
if (results.length !== dynamicResults.length)
scheduleStaticRender();
return dynamicResults;
};
// Wrap renderValue to handle initialization, which unfortunately isn't
// supported natively by Shiny at the time of this writing.
shinyBinding.renderValue = function(el, data) {
Shiny.renderDependencies(data.deps);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var i = 0; data.evals && i < data.evals.length; i++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[i]);
}
if (!bindingDef.renderOnNullValue) {
if (data.x === null) {
el.style.visibility = "hidden";
return;
} else {
el.style.visibility = "inherit";
}
}
if (!elementData(el, "initialized")) {
initSizing(el);
elementData(el, "initialized", true);
if (bindingDef.initialize) {
var result = bindingDef.initialize(el, el.offsetWidth,
el.offsetHeight);
elementData(el, "init_result", result);
}
}
bindingDef.renderValue(el, data.x, elementData(el, "init_result"));
evalAndRun(data.jsHooks.render, elementData(el, "init_result"), [el, data.x]);
};
// Only override resize if bindingDef implements it
if (bindingDef.resize) {
shinyBinding.resize = function(el, width, height) {
// Shiny can call resize before initialize/renderValue have been
// called, which doesn't make sense for widgets.
if (elementData(el, "initialized")) {
bindingDef.resize(el, width, height, elementData(el, "init_result"));
}
};
}
Shiny.outputBindings.register(shinyBinding, bindingDef.name);
}
};
var scheduleStaticRenderTimerId = null;
function scheduleStaticRender() {
if (!scheduleStaticRenderTimerId) {
scheduleStaticRenderTimerId = setTimeout(function() {
scheduleStaticRenderTimerId = null;
window.HTMLWidgets.staticRender();
}, 1);
}
}
// Render static widgets after the document finishes loading
// Statically render all elements that are of this widget's class
window.HTMLWidgets.staticRender = function() {
var bindings = window.HTMLWidgets.widgets || [];
forEach(bindings, function(binding) {
var matches = binding.find(document.documentElement);
forEach(matches, function(el) {
var sizeObj = initSizing(el, binding);
if (hasClass(el, "html-widget-static-bound"))
return;
el.className = el.className + " html-widget-static-bound";
var initResult;
if (binding.initialize) {
initResult = binding.initialize(el,
sizeObj ? sizeObj.getWidth() : el.offsetWidth,
sizeObj ? sizeObj.getHeight() : el.offsetHeight
);
elementData(el, "init_result", initResult);
}
if (binding.resize) {
var lastSize = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
var resizeHandler = function(e) {
var size = {
w: sizeObj ? sizeObj.getWidth() : el.offsetWidth,
h: sizeObj ? sizeObj.getHeight() : el.offsetHeight
};
if (size.w === 0 && size.h === 0)
return;
if (size.w === lastSize.w && size.h === lastSize.h)
return;
lastSize = size;
binding.resize(el, size.w, size.h, initResult);
};
on(window, "resize", resizeHandler);
// This is needed for cases where we're running in a Shiny
// app, but the widget itself is not a Shiny output, but
// rather a simple static widget. One example of this is
// an rmarkdown document that has runtime:shiny and widget
// that isn't in a render function. Shiny only knows to
// call resize handlers for Shiny outputs, not for static
// widgets, so we do it ourselves.
if (window.jQuery) {
window.jQuery(document).on(
"shown.htmlwidgets shown.bs.tab.htmlwidgets shown.bs.collapse.htmlwidgets",
resizeHandler
);
window.jQuery(document).on(
"hidden.htmlwidgets hidden.bs.tab.htmlwidgets hidden.bs.collapse.htmlwidgets",
resizeHandler
);
}
// This is needed for the specific case of ioslides, which
// flips slides between display:none and display:block.
// Ideally we would not have to have ioslide-specific code
// here, but rather have ioslides raise a generic event,
// but the rmarkdown package just went to CRAN so the
// window to getting that fixed may be long.
if (window.addEventListener) {
// It's OK to limit this to window.addEventListener
// browsers because ioslides itself only supports
// such browsers.
on(document, "slideenter", resizeHandler);
on(document, "slideleave", resizeHandler);
}
}
var scriptData = document.querySelector("script[data-for='" + el.id + "'][type='application/json']");
if (scriptData) {
var data = JSON.parse(scriptData.textContent || scriptData.text);
// Resolve strings marked as javascript literals to objects
if (!(data.evals instanceof Array)) data.evals = [data.evals];
for (var k = 0; data.evals && k < data.evals.length; k++) {
window.HTMLWidgets.evaluateStringMember(data.x, data.evals[k]);
}
binding.renderValue(el, data.x, initResult);
evalAndRun(data.jsHooks.render, initResult, [el, data.x]);
}
});
});
invokePostRenderHandlers();
}
function has_jQuery3() {
if (!window.jQuery) {
return false;
}
var $version = window.jQuery.fn.jquery;
var $major_version = parseInt($version.split(".")[0]);
return $major_version >= 3;
}
/*
/ Shiny 1.4 bumped jQuery from 1.x to 3.x which means jQuery's
/ on-ready handler (i.e., $(fn)) is now asyncronous (i.e., it now
/ really means $(setTimeout(fn)).
/ https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
/
/ Since Shiny uses $() to schedule initShiny, shiny>=1.4 calls initShiny
/ one tick later than it did before, which means staticRender() is
/ called renderValue() earlier than (advanced) widget authors might be expecting.
/ https://github.com/rstudio/shiny/issues/2630
/
/ For a concrete example, leaflet has some methods (e.g., updateBounds)
/ which reference Shiny methods registered in initShiny (e.g., setInputValue).
/ Since leaflet is privy to this life-cycle, it knows to use setTimeout() to
/ delay execution of those methods (until Shiny methods are ready)
/ https://github.com/rstudio/leaflet/blob/18ec981/javascript/src/index.js#L266-L268
/
/ Ideally widget authors wouldn't need to use this setTimeout() hack that
/ leaflet uses to call Shiny methods on a staticRender(). In the long run,
/ the logic initShiny should be broken up so that method registration happens
/ right away, but binding happens later.
*/
function maybeStaticRenderLater() {
if (shinyMode && has_jQuery3()) {
window.jQuery(window.HTMLWidgets.staticRender);
} else {
window.HTMLWidgets.staticRender();
}
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
maybeStaticRenderLater();
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
maybeStaticRenderLater();
}
});
}
window.HTMLWidgets.getAttachmentUrl = function(depname, key) {
// If no key, default to the first item
if (typeof(key) === "undefined")
key = 1;
var link = document.getElementById(depname + "-" + key + "-attachment");
if (!link) {
throw new Error("Attachment " + depname + "/" + key + " not found in document");
}
return link.getAttribute("href");
};
window.HTMLWidgets.dataframeToD3 = function(df) {
var names = [];
var length;
for (var name in df) {
if (df.hasOwnProperty(name))
names.push(name);
if (typeof(df[name]) !== "object" || typeof(df[name].length) === "undefined") {
throw new Error("All fields must be arrays");
} else if (typeof(length) !== "undefined" && length !== df[name].length) {
throw new Error("All fields must be arrays of the same length");
}
length = df[name].length;
}
var results = [];
var item;
for (var row = 0; row < length; row++) {
item = {};
for (var col = 0; col < names.length; col++) {
item[names[col]] = df[names[col]][row];
}
results.push(item);
}
return results;
};
window.HTMLWidgets.transposeArray2D = function(array) {
if (array.length === 0) return array;
var newArray = array[0].map(function(col, i) {
return array.map(function(row) {
return row[i]
})
});
return newArray;
};
// Split value at splitChar, but allow splitChar to be escaped
// using escapeChar. Any other characters escaped by escapeChar
// will be included as usual (including escapeChar itself).
function splitWithEscape(value, splitChar, escapeChar) {
var results = [];
var escapeMode = false;
var currentResult = "";
for (var pos = 0; pos < value.length; pos++) {
if (!escapeMode) {
if (value[pos] === splitChar) {
results.push(currentResult);
currentResult = "";
} else if (value[pos] === escapeChar) {
escapeMode = true;
} else {
currentResult += value[pos];
}
} else {
currentResult += value[pos];
escapeMode = false;
}
}
if (currentResult !== "") {
results.push(currentResult);
}
return results;
}
// Function authored by Yihui/JJ Allaire
window.HTMLWidgets.evaluateStringMember = function(o, member) {
var parts = splitWithEscape(member, '.', '\\');
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
// part may be a character or 'numeric' member name
if (o !== null && typeof o === "object" && part in o) {
if (i == (l - 1)) { // if we are at the end of the line then evalulate
if (typeof o[part] === "string")
o[part] = tryEval(o[part]);
} else { // otherwise continue to next embedded object
o = o[part];
}
}
}
};
// Retrieve the HTMLWidget instance (i.e. the return value of an
// HTMLWidget binding's initialize() or factory() function)
// associated with an element, or null if none.
window.HTMLWidgets.getInstance = function(el) {
return elementData(el, "init_result");
};
// Finds the first element in the scope that matches the selector,
// and returns the HTMLWidget instance (i.e. the return value of
// an HTMLWidget binding's initialize() or factory() function)
// associated with that element, if any. If no element matches the
// selector, or the first matching element has no HTMLWidget
// instance associated with it, then null is returned.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.find = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var el = scope.querySelector(selector);
if (el === null) {
return null;
} else {
return window.HTMLWidgets.getInstance(el);
}
};
// Finds all elements in the scope that match the selector, and
// returns the HTMLWidget instances (i.e. the return values of
// an HTMLWidget binding's initialize() or factory() function)
// associated with the elements, in an array. If elements that
// match the selector don't have an associated HTMLWidget
// instance, the returned array will contain nulls.
//
// The scope argument is optional, and defaults to window.document.
window.HTMLWidgets.findAll = function(scope, selector) {
if (arguments.length == 1) {
selector = scope;
scope = document;
}
var nodes = scope.querySelectorAll(selector);
var results = [];
for (var i = 0; i < nodes.length; i++) {
results.push(window.HTMLWidgets.getInstance(nodes[i]));
}
return results;
};
var postRenderHandlers = [];
function invokePostRenderHandlers() {
while (postRenderHandlers.length) {
var handler = postRenderHandlers.shift();
if (handler) {
handler();
}
}
}
// Register the given callback function to be invoked after the
// next time static widgets are rendered.
window.HTMLWidgets.addPostRenderHandler = function(callback) {
postRenderHandlers.push(callback);
};
// Takes a new-style instance-bound definition, and returns an
// old-style class-bound definition. This saves us from having
// to rewrite all the logic in this file to accomodate both
// types of definitions.
function createLegacyDefinitionAdapter(defn) {
var result = {
name: defn.name,
type: defn.type,
initialize: function(el, width, height) {
return defn.factory(el, width, height);
},
renderValue: function(el, x, instance) {
return instance.renderValue(x);
},
resize: function(el, width, height, instance) {
return instance.resize(width, height);
}
};
if (defn.find)
result.find = defn.find;
if (defn.renderError)
result.renderError = defn.renderError;
if (defn.clearError)
result.clearError = defn.clearError;
return result;
}
})();

6
docs/authors.html
View File

@ -149,11 +149,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -253,7 +253,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

187
docs/index.html
View File

@ -86,11 +86,11 @@
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;"><a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -159,7 +159,7 @@
<div class="page-header"><h1 class="hasAnchor">
<a href="#apexcharter" class="anchor"></a>apexcharter</h1></div>
<blockquote>
<p>Htmlwidget for <a href="https://github.com/apexcharts/apexcharts.js">apexcharts.js</a> : A modern JavaScript charting library to build interactive charts and visualizations with simple API. See the <a href="https://dreamrs.github.io/apexcharter">online demo</a> for examples.</p>
<p>Htmlwidget for <a href="https://github.com/apexcharts/apexcharts.js">apexcharts.js</a> : A modern JavaScript charting library to build interactive charts and visualizations with simple API. See the <a href="https://dreamrs.github.io/apexcharter/">online demo</a> for examples.</p>
</blockquote>
<!-- badges: start -->
<p><a href="https://CRAN.R-project.org/package=apexcharter"><img src="http://www.r-pkg.org/badges/version/apexcharter" alt="version"></a> <a href="https://cranchecks.info/pkgs/apexcharter"><img src="https://cranchecks.info/badges/worst/apexcharter" alt="cran checks"></a> <a href="https://travis-ci.org/dreamRs/apexcharter"><img src="https://travis-ci.org/dreamRs/apexcharter.svg?branch=master" alt="Travis build status"></a> <a href="https://www.tidyverse.org/lifecycle/#maturing"><img src="https://img.shields.io/badge/lifecycle-maturing-blue.svg" alt="Lifecycle: maturing"></a> <a href="https://github.com/dreamRs/apexcharter/actions"><img src="https://github.com/dreamRs/apexcharter/workflows/R-CMD-check/badge.svg" alt="R build status"></a> <!-- badges: end --></p>
@ -168,119 +168,113 @@
<h2 class="hasAnchor">
<a href="#installation" class="anchor"></a>Installation</h2>
<p>Install from CRAN with:</p>
<div class="sourceCode" id="cb1"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span>(<span class="st">"apexcharter"</span>)
</pre></div>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span><span class="op">(</span><span class="st">"apexcharter"</span><span class="op">)</span></code></pre></div>
<p>Or install the development version from <a href="https://github.com/">GitHub</a> with:</p>
<div class="sourceCode" id="cb2"><pre class="downlit">
<span class="co"># install.packages("devtools")</span>
<span class="kw">devtools</span>::<span class="fu"><a href="https://devtools.r-lib.org//reference/remote-reexports.html">install_github</a></span>(<span class="st">"dreamRs/apexcharter"</span>)
</pre></div>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="co"># install.packages("devtools")</span>
<span class="fu">devtools</span><span class="fu">::</span><span class="fu"><a href="https://devtools.r-lib.org//reference/remote-reexports.html">install_github</a></span><span class="op">(</span><span class="st">"dreamRs/apexcharter"</span><span class="op">)</span></code></pre></div>
</div>
<div id="quick-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#quick-charts" class="anchor"></a>Quick Charts</h2>
<p>Use <code>apex</code> function to quickly create visualizations :</p>
<div class="sourceCode" id="cb3"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span>)
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"mpg"</span>, package = <span class="st">"ggplot2"</span>)
<span class="kw">n_manufac</span> <span class="op">&lt;-</span> <span class="kw">dplyr</span>::<span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span>(<span class="kw">mpg</span>, <span class="kw">manufacturer</span>)
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"mpg"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">n_manufac</span> <span class="op">&lt;-</span> <span class="fu">dplyr</span><span class="fu">::</span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="va">manufacturer</span><span class="op">)</span>
<span class="fu"><a href="reference/apex.html">apex</a></span>(data = <span class="kw">n_manufac</span>, type = <span class="st">"bar"</span>, mapping = <span class="fu"><a href="reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">manufacturer</span>, y = <span class="kw">n</span>))
</pre></div>
<span class="fu"><a href="reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">n_manufac</span>, type <span class="op">=</span> <span class="st">"bar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<p><img src="reference/figures/apex-bar.png"></p>
<p>With datetime:</p>
<div class="sourceCode" id="cb4"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"economics"</span>, package = <span class="st">"ggplot2"</span>)
<span class="fu"><a href="reference/apex.html">apex</a></span>(data = <span class="kw">economics</span>, type = <span class="st">"line"</span>, mapping = <span class="fu"><a href="reference/apexcharter-exports.html">aes</a></span>(x = <span class="kw">date</span>, y = <span class="kw">uempmed</span>)) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_stroke.html">ax_stroke</a></span>(width = <span class="fl">1</span>)
</pre></div>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"economics"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="fu"><a href="reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">1</span><span class="op">)</span></code></pre></div>
<p><img src="reference/figures/apex-line.png"></p>
</div>
<div id="full-api" class="section level2">
<h2 class="hasAnchor">
<a href="#full-api" class="anchor"></a>Full API</h2>
<p>All methods from ApexCharts are available with function like <code>ax_*</code> compatible with pipe from <code>magrittr</code> :</p>
<div class="sourceCode" id="cb5"><pre class="downlit">
<span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="kw"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span>)
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="kw">mpg</span>, package = <span class="st">"ggplot2"</span>)
<span class="kw">n_manufac</span> <span class="op">&lt;-</span> <span class="kw">dplyr</span>::<span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span>(<span class="kw">mpg</span>, <span class="kw">manufacturer</span>)
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="va">mpg</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">n_manufac</span> <span class="op">&lt;-</span> <span class="fu">dplyr</span><span class="fu">::</span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html">count</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="va">manufacturer</span><span class="op">)</span>
<span class="fu"><a href="reference/apexchart.html">apexchart</a></span>() <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_chart.html">ax_chart</a></span>(type = <span class="st">"bar"</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_plotOptions.html">ax_plotOptions</a></span>(bar = <span class="fu"><a href="reference/bar_opts.html">bar_opts</a></span>(
horizontal = <span class="fl">FALSE</span>,
endingShape = <span class="st">"flat"</span>,
columnWidth = <span class="st">"70%"</span>,
dataLabels = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
position = <span class="st">"top"</span>
))
) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_grid.html">ax_grid</a></span>(
show = <span class="fl">TRUE</span>,
position = <span class="st">"front"</span>,
borderColor = <span class="st">"#FFF"</span>
) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax-series.html">ax_series</a></span>(<span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
name = <span class="st">"Count"</span>,
data = <span class="kw">n_manufac</span><span class="op">$</span><span class="kw">n</span>
)) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#112446"</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_xaxis.html">ax_xaxis</a></span>(categories = <span class="kw">n_manufac</span><span class="op">$</span><span class="kw">manufacturer</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_title.html">ax_title</a></span>(text = <span class="st">"Number of models"</span>) <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_subtitle.html">ax_subtitle</a></span>(text = <span class="st">"Data from ggplot2"</span>)
</pre></div>
<span class="fu"><a href="reference/apexchart.html">apexchart</a></span><span class="op">(</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>type <span class="op">=</span> <span class="st">"bar"</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_plotOptions.html">ax_plotOptions</a></span><span class="op">(</span>bar <span class="op">=</span> <span class="fu"><a href="reference/bar_opts.html">bar_opts</a></span><span class="op">(</span>
horizontal <span class="op">=</span> <span class="cn">FALSE</span>,
endingShape <span class="op">=</span> <span class="st">"flat"</span>,
columnWidth <span class="op">=</span> <span class="st">"70%"</span>,
dataLabels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
position <span class="op">=</span> <span class="st">"top"</span>
<span class="op">)</span><span class="op">)</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_grid.html">ax_grid</a></span><span class="op">(</span>
show <span class="op">=</span> <span class="cn">TRUE</span>,
position <span class="op">=</span> <span class="st">"front"</span>,
borderColor <span class="op">=</span> <span class="st">"#FFF"</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax-series.html">ax_series</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
name <span class="op">=</span> <span class="st">"Count"</span>,
data <span class="op">=</span> <span class="va">n_manufac</span><span class="op">$</span><span class="va">n</span>
<span class="op">)</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#112446"</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>categories <span class="op">=</span> <span class="va">n_manufac</span><span class="op">$</span><span class="va">manufacturer</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_title.html">ax_title</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Number of models"</span><span class="op">)</span> <span class="op">%&gt;%</span>
<span class="fu"><a href="reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Data from ggplot2"</span><span class="op">)</span></code></pre></div>
<p><img src="reference/figures/apexcharter-full-bar.png"></p>
</div>
<div id="raw-api" class="section level2">
<h2 class="hasAnchor">
<a href="#raw-api" class="anchor"></a>Raw API</h2>
<p>Pass a list of parameters to the function:</p>
<div class="sourceCode" id="cb6"><pre class="downlit">
<span class="fu"><a href="reference/apexchart.html">apexchart</a></span>(ax_opts = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
chart = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
type = <span class="st">"line"</span>
),
stroke = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
curve = <span class="st">"smooth"</span>
),
grid = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
borderColor = <span class="st">"#e7e7e7"</span>,
row = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
colors = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="st">"#f3f3f3"</span>, <span class="st">"transparent"</span>),
opacity = <span class="fl">0.5</span>
)
),
dataLabels = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
enabled = <span class="fl">TRUE</span>
),
markers = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(style = <span class="st">"inverted"</span>, size = <span class="fl">6</span>),
series = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
<span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
name = <span class="st">"High"</span>,
data = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">28</span>, <span class="fl">29</span>, <span class="fl">33</span>, <span class="fl">36</span>, <span class="fl">32</span>, <span class="fl">32</span>, <span class="fl">33</span>)
),
<span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
name = <span class="st">"Low"</span>,
data = <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">12</span>, <span class="fl">11</span>, <span class="fl">14</span>, <span class="fl">18</span>, <span class="fl">17</span>, <span class="fl">13</span>, <span class="fl">13</span>)
)
),
title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
text = <span class="st">"Average High &amp; Low Temperature"</span>,
align = <span class="st">"left"</span>
),
xaxis = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
categories = <span class="kw">month.abb</span>[<span class="fl">1</span><span class="op">:</span><span class="fl">7</span>]
),
yaxis = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
title = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(text = <span class="st">"Temperature"</span>),
labels = <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(
formatter = <span class="kw">htmlwidgets</span>::<span class="fu"><a href="https://rdrr.io/pkg/htmlwidgets/man/JS.html">JS</a></span>(<span class="st">"function(value) {return value + '\u00b0C';}"</span>)
)
)
))
</pre></div>
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="reference/apexchart.html">apexchart</a></span><span class="op">(</span>ax_opts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
chart <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
type <span class="op">=</span> <span class="st">"line"</span>
<span class="op">)</span>,
stroke <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
curve <span class="op">=</span> <span class="st">"smooth"</span>
<span class="op">)</span>,
grid <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
borderColor <span class="op">=</span> <span class="st">"#e7e7e7"</span>,
row <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
colors <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="st">"#f3f3f3"</span>, <span class="st">"transparent"</span><span class="op">)</span>,
opacity <span class="op">=</span> <span class="fl">0.5</span>
<span class="op">)</span>
<span class="op">)</span>,
dataLabels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
enabled <span class="op">=</span> <span class="cn">TRUE</span>
<span class="op">)</span>,
markers <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>style <span class="op">=</span> <span class="st">"inverted"</span>, size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span>,
series <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
<span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
name <span class="op">=</span> <span class="st">"High"</span>,
data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">28</span>, <span class="fl">29</span>, <span class="fl">33</span>, <span class="fl">36</span>, <span class="fl">32</span>, <span class="fl">32</span>, <span class="fl">33</span><span class="op">)</span>
<span class="op">)</span>,
<span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
name <span class="op">=</span> <span class="st">"Low"</span>,
data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span><span class="op">(</span><span class="fl">12</span>, <span class="fl">11</span>, <span class="fl">14</span>, <span class="fl">18</span>, <span class="fl">17</span>, <span class="fl">13</span>, <span class="fl">13</span><span class="op">)</span>
<span class="op">)</span>
<span class="op">)</span>,
title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Average High &amp; Low Temperature"</span>,
align <span class="op">=</span> <span class="st">"left"</span>
<span class="op">)</span>,
xaxis <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
categories <span class="op">=</span> <span class="va">month.abb</span><span class="op">[</span><span class="fl">1</span><span class="op">:</span><span class="fl">7</span><span class="op">]</span>
<span class="op">)</span>,
yaxis <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Temperature"</span><span class="op">)</span>,
labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span><span class="op">(</span>
formatter <span class="op">=</span> <span class="fu">htmlwidgets</span><span class="fu">::</span><span class="fu"><a href="https://rdrr.io/pkg/htmlwidgets/man/JS.html">JS</a></span><span class="op">(</span><span class="st">"function(value) {return value + '\u00b0C';}"</span><span class="op">)</span>
<span class="op">)</span>
<span class="op">)</span>
<span class="op">)</span><span class="op">)</span></code></pre></div>
<p><img src="reference/figures/raw-api.png"></p>
</div>
</div>
@ -301,9 +295,8 @@
<div class="license">
<h2>License</h2>
<ul class="list-unstyled">
<li>
<a href="https://opensource.org/licenses/mit-license.php">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a>
</li>
<li><a href="LICENSE.html">Full license</a></li>
<li><small><a href="https://opensource.org/licenses/mit-license.php">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>
</ul>
</div>
<div class="developers">
@ -326,7 +319,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

42
docs/news/index.html
View File

@ -149,11 +149,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -223,9 +223,37 @@
<small>Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/NEWS.md'><code>NEWS.md</code></a></small>
</div>
<div id="apexcharter-018" class="section level1">
<h1 class="page-header" data-toc-text="0.1.8">
<a href="#apexcharter-018" class="anchor"></a>apexcharter 0.1.8<small> Unreleased </small>
</h1>
<ul>
<li>Updated ApexCharts.js to 3.22.2</li>
</ul>
<div id="bugfixes" class="section level2">
<h2 class="hasAnchor">
<a href="#bugfixes" class="anchor"></a>Bugfixes</h2>
<ul>
<li>Fixed bad JavaScript namespace</li>
<li>Fixed bug in groups with scatter chart</li>
</ul>
</div>
</div>
<div id="apexcharter-017" class="section level1">
<h1 class="page-header" data-toc-text="0.1.7">
<a href="#apexcharter-017" class="anchor"></a>apexcharter 0.1.7<small> 2020-10-16 </small>
</h1>
<ul>
<li>Updated ApexCharts.js to 3.22.0</li>
<li>New chart type: treemap, see vignette for example.</li>
<li>New function <code><a href="../reference/ax_colors_manual.html">ax_colors_manual()</a></code> to set color mapping manually.</li>
<li>
<code><a href="../reference/apex.html">apex()</a></code> now accept <code>polarArea</code> as type of chart.</li>
</ul>
</div>
<div id="apexcharter-016" class="section level1">
<h1 class="page-header" data-toc-text="0.1.6">
<a href="#apexcharter-016" class="anchor"></a>apexcharter 0.1.6<small> Unreleased </small>
<a href="#apexcharter-016" class="anchor"></a>apexcharter 0.1.6<small> 2020-09-09 </small>
</h1>
<ul>
<li>Updated ApexCharts.js to 3.20.1</li>
@ -259,9 +287,9 @@
<code><a href="../reference/set_tooltip_fixed.html">set_tooltip_fixed()</a></code> to fix tooltip in specific position.</li>
</ul>
</div>
<div id="bugfixes" class="section level2">
<div id="bugfixes-1" class="section level2">
<h2 class="hasAnchor">
<a href="#bugfixes" class="anchor"></a>Bugfixes</h2>
<a href="#bugfixes-1" class="anchor"></a>Bugfixes</h2>
<ul>
<li>Xaxis datetime now display properly with columns and bars.</li>
<li>Dark mode wasn’t activated properly in <code><a href="../reference/ax_theme.html">ax_theme()</a></code>.</li>
@ -313,6 +341,8 @@
<div id="tocnav">
<h2>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#apexcharter-018">0.1.8</a></li>
<li><a href="#apexcharter-017">0.1.7</a></li>
<li><a href="#apexcharter-016">0.1.6</a></li>
<li><a href="#apexcharter-015">0.1.5</a></li>
<li><a href="#apexcharter-014">0.1.4</a></li>
@ -332,7 +362,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

12
docs/pkgdown.yml
View File

@ -1,6 +1,12 @@
pandoc: 2.7.3
pkgdown: 1.6.0
pkgdown: 1.6.1
pkgdown_sha: ~
articles: []
last_built: 2020-09-09T10:40Z
articles:
apexcharter: apexcharter.html
articles/advanced-configuration: advanced-configuration.html
chart-options: chart-options.html
shiny-integration: shiny-integration.html
spark-box: spark-box.html
sync-charts: sync-charts.html
last_built: 2020-11-18T09:39Z

104
docs/reference/add-line.html
View File

@ -117,7 +117,8 @@
<meta property="og:title" content="Add a line to a chart — add-line" />
<meta property="og:description" content="On bar and scatter cherts add a line, on scatter charts add a smooth line." />
<meta property="og:description" content="Add a line to an existing chart (bar, scatter and line types supported).
On scatter charts you can also add a smooth line." />
<meta name="twitter:card" content="summary" />
@ -151,11 +152,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -227,26 +228,27 @@
</div>
<div class="ref-description">
<p>On bar and scatter cherts add a line, on scatter charts add a smooth line.</p>
<p>Add a line to an existing chart (bar, scatter and line types supported).
On scatter charts you can also add a smooth line.</p>
</div>
<pre class="usage"><span class='fu'>add_line</span>(
<span class='kw'>ax</span>,
<span class='kw'>mapping</span>,
data = <span class='kw'>NULL</span>,
type = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"line"</span>, <span class='st'>"spline"</span>),
serie_name = <span class='kw'>NULL</span>
)
<pre class="usage"><span class='fu'>add_line</span><span class='op'>(</span>
<span class='va'>ax</span>,
<span class='va'>mapping</span>,
data <span class='op'>=</span> <span class='cn'>NULL</span>,
type <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"line"</span>, <span class='st'>"spline"</span><span class='op'>)</span>,
serie_name <span class='op'>=</span> <span class='cn'>NULL</span>
<span class='op'>)</span>
<span class='fu'>add_smooth_line</span>(
<span class='kw'>ax</span>,
formula = <span class='kw'>y</span> <span class='op'>~</span> <span class='kw'>x</span>,
model = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"lm"</span>, <span class='st'>"loess"</span>),
n = <span class='fl'>100</span>,
<span class='kw'>...</span>,
type = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"line"</span>, <span class='st'>"spline"</span>),
serie_name = <span class='kw'>NULL</span>
)</pre>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>
<span class='va'>ax</span>,
formula <span class='op'>=</span> <span class='va'>y</span> <span class='op'>~</span> <span class='va'>x</span>,
model <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"lm"</span>, <span class='st'>"loess"</span><span class='op'>)</span>,
n <span class='op'>=</span> <span class='fl'>100</span>,
<span class='va'>...</span>,
type <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"line"</span>, <span class='st'>"spline"</span><span class='op'>)</span>,
serie_name <span class='op'>=</span> <span class='cn'>NULL</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -295,58 +297,58 @@ the <code>data.frame</code> provided in <code><a href='apex.html'>apex()</a></co
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='co'># Bar ----</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"climate_paris"</span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"climate_paris"</span><span class='op'>)</span>
<span class='co'># Add a line on a column's chart</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>climate_paris</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>month</span>, <span class='kw'>precipitation</span>), type = <span class='st'>"column"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span>(<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>month</span>, <span class='kw'>temperature</span>))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>climate_paris</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>month</span>, <span class='va'>precipitation</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"column"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span><span class='op'>(</span><span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>month</span>, <span class='va'>temperature</span><span class='op'>)</span><span class='op'>)</span>
<span class='co'># Add secondary axis</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>climate_paris</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>month</span>, <span class='kw'>precipitation</span>), type = <span class='st'>"column"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span>(<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>month</span>, <span class='kw'>temperature</span>)) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_yaxis.html'>ax_yaxis</a></span>(
title = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(text = <span class='st'>"Precipitation (in mm)"</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_yaxis2.html'>ax_yaxis2</a></span>(
opposite = <span class='fl'>TRUE</span>,
decimalsInFloat = <span class='fl'>0</span>,
title = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(text = <span class='st'>"Temperature (in degree celsius)"</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_dataLabels.html'>ax_dataLabels</a></span>(
enabled = <span class='fl'>TRUE</span>, enabledOnSeries = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fl'>1</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>climate_paris</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>month</span>, <span class='va'>precipitation</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"column"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span><span class='op'>(</span><span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>month</span>, <span class='va'>temperature</span><span class='op'>)</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_yaxis.html'>ax_yaxis</a></span><span class='op'>(</span>
title <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>text <span class='op'>=</span> <span class='st'>"Precipitation (in mm)"</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_yaxis2.html'>ax_yaxis2</a></span><span class='op'>(</span>
opposite <span class='op'>=</span> <span class='cn'>TRUE</span>,
decimalsInFloat <span class='op'>=</span> <span class='fl'>0</span>,
title <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>text <span class='op'>=</span> <span class='st'>"Temperature (in degree celsius)"</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_dataLabels.html'>ax_dataLabels</a></span><span class='op'>(</span>
enabled <span class='op'>=</span> <span class='cn'>TRUE</span>, enabledOnSeries <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fl'>1</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Scatter ----</span>
<span class='co'># add smooth line on scatter plot</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span>(<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>x</span>, <span class='kw'>y</span>), data = <span class='fu'><a href='https://rdrr.io/r/stats/lowess.html'>lowess</a></span>(<span class='kw'>cars</span>), serie_name = <span class='st'>"lowess"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_line</span><span class='op'>(</span><span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>x</span>, <span class='va'>y</span><span class='op'>)</span>, data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/stats/lowess.html'>lowess</a></span><span class='op'>(</span><span class='va'>cars</span><span class='op'>)</span>, serie_name <span class='op'>=</span> <span class='st'>"lowess"</span><span class='op'>)</span>
<span class='co'># or directly</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>()
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>(model = <span class='st'>"loess"</span>, span = <span class='fl'>1</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>model <span class='op'>=</span> <span class='st'>"loess"</span>, span <span class='op'>=</span> <span class='fl'>1</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>(model = <span class='st'>"loess"</span>, degree = <span class='fl'>1</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>model <span class='op'>=</span> <span class='st'>"loess"</span>, degree <span class='op'>=</span> <span class='fl'>1</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>(formula = <span class='kw'>y</span> <span class='op'>~</span> <span class='fu'><a href='https://rdrr.io/r/stats/poly.html'>poly</a></span>(<span class='kw'>x</span>, <span class='fl'>2</span>))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>formula <span class='op'>=</span> <span class='va'>y</span> <span class='op'>~</span> <span class='fu'><a href='https://rdrr.io/r/stats/poly.html'>poly</a></span><span class='op'>(</span><span class='va'>x</span>, <span class='fl'>2</span><span class='op'>)</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>speed</span>, <span class='kw'>dist</span>), type = <span class='st'>"scatter"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>(model = <span class='st'>"lm"</span>, serie_name = <span class='st'>"lm"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span>(model = <span class='st'>"loess"</span>, serie_name = <span class='st'>"loess"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>cars</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>speed</span>, <span class='va'>dist</span><span class='op'>)</span>, type <span class='op'>=</span> <span class='st'>"scatter"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>model <span class='op'>=</span> <span class='st'>"lm"</span>, serie_name <span class='op'>=</span> <span class='st'>"lm"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_smooth_line</span><span class='op'>(</span>model <span class='op'>=</span> <span class='st'>"loess"</span>, serie_name <span class='op'>=</span> <span class='st'>"loess"</span><span class='op'>)</span>
@ -372,7 +374,7 @@ the <code>data.frame</code> provided in <code><a href='apex.html'>apex()</a></co
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

72
docs/reference/add-shade.html
View File

@ -152,11 +152,11 @@ add_shade_weekend() add a shadow on every week-end." />
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -232,9 +232,9 @@ add_shade_weekend() add a shadow on every week-end." />
<code>add_shade_weekend()</code> add a shadow on every week-end.</p>
</div>
<pre class="usage"><span class='fu'>add_shade</span>(<span class='kw'>ax</span>, <span class='kw'>from</span>, <span class='kw'>to</span>, color = <span class='st'>"#848484"</span>, opacity = <span class='fl'>0.2</span>, label = <span class='kw'>NULL</span>, <span class='kw'>...</span>)
<pre class="usage"><span class='fu'>add_shade</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>from</span>, <span class='va'>to</span>, color <span class='op'>=</span> <span class='st'>"#848484"</span>, opacity <span class='op'>=</span> <span class='fl'>0.2</span>, label <span class='op'>=</span> <span class='cn'>NULL</span>, <span class='va'>...</span><span class='op'>)</span>
<span class='fu'>add_shade_weekend</span>(<span class='kw'>ax</span>, color = <span class='st'>"#848484"</span>, opacity = <span class='fl'>0.2</span>, label = <span class='kw'>NULL</span>, <span class='kw'>...</span>)</pre>
<span class='fu'>add_shade_weekend</span><span class='op'>(</span><span class='va'>ax</span>, color <span class='op'>=</span> <span class='st'>"#848484"</span>, opacity <span class='op'>=</span> <span class='fl'>0.2</span>, label <span class='op'>=</span> <span class='cn'>NULL</span>, <span class='va'>...</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -281,51 +281,51 @@ used for x-axis is of class <code>Date</code> or <code>POSIXt</code>.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"consumption"</span>)
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"consumption"</span><span class='op'>)</span>
<span class='co'># specify from and to date</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(from = <span class='st'>"2020-01-06"</span>, to = <span class='st'>"2020-01-20"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>from <span class='op'>=</span> <span class='st'>"2020-01-06"</span>, to <span class='op'>=</span> <span class='st'>"2020-01-20"</span><span class='op'>)</span>
<span class='co'># you can add several shadows</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(from = <span class='st'>"2020-01-06"</span>, to = <span class='st'>"2020-01-20"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(from = <span class='st'>"2020-02-04"</span>, to = <span class='st'>"2020-02-10"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>from <span class='op'>=</span> <span class='st'>"2020-01-06"</span>, to <span class='op'>=</span> <span class='st'>"2020-01-20"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>from <span class='op'>=</span> <span class='st'>"2020-02-04"</span>, to <span class='op'>=</span> <span class='st'>"2020-02-10"</span><span class='op'>)</span>
<span class='co'># or use a vector</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(
from = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-06"</span>, <span class='st'>"2020-02-04"</span>),
to = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-20"</span>, <span class='st'>"2020-02-10"</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>
from <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-06"</span>, <span class='st'>"2020-02-04"</span><span class='op'>)</span>,
to <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-20"</span>, <span class='st'>"2020-02-10"</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Add a label</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(
from = <span class='st'>"2020-01-06"</span>, to = <span class='st'>"2020-01-20"</span>,
label = <span class='st'>"interesting period"</span>
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>
from <span class='op'>=</span> <span class='st'>"2020-01-06"</span>, to <span class='op'>=</span> <span class='st'>"2020-01-20"</span>,
label <span class='op'>=</span> <span class='st'>"interesting period"</span>
<span class='op'>)</span>
<span class='co'># add label with more options</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span>(
from = <span class='st'>"2020-01-06"</span>, to = <span class='st'>"2020-01-20"</span>,
color = <span class='st'>"firebrick"</span>,
label = <span class='fu'><a href='label.html'>label</a></span>(
text = <span class='st'>"something happened"</span>,
background = <span class='st'>"firebrick"</span>,
color = <span class='st'>"white"</span>,
fontWeight = <span class='st'>"bold"</span>,
padding = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>3</span>, <span class='fl'>5</span>, <span class='fl'>3</span>, <span class='fl'>5</span>)
)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade</span><span class='op'>(</span>
from <span class='op'>=</span> <span class='st'>"2020-01-06"</span>, to <span class='op'>=</span> <span class='st'>"2020-01-20"</span>,
color <span class='op'>=</span> <span class='st'>"firebrick"</span>,
label <span class='op'>=</span> <span class='fu'><a href='label.html'>label</a></span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"something happened"</span>,
background <span class='op'>=</span> <span class='st'>"firebrick"</span>,
color <span class='op'>=</span> <span class='st'>"white"</span>,
fontWeight <span class='op'>=</span> <span class='st'>"bold"</span>,
padding <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>3</span>, <span class='fl'>5</span>, <span class='fl'>3</span>, <span class='fl'>5</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># automatically add shadow on week-ends</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_shade_weekend</span>()
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_shade_weekend</span><span class='op'>(</span><span class='op'>)</span>
@ -350,7 +350,7 @@ used for x-axis is of class <code>Date</code> or <code>POSIXt</code>.</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

58
docs/reference/add-vh-lines.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,9 +230,9 @@
<p>Add horizontal or vertical line</p>
</div>
<pre class="usage"><span class='fu'>add_hline</span>(<span class='kw'>ax</span>, <span class='kw'>value</span>, color = <span class='st'>"#000"</span>, dash = <span class='fl'>0</span>, label = <span class='kw'>NULL</span>, <span class='kw'>...</span>)
<pre class="usage"><span class='fu'>add_hline</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>value</span>, color <span class='op'>=</span> <span class='st'>"#000"</span>, dash <span class='op'>=</span> <span class='fl'>0</span>, label <span class='op'>=</span> <span class='cn'>NULL</span>, <span class='va'>...</span><span class='op'>)</span>
<span class='fu'>add_vline</span>(<span class='kw'>ax</span>, <span class='kw'>value</span>, color = <span class='st'>"#000"</span>, dash = <span class='fl'>0</span>, label = <span class='kw'>NULL</span>, <span class='kw'>...</span>)</pre>
<span class='fu'>add_vline</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>value</span>, color <span class='op'>=</span> <span class='st'>"#000"</span>, dash <span class='op'>=</span> <span class='fl'>0</span>, label <span class='op'>=</span> <span class='cn'>NULL</span>, <span class='va'>...</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -273,40 +273,40 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='co'># On a column chart</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/base/table.html'>table</a></span>(<span class='kw'>unhcr_popstats_2017</span><span class='op'>$</span><span class='kw'>continent_residence</span>),
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Var1</span>, <span class='kw'>Freq</span>),
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/table.html'>table</a></span><span class='op'>(</span><span class='va'>unhcr_popstats_2017</span><span class='op'>$</span><span class='va'>continent_residence</span><span class='op'>)</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Var1</span>, <span class='va'>Freq</span><span class='op'>)</span>,
<span class='st'>"column"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span>(value = <span class='fl'>2100</span>)
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span><span class='op'>(</span>value <span class='op'>=</span> <span class='fl'>2100</span><span class='op'>)</span>
<span class='co'># On a scatter chart</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Sepal.Length</span>, <span class='kw'>Sepal.Width</span>),
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Sepal.Length</span>, <span class='va'>Sepal.Width</span><span class='op'>)</span>,
<span class='st'>"scatter"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span>(value = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Width</span>)) <span class='op'>%&gt;%</span>
<span class='fu'>add_vline</span>(value = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Length</span>))
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span><span class='op'>(</span>value <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Width</span><span class='op'>)</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_vline</span><span class='op'>(</span>value <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Length</span><span class='op'>)</span><span class='op'>)</span>
<span class='co'># With labels</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Sepal.Length</span>, <span class='kw'>Sepal.Width</span>),
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Sepal.Length</span>, <span class='va'>Sepal.Width</span><span class='op'>)</span>,
<span class='st'>"scatter"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span>(
value = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Width</span>),
label = <span class='st'>"Mean of Sepal.Width"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_vline</span>(
value = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Length</span>),
label = <span class='st'>"Mean of Sepal.Length"</span>
)
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_hline</span><span class='op'>(</span>
value <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Width</span><span class='op'>)</span>,
label <span class='op'>=</span> <span class='st'>"Mean of Sepal.Width"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_vline</span><span class='op'>(</span>
value <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Length</span><span class='op'>)</span>,
label <span class='op'>=</span> <span class='st'>"Mean of Sepal.Length"</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -327,7 +327,7 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

36
docs/reference/add_event.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,7 +230,7 @@
<p>Add a vertical line to mark a special event on a chart.</p>
</div>
<pre class="usage"><span class='fu'>add_event</span>(<span class='kw'>ax</span>, <span class='kw'>when</span>, color = <span class='st'>"#E41A1C"</span>, dash = <span class='fl'>4</span>, label = <span class='kw'>NULL</span>, <span class='kw'>...</span>)</pre>
<pre class="usage"><span class='fu'>add_event</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>when</span>, color <span class='op'>=</span> <span class='st'>"#E41A1C"</span>, dash <span class='op'>=</span> <span class='fl'>4</span>, label <span class='op'>=</span> <span class='cn'>NULL</span>, <span class='va'>...</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -270,28 +270,28 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
<p>An <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"consumption"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"consumption"</span><span class='op'>)</span>
<span class='co'># specify from and to date</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span>(when = <span class='st'>"2020-01-11"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span><span class='op'>(</span>when <span class='op'>=</span> <span class='st'>"2020-01-11"</span><span class='op'>)</span>
<span class='co'># several events</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span>(when = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span>))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span><span class='op'>(</span>when <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span><span class='op'>)</span><span class='op'>)</span>
<span class='co'># Add labels on events</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span>(
when = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span>),
label = <span class='fu'><a href='label.html'>label</a></span>(text = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"Am"</span>, <span class='st'>"Ar"</span>))
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event</span><span class='op'>(</span>
when <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span><span class='op'>)</span>,
label <span class='op'>=</span> <span class='fu'><a href='label.html'>label</a></span><span class='op'>(</span>text <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"Am"</span>, <span class='st'>"Ar"</span><span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># can be combined with shade</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='add-shade.html'>add_shade</a></span>(from = <span class='st'>"2020-01-06"</span>, to = <span class='st'>"2020-01-20"</span>)<span class='op'>%&gt;%</span>
<span class='fu'>add_event</span>(when = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span>))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='add-shade.html'>add_shade</a></span><span class='op'>(</span>from <span class='op'>=</span> <span class='st'>"2020-01-06"</span>, to <span class='op'>=</span> <span class='st'>"2020-01-20"</span><span class='op'>)</span><span class='op'>%&gt;%</span>
<span class='fu'>add_event</span><span class='op'>(</span>when <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-11"</span>, <span class='st'>"2020-01-29"</span><span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -312,7 +312,7 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

62
docs/reference/add_event_marker.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,19 +230,19 @@
<p>Add an event marker to a chart</p>
</div>
<pre class="usage"><span class='fu'>add_event_marker</span>(
<span class='kw'>ax</span>,
<span class='kw'>when</span>,
<span class='kw'>y</span>,
size = <span class='fl'>5</span>,
color = <span class='st'>"#000"</span>,
fill = <span class='st'>"#FFF"</span>,
width = <span class='fl'>2</span>,
shape = <span class='st'>"circle"</span>,
radius = <span class='fl'>2</span>,
label = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>add_event_marker</span><span class='op'>(</span>
<span class='va'>ax</span>,
<span class='va'>when</span>,
<span class='va'>y</span>,
size <span class='op'>=</span> <span class='fl'>5</span>,
color <span class='op'>=</span> <span class='st'>"#000"</span>,
fill <span class='op'>=</span> <span class='st'>"#FFF"</span>,
width <span class='op'>=</span> <span class='fl'>2</span>,
shape <span class='op'>=</span> <span class='st'>"circle"</span>,
radius <span class='op'>=</span> <span class='fl'>2</span>,
label <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -300,29 +300,29 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
<p>An <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"consumption"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"consumption"</span><span class='op'>)</span>
<span class='co'># add a marker</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span>(when = <span class='st'>"2020-01-22"</span>, y = <span class='fl'>1805</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span><span class='op'>(</span>when <span class='op'>=</span> <span class='st'>"2020-01-22"</span>, y <span class='op'>=</span> <span class='fl'>1805</span><span class='op'>)</span>
<span class='co'># with a label</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span>(when = <span class='st'>"2020-01-22"</span>, y = <span class='fl'>1805</span>, label = <span class='st'>"Consumption peak"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span><span class='op'>(</span>when <span class='op'>=</span> <span class='st'>"2020-01-22"</span>, y <span class='op'>=</span> <span class='fl'>1805</span>, label <span class='op'>=</span> <span class='st'>"Consumption peak"</span><span class='op'>)</span>
<span class='co'># add several markers</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>date</span>, <span class='kw'>value</span>, group = <span class='kw'>type</span>), <span class='st'>"spline"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span>(
when = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-02"</span>, <span class='st'>"2020-01-06"</span>, <span class='st'>"2020-01-13"</span>,
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>date</span>, <span class='va'>value</span>, group <span class='op'>=</span> <span class='va'>type</span><span class='op'>)</span>, <span class='st'>"spline"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_event_marker</span><span class='op'>(</span>
when <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"2020-01-02"</span>, <span class='st'>"2020-01-06"</span>, <span class='st'>"2020-01-13"</span>,
<span class='st'>"2020-01-22"</span>, <span class='st'>"2020-01-28"</span>, <span class='st'>"2020-02-06"</span>,
<span class='st'>"2020-02-13"</span>, <span class='st'>"2020-02-19"</span>, <span class='st'>"2020-02-27"</span>),
y = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>1545</span>, <span class='fl'>1659</span>, <span class='fl'>1614</span>,
<span class='st'>"2020-02-13"</span>, <span class='st'>"2020-02-19"</span>, <span class='st'>"2020-02-27"</span><span class='op'>)</span>,
y <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>1545</span>, <span class='fl'>1659</span>, <span class='fl'>1614</span>,
<span class='fl'>1805</span>, <span class='fl'>1637</span>, <span class='fl'>1636</span>,
<span class='fl'>1597</span>, <span class='fl'>1547</span>, <span class='fl'>1631</span>),
size = <span class='fl'>10</span>,
color = <span class='st'>"firebrick"</span>
)
<span class='fl'>1597</span>, <span class='fl'>1547</span>, <span class='fl'>1631</span><span class='op'>)</span>,
size <span class='op'>=</span> <span class='fl'>10</span>,
color <span class='op'>=</span> <span class='st'>"firebrick"</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -343,7 +343,7 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

92
docs/reference/add_point.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,19 +230,19 @@
<p>Add an annotation point</p>
</div>
<pre class="usage"><span class='fu'>add_point</span>(
<span class='kw'>ax</span>,
<span class='kw'>x</span>,
<span class='kw'>y</span>,
size = <span class='fl'>5</span>,
color = <span class='st'>"#000"</span>,
fill = <span class='st'>"#FFF"</span>,
width = <span class='fl'>2</span>,
shape = <span class='st'>"circle"</span>,
radius = <span class='fl'>2</span>,
label = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>add_point</span><span class='op'>(</span>
<span class='va'>ax</span>,
<span class='va'>x</span>,
<span class='va'>y</span>,
size <span class='op'>=</span> <span class='fl'>5</span>,
color <span class='op'>=</span> <span class='st'>"#000"</span>,
fill <span class='op'>=</span> <span class='st'>"#FFF"</span>,
width <span class='op'>=</span> <span class='fl'>2</span>,
shape <span class='op'>=</span> <span class='st'>"circle"</span>,
radius <span class='op'>=</span> <span class='fl'>2</span>,
label <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -301,46 +301,46 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='co'># On scatter chart</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Sepal.Length</span>, <span class='kw'>Sepal.Width</span>),
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Sepal.Length</span>, <span class='va'>Sepal.Width</span><span class='op'>)</span>,
<span class='st'>"scatter"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span>(
x = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Length</span>),
y = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Width</span>)
)
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Length</span><span class='op'>)</span>,
y <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Width</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Some options</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Sepal.Length</span>, <span class='kw'>Sepal.Width</span>),
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Sepal.Length</span>, <span class='va'>Sepal.Width</span><span class='op'>)</span>,
<span class='st'>"scatter"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span>(
x = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Length</span>),
y = <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span>(<span class='kw'>iris</span><span class='op'>$</span><span class='kw'>Sepal.Width</span>),
fill = <span class='st'>"firebrick"</span>,
color = <span class='st'>"firebrick"</span>,
size = <span class='fl'>8</span>,
label = <span class='fu'><a href='label.html'>label</a></span>(text = <span class='st'>"Mean"</span>, offsetY = <span class='fl'>0</span>)
)
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Length</span><span class='op'>)</span>,
y <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>$</span><span class='va'>Sepal.Width</span><span class='op'>)</span>,
fill <span class='op'>=</span> <span class='st'>"firebrick"</span>,
color <span class='op'>=</span> <span class='st'>"firebrick"</span>,
size <span class='op'>=</span> <span class='fl'>8</span>,
label <span class='op'>=</span> <span class='fu'><a href='label.html'>label</a></span><span class='op'>(</span>text <span class='op'>=</span> <span class='st'>"Mean"</span>, offsetY <span class='op'>=</span> <span class='fl'>0</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Several points</span>
<span class='kw'>clusters</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/stats/kmeans.html'>kmeans</a></span>(<span class='kw'>iris</span>[, <span class='fl'>1</span><span class='op'>:</span><span class='fl'>2</span>], <span class='fl'>3</span>)
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>Sepal.Length</span>, <span class='kw'>Sepal.Width</span>),
<span class='va'>clusters</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/stats/kmeans.html'>kmeans</a></span><span class='op'>(</span><span class='va'>iris</span><span class='op'>[</span>, <span class='fl'>1</span><span class='op'>:</span><span class='fl'>2</span><span class='op'>]</span>, <span class='fl'>3</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>iris</span>,
<span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>Sepal.Length</span>, <span class='va'>Sepal.Width</span><span class='op'>)</span>,
<span class='st'>"scatter"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span>(
x = <span class='kw'>clusters</span><span class='op'>$</span><span class='kw'>centers</span>[, <span class='fl'>1</span>],
y = <span class='kw'>clusters</span><span class='op'>$</span><span class='kw'>centers</span>[, <span class='fl'>2</span>]
)
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>add_point</span><span class='op'>(</span>
x <span class='op'>=</span> <span class='va'>clusters</span><span class='op'>$</span><span class='va'>centers</span><span class='op'>[</span>, <span class='fl'>1</span><span class='op'>]</span>,
y <span class='op'>=</span> <span class='va'>clusters</span><span class='op'>$</span><span class='va'>centers</span><span class='op'>[</span>, <span class='fl'>2</span><span class='op'>]</span>
<span class='op'>)</span>
@ -372,7 +372,7 @@ or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

93
docs/reference/apex.html
View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick ApexChart — apex • apexcharter</title>
<title>Quick ApexCharts — apex • apexcharter</title>
<!-- jquery -->
@ -116,7 +116,7 @@
<meta property="og:title" content="Quick ApexChart — apex" />
<meta property="og:title" content="Quick ApexCharts — apex" />
<meta property="og:description" content="Initialize a chart with three main parameters :
data, mapping and type of chart." />
<meta name="twitter:card" content="summary" />
@ -152,11 +152,11 @@ data, mapping and type of chart." />
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -222,7 +222,7 @@ data, mapping and type of chart." />
<div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Quick ApexChart</h1>
<h1>Quick ApexCharts</h1>
<small class="dont-index">Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/R/apex.R'><code>R/apex.R</code></a></small>
<div class="hidden name"><code>apex.Rd</code></div>
</div>
@ -232,18 +232,18 @@ data, mapping and type of chart." />
data, mapping and type of chart.</p>
</div>
<pre class="usage"><span class='fu'>apex</span>(
<span class='kw'>data</span>,
<span class='kw'>mapping</span>,
type = <span class='st'>"column"</span>,
<span class='kw'>...</span>,
auto_update = <span class='fl'>TRUE</span>,
synchronize = <span class='kw'>NULL</span>,
serie_name = <span class='kw'>NULL</span>,
width = <span class='kw'>NULL</span>,
height = <span class='kw'>NULL</span>,
elementId = <span class='kw'>NULL</span>
)</pre>
<pre class="usage"><span class='fu'>apex</span><span class='op'>(</span>
<span class='va'>data</span>,
<span class='va'>mapping</span>,
type <span class='op'>=</span> <span class='st'>"column"</span>,
<span class='va'>...</span>,
auto_update <span class='op'>=</span> <span class='cn'>TRUE</span>,
synchronize <span class='op'>=</span> <span class='cn'>NULL</span>,
serie_name <span class='op'>=</span> <span class='cn'>NULL</span>,
width <span class='op'>=</span> <span class='cn'>NULL</span>,
height <span class='op'>=</span> <span class='cn'>NULL</span>,
elementId <span class='op'>=</span> <span class='cn'>NULL</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -264,7 +264,8 @@ a <code>data.frame</code>, it will be coerced to with <code>as.data.frame</code>
<code>"line"</code>, <code>"step"</code>, <code>"spline"</code>,
<code>"area"</code>, <code>"area-step"</code>, <code>"area-spline"</code>,
<code>"pie"</code>, <code>"donut"</code>,
<code>"radialBar"</code>, <code>"radar"</code>, <code>"scatter"</code>, <code>"heatmap"</code>,
<code>"radialBar"</code>, <code>"radar"</code>, <code>"scatter"</code>,
<code>"heatmap"</code>, <code>"treemap"</code>,
<code>"timeline"</code>.</p></td>
</tr>
<tr>
@ -305,47 +306,47 @@ only used for single serie.</p></td>
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='http://ggplot2.tidyverse.org'>ggplot2</a></span>)
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='http://ggplot2.tidyverse.org'>ggplot2</a></span><span class='op'>)</span>
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
</div><div class='output co'>#&gt; <span class='message'></span>
#&gt; <span class='message'>Attachement du package : 'dplyr'</span></div><div class='output co'>#&gt; <span class='message'>The following objects are masked from 'package:stats':</span>
#&gt; <span class='message'></span>
#&gt; <span class='message'> filter, lag</span></div><div class='output co'>#&gt; <span class='message'>The following objects are masked from 'package:base':</span>
#&gt; <span class='message'></span>
#&gt; <span class='message'> intersect, setdiff, setequal, union</span></div><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
#&gt; <span class='message'> intersect, setdiff, setequal, union</span></div><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='co'># make a barchart with a frequency table</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"mpg"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'>apex</span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>mpg</span>, <span class='kw'>manufacturer</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>manufacturer</span>, y = <span class='kw'>n</span>),
type = <span class='st'>"bar"</span>
)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"mpg"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='fu'>apex</span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>mpg</span>, <span class='va'>manufacturer</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>manufacturer</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"bar"</span>
<span class='op'>)</span>
<span class='co'># timeseries</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'>apex</span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='fu'>apex</span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span>
<span class='co'># you can add option to apex result :</span>
<span class='fu'>apex</span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_stroke.html'>ax_stroke</a></span>(width = <span class='fl'>1</span>)
<span class='fu'>apex</span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_stroke.html'>ax_stroke</a></span><span class='op'>(</span>width <span class='op'>=</span> <span class='fl'>1</span><span class='op'>)</span>
<span class='co'># with group variable</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics_long"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'>apex</span>(
data = <span class='kw'>economics_long</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>value01</span>, group = <span class='kw'>variable</span>),
type = <span class='st'>"line"</span>
)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics_long"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='fu'>apex</span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics_long</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>value01</span>, group <span class='op'>=</span> <span class='va'>variable</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -366,7 +367,7 @@ only used for single serie.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

68
docs/reference/apexchart.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,13 +230,13 @@
<p>Create an apexcharts.js widget</p>
</div>
<pre class="usage"><span class='fu'>apexchart</span>(
ax_opts = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(),
auto_update = <span class='fl'>TRUE</span>,
width = <span class='kw'>NULL</span>,
height = <span class='kw'>NULL</span>,
elementId = <span class='kw'>NULL</span>
)</pre>
<pre class="usage"><span class='fu'>apexchart</span><span class='op'>(</span>
ax_opts <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='op'>)</span>,
auto_update <span class='op'>=</span> <span class='cn'>TRUE</span>,
width <span class='op'>=</span> <span class='cn'>NULL</span>,
height <span class='op'>=</span> <span class='cn'>NULL</span>,
elementId <span class='op'>=</span> <span class='cn'>NULL</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -270,39 +270,39 @@ use <code><a href='config_update.html'>config_update</a></code> for more control
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='co'># Use raw API by passing a list of</span>
<span class='co'># parameters to the function</span>
<span class='fu'>apexchart</span>(ax_opts = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
chart = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
type = <span class='st'>"bar"</span>
),
series = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"Example"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span>(<span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span>)
)),
xaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
categories = <span class='kw'>LETTERS</span>[<span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span>]
)
))
<span class='fu'>apexchart</span><span class='op'>(</span>ax_opts <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
chart <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
type <span class='op'>=</span> <span class='st'>"bar"</span>
<span class='op'>)</span>,
series <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"Example"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='op'>(</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span><span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>,
xaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
categories <span class='op'>=</span> <span class='va'>LETTERS</span><span class='op'>[</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span><span class='op'>]</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='co'># Or use apexchart() to initialize the chart</span>
<span class='co'># before passing parameters</span>
<span class='fu'>apexchart</span>() <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(type = <span class='st'>"bar"</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"Example"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span>(<span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span>)
)
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_xaxis.html'>ax_xaxis</a></span>(
categories = <span class='kw'>LETTERS</span>[<span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span>]
)
<span class='fu'>apexchart</span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span><span class='op'>(</span>type <span class='op'>=</span> <span class='st'>"bar"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span><span class='op'>(</span>
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"Example"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='op'>(</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_xaxis.html'>ax_xaxis</a></span><span class='op'>(</span>
categories <span class='op'>=</span> <span class='va'>LETTERS</span><span class='op'>[</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span><span class='op'>]</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -323,7 +323,7 @@ use <code><a href='config_update.html'>config_update</a></code> for more control
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

8
docs/reference/apexchartProxy.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,7 +230,7 @@
<p>Allow to update a chart in Shiny application.</p>
</div>
<pre class="usage"><span class='fu'>apexchartProxy</span>(<span class='kw'>shinyId</span>, session = <span class='kw'>shiny</span>::<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/domains.html'>getDefaultReactiveDomain</a></span>())</pre>
<pre class="usage"><span class='fu'>apexchartProxy</span><span class='op'>(</span><span class='va'>shinyId</span>, session <span class='op'>=</span> <span class='fu'>shiny</span><span class='fu'>::</span><span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/domains.html'>getDefaultReactiveDomain</a></span><span class='op'>(</span><span class='op'>)</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -266,7 +266,7 @@ default value will suffice</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

6
docs/reference/apexcharter-exports.html
View File

@ -153,11 +153,11 @@ as Depends of apexcharter" />
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -253,7 +253,7 @@ as Depends of apexcharter</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

6
docs/reference/apexcharter-package.html
View File

@ -154,11 +154,11 @@ to create interactive and modern SVG charts." />
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -260,7 +260,7 @@ to create interactive and modern SVG charts.</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

78
docs/reference/apexcharter-shiny.html
View File

@ -152,11 +152,11 @@ applications and interactive Rmd documents." />
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -232,13 +232,13 @@ applications and interactive Rmd documents." />
applications and interactive Rmd documents.</p>
</div>
<pre class="usage"><span class='fu'>apexchartOutput</span>(<span class='kw'>outputId</span>, width = <span class='st'>"100%"</span>, height = <span class='st'>"400px"</span>)
<pre class="usage"><span class='fu'>apexchartOutput</span><span class='op'>(</span><span class='va'>outputId</span>, width <span class='op'>=</span> <span class='st'>"100%"</span>, height <span class='op'>=</span> <span class='st'>"400px"</span><span class='op'>)</span>
<span class='fu'>renderApexchart</span>(<span class='kw'>expr</span>, env = <span class='fu'><a href='https://rdrr.io/r/base/sys.parent.html'>parent.frame</a></span>(), quoted = <span class='fl'>FALSE</span>)
<span class='fu'>renderApexchart</span><span class='op'>(</span><span class='va'>expr</span>, env <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sys.parent.html'>parent.frame</a></span><span class='op'>(</span><span class='op'>)</span>, quoted <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span>
<span class='fu'>sparkBoxOutput</span>(<span class='kw'>outputId</span>, width = <span class='st'>"100%"</span>, height = <span class='st'>"160px"</span>)
<span class='fu'>sparkBoxOutput</span><span class='op'>(</span><span class='va'>outputId</span>, width <span class='op'>=</span> <span class='st'>"100%"</span>, height <span class='op'>=</span> <span class='st'>"160px"</span><span class='op'>)</span>
<span class='fu'>renderSparkBox</span>(<span class='kw'>expr</span>, env = <span class='fu'><a href='https://rdrr.io/r/base/sys.parent.html'>parent.frame</a></span>(), quoted = <span class='fl'>FALSE</span>)</pre>
<span class='fu'>renderSparkBox</span><span class='op'>(</span><span class='va'>expr</span>, env <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sys.parent.html'>parent.frame</a></span><span class='op'>(</span><span class='op'>)</span>, quoted <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -270,45 +270,45 @@ is useful if you want to save an expression in a variable.</p></td>
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
<p>An Apexchart output that can be included in the application UI.</p>
<p>An Apexcharts output that can be included in the application UI.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='co'>if</span> (<span class='fu'><a href='https://rdrr.io/r/base/interactive.html'>interactive</a></span>()) {
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='http://shiny.rstudio.com'>shiny</a></span>)
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span>)
<pre class="examples"><div class='input'><span class='kw'>if</span> <span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/interactive.html'>interactive</a></span><span class='op'>(</span><span class='op'>)</span><span class='op'>)</span> <span class='op'>{</span>
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='http://shiny.rstudio.com'>shiny</a></span><span class='op'>)</span>
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://github.com/dreamRs/apexcharter'>apexcharter</a></span><span class='op'>)</span>
<span class='kw'>ui</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/fluidPage.html'>fluidPage</a></span>(
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/fluidPage.html'>fluidRow</a></span>(
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/column.html'>column</a></span>(
width = <span class='fl'>8</span>, offset = <span class='fl'>2</span>,
<span class='kw'>tags</span><span class='op'>$</span><span class='fu'><a href='https://rdrr.io/pkg/htmltools/man/builder.html'>h2</a></span>(<span class='st'>"Apexchart in Shiny"</span>),
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/actionButton.html'>actionButton</a></span>(<span class='st'>"redraw"</span>, <span class='st'>"Redraw chart"</span>),
<span class='fu'>apexchartOutput</span>(<span class='st'>"chart"</span>)
)
)
)
<span class='va'>ui</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/fluidPage.html'>fluidPage</a></span><span class='op'>(</span>
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/fluidPage.html'>fluidRow</a></span><span class='op'>(</span>
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/column.html'>column</a></span><span class='op'>(</span>
width <span class='op'>=</span> <span class='fl'>8</span>, offset <span class='op'>=</span> <span class='fl'>2</span>,
<span class='va'>tags</span><span class='op'>$</span><span class='fu'>h2</span><span class='op'>(</span><span class='st'>"Apexchart in Shiny"</span><span class='op'>)</span>,
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/actionButton.html'>actionButton</a></span><span class='op'>(</span><span class='st'>"redraw"</span>, <span class='st'>"Redraw chart"</span><span class='op'>)</span>,
<span class='fu'>apexchartOutput</span><span class='op'>(</span><span class='st'>"chart"</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='kw'>server</span> <span class='op'>&lt;-</span> <span class='fu'>function</span>(<span class='kw'>input</span>, <span class='kw'>output</span>, <span class='kw'>session</span>) {
<span class='va'>server</span> <span class='op'>&lt;-</span> <span class='kw'>function</span><span class='op'>(</span><span class='va'>input</span>, <span class='va'>output</span>, <span class='va'>session</span><span class='op'>)</span> <span class='op'>{</span>
<span class='kw'>output</span><span class='op'>$</span><span class='kw'>chart</span> <span class='op'>&lt;-</span> <span class='fu'>renderApexchart</span>({
<span class='kw'>input</span><span class='op'>$</span><span class='kw'>redraw</span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(type = <span class='st'>"bar"</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"Example"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span>(<span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span>)
)
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_xaxis.html'>ax_xaxis</a></span>(
categories = <span class='kw'>LETTERS</span>[<span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span>]
)
})
<span class='va'>output</span><span class='op'>$</span><span class='va'>chart</span> <span class='op'>&lt;-</span> <span class='fu'>renderApexchart</span><span class='op'>(</span><span class='op'>{</span>
<span class='va'>input</span><span class='op'>$</span><span class='va'>redraw</span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span><span class='op'>(</span>type <span class='op'>=</span> <span class='st'>"bar"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span><span class='op'>(</span>
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"Example"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='op'>(</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>100</span>, <span class='fl'>5</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_xaxis.html'>ax_xaxis</a></span><span class='op'>(</span>
categories <span class='op'>=</span> <span class='va'>LETTERS</span><span class='op'>[</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span><span class='op'>]</span>
<span class='op'>)</span>
<span class='op'>}</span><span class='op'>)</span>
}
<span class='op'>}</span>
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/shinyApp.html'>shinyApp</a></span>(<span class='kw'>ui</span>, <span class='kw'>server</span>)
}
<span class='fu'><a href='https://shiny.rstudio.com/reference/shiny/latest/shinyApp.html'>shinyApp</a></span><span class='op'>(</span><span class='va'>ui</span>, <span class='va'>server</span><span class='op'>)</span>
<span class='op'>}</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -329,7 +329,7 @@ is useful if you want to save an expression in a variable.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

42
docs/reference/ax-series.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,9 +230,9 @@
<p>Add data to a chart</p>
</div>
<pre class="usage"><span class='fu'>ax_series</span>(<span class='kw'>ax</span>, <span class='kw'>...</span>)
<pre class="usage"><span class='fu'>ax_series</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>...</span><span class='op'>)</span>
<span class='fu'>ax_series2</span>(<span class='kw'>ax</span>, <span class='kw'>l</span>)</pre>
<span class='fu'>ax_series2</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>l</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -258,24 +258,24 @@
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
<span class='co'># One serie</span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'>ax_series</span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"rnorm"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span>(<span class='fl'>10</span>)
))
<span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_series</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"rnorm"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span><span class='op'>(</span><span class='fl'>10</span><span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='co'># Two series</span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'>ax_series</span>(
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"rnorm 1"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span>(<span class='fl'>10</span>)
),
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"rnorm 2"</span>,
data = <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span>(<span class='fl'>10</span>)
)
)
<span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_series</span><span class='op'>(</span>
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"rnorm 1"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span><span class='op'>(</span><span class='fl'>10</span><span class='op'>)</span>
<span class='op'>)</span>,
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"rnorm 2"</span>,
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/stats/Normal.html'>rnorm</a></span><span class='op'>(</span><span class='fl'>10</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -296,7 +296,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

192
docs/reference/ax_annotations.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,14 +230,14 @@
<p>Annotations properties</p>
</div>
<pre class="usage"><span class='fu'>ax_annotations</span>(
<span class='kw'>ax</span>,
position = <span class='kw'>NULL</span>,
yaxis = <span class='kw'>NULL</span>,
xaxis = <span class='kw'>NULL</span>,
points = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_annotations</span><span class='op'>(</span>
<span class='va'>ax</span>,
position <span class='op'>=</span> <span class='cn'>NULL</span>,
yaxis <span class='op'>=</span> <span class='cn'>NULL</span>,
xaxis <span class='op'>=</span> <span class='cn'>NULL</span>,
points <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -276,102 +276,102 @@
<p>See <a href='https://apexcharts.com/docs/options/annotations/'>https://apexcharts.com/docs/options/annotations/</a>.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Horizontal line</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span>(<span class='kw'>economics</span>, <span class='fl'>200</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span>(
yaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
y = <span class='fl'>11.897</span>,
borderColor = <span class='st'>"firebrick"</span>,
opacity = <span class='fl'>1</span>,
label = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
text = <span class='st'>"Mean uempmed"</span>,
position = <span class='st'>"left"</span>,
textAnchor = <span class='st'>"start"</span>
)
))
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span><span class='op'>(</span><span class='va'>economics</span>, <span class='fl'>200</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span><span class='op'>(</span>
yaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
y <span class='op'>=</span> <span class='fl'>11.897</span>,
borderColor <span class='op'>=</span> <span class='st'>"firebrick"</span>,
opacity <span class='op'>=</span> <span class='fl'>1</span>,
label <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"Mean uempmed"</span>,
position <span class='op'>=</span> <span class='st'>"left"</span>,
textAnchor <span class='op'>=</span> <span class='st'>"start"</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Vertical line</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span>(<span class='kw'>economics</span>, <span class='fl'>200</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span>(
xaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
x = <span class='kw'>htmlwidgets</span>::<span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span>(<span class='st'>"new Date('1 Mar 2007').getTime()"</span>),
strokeDashArray = <span class='fl'>0</span>,
borderColor = <span class='st'>"#775DD0"</span>,
label = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
text = <span class='st'>"A label"</span>,
borderColor = <span class='st'>"#775DD0"</span>,
style = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
color = <span class='st'>"#fff"</span>,
background = <span class='st'>"#775DD0"</span>
)
)
))
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span><span class='op'>(</span><span class='va'>economics</span>, <span class='fl'>200</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span><span class='op'>(</span>
xaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'>htmlwidgets</span><span class='fu'>::</span><span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span><span class='op'>(</span><span class='st'>"new Date('1 Mar 2007').getTime()"</span><span class='op'>)</span>,
strokeDashArray <span class='op'>=</span> <span class='fl'>0</span>,
borderColor <span class='op'>=</span> <span class='st'>"#775DD0"</span>,
label <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"A label"</span>,
borderColor <span class='op'>=</span> <span class='st'>"#775DD0"</span>,
style <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
color <span class='op'>=</span> <span class='st'>"#fff"</span>,
background <span class='op'>=</span> <span class='st'>"#775DD0"</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Vertical range</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span>(<span class='kw'>economics</span>, <span class='fl'>200</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span>(
xaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
x = <span class='kw'>htmlwidgets</span>::<span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span>(<span class='st'>"new Date('1 Jan 2009').getTime()"</span>),
x2 = <span class='kw'>htmlwidgets</span>::<span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span>(<span class='st'>"new Date('1 Feb 2010').getTime()"</span>),
fillColor = <span class='st'>"#B3F7CA"</span>,
opacity = <span class='fl'>0.4</span>,
label = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
text = <span class='st'>"A label"</span>,
borderColor = <span class='st'>"#B3F7CA"</span>,
style = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
color = <span class='st'>"#fff"</span>,
background = <span class='st'>"#B3F7CA"</span>
)
)
))
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span><span class='op'>(</span><span class='va'>economics</span>, <span class='fl'>200</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span><span class='op'>(</span>
xaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'>htmlwidgets</span><span class='fu'>::</span><span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span><span class='op'>(</span><span class='st'>"new Date('1 Jan 2009').getTime()"</span><span class='op'>)</span>,
x2 <span class='op'>=</span> <span class='fu'>htmlwidgets</span><span class='fu'>::</span><span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span><span class='op'>(</span><span class='st'>"new Date('1 Feb 2010').getTime()"</span><span class='op'>)</span>,
fillColor <span class='op'>=</span> <span class='st'>"#B3F7CA"</span>,
opacity <span class='op'>=</span> <span class='fl'>0.4</span>,
label <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"A label"</span>,
borderColor <span class='op'>=</span> <span class='st'>"#B3F7CA"</span>,
style <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
color <span class='op'>=</span> <span class='st'>"#fff"</span>,
background <span class='op'>=</span> <span class='st'>"#B3F7CA"</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Point annotation</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span>(<span class='kw'>economics</span>, <span class='fl'>200</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span>(
points = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
x = <span class='kw'>htmlwidgets</span>::<span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span>(<span class='st'>"new Date('1 Jun 2010').getTime()"</span>),
y = <span class='fl'>25.2</span>,
marker = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
size = <span class='fl'>8</span>,
fillColor = <span class='st'>"#fff"</span>,
strokeColor = <span class='st'>"red"</span>,
radius = <span class='fl'>2</span>
),
label = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
text = <span class='st'>"Highest"</span>,
offsetY = <span class='fl'>0</span>,
borderColor = <span class='st'>"#FF4560"</span>,
style = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
color = <span class='st'>"#fff"</span>,
background = <span class='st'>"#FF4560"</span>
)
)
))
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span><span class='op'>(</span><span class='va'>economics</span>, <span class='fl'>200</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_annotations</span><span class='op'>(</span>
points <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'>htmlwidgets</span><span class='fu'>::</span><span class='fu'><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>JS</a></span><span class='op'>(</span><span class='st'>"new Date('1 Jun 2010').getTime()"</span><span class='op'>)</span>,
y <span class='op'>=</span> <span class='fl'>25.2</span>,
marker <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
size <span class='op'>=</span> <span class='fl'>8</span>,
fillColor <span class='op'>=</span> <span class='st'>"#fff"</span>,
strokeColor <span class='op'>=</span> <span class='st'>"red"</span>,
radius <span class='op'>=</span> <span class='fl'>2</span>
<span class='op'>)</span>,
label <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"Highest"</span>,
offsetY <span class='op'>=</span> <span class='fl'>0</span>,
borderColor <span class='op'>=</span> <span class='st'>"#FF4560"</span>,
style <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
color <span class='op'>=</span> <span class='st'>"#fff"</span>,
background <span class='op'>=</span> <span class='st'>"#FF4560"</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -393,7 +393,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

182
docs/reference/ax_chart.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,28 +230,28 @@
<p>Chart parameters</p>
</div>
<pre class="usage"><span class='fu'>ax_chart</span>(
<span class='kw'>ax</span>,
type = <span class='kw'>NULL</span>,
stacked = <span class='kw'>NULL</span>,
stackType = <span class='kw'>NULL</span>,
defaultLocale = <span class='kw'>NULL</span>,
locales = <span class='kw'>NULL</span>,
animations = <span class='kw'>NULL</span>,
background = <span class='kw'>NULL</span>,
foreColor = <span class='kw'>NULL</span>,
dropShadow = <span class='kw'>NULL</span>,
events = <span class='kw'>NULL</span>,
offsetX = <span class='kw'>NULL</span>,
offsetY = <span class='kw'>NULL</span>,
selection = <span class='kw'>NULL</span>,
sparkline = <span class='kw'>NULL</span>,
toolbar = <span class='kw'>NULL</span>,
zoom = <span class='kw'>NULL</span>,
width = <span class='kw'>NULL</span>,
height = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_chart</span><span class='op'>(</span>
<span class='va'>ax</span>,
type <span class='op'>=</span> <span class='cn'>NULL</span>,
stacked <span class='op'>=</span> <span class='cn'>NULL</span>,
stackType <span class='op'>=</span> <span class='cn'>NULL</span>,
defaultLocale <span class='op'>=</span> <span class='cn'>NULL</span>,
locales <span class='op'>=</span> <span class='cn'>NULL</span>,
animations <span class='op'>=</span> <span class='cn'>NULL</span>,
background <span class='op'>=</span> <span class='cn'>NULL</span>,
foreColor <span class='op'>=</span> <span class='cn'>NULL</span>,
dropShadow <span class='op'>=</span> <span class='cn'>NULL</span>,
events <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetX <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetY <span class='op'>=</span> <span class='cn'>NULL</span>,
selection <span class='op'>=</span> <span class='cn'>NULL</span>,
sparkline <span class='op'>=</span> <span class='cn'>NULL</span>,
toolbar <span class='op'>=</span> <span class='cn'>NULL</span>,
zoom <span class='op'>=</span> <span class='cn'>NULL</span>,
width <span class='op'>=</span> <span class='cn'>NULL</span>,
height <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -350,29 +350,29 @@ Available options: <code>"normal"</code> or <code>"100%"</code>.</p></td>
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"diamonds"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"diamonds"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'>## Stack bar type</span>
<span class='co'># default is dodge</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>color</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>color</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># stack</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>color</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(stacked = <span class='fl'>TRUE</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>color</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>stacked <span class='op'>=</span> <span class='cn'>TRUE</span><span class='op'>)</span>
<span class='co'># stack filled</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>color</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(stacked = <span class='fl'>TRUE</span>, stackType = <span class='st'>"100%"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>color</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>stacked <span class='op'>=</span> <span class='cn'>TRUE</span>, stackType <span class='op'>=</span> <span class='st'>"100%"</span><span class='op'>)</span>
@ -380,80 +380,80 @@ Available options: <code>"normal"</code> or <code>"100%"</code>.</p></td>
<span class='co'># Toolbar --------------------------------------</span>
<span class='co'># Hide the toolbar</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>color</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(toolbar = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(show = <span class='fl'>FALSE</span>))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>color</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>toolbar <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span><span class='op'>)</span>
<span class='co'># Hide download buttons</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>pce</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(
toolbar = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(tools= <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(download = <span class='fl'>FALSE</span>))
)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>pce</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>
toolbar <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>tools<span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>download <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Zoom -----------------------------------------</span>
<span class='co'># Disable</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>pce</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(
zoom = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(enabled = <span class='fl'>FALSE</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>pce</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>
zoom <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>enabled <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Auto-scale Y axis</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>pce</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(
zoom = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(autoScaleYaxis = <span class='fl'>TRUE</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>pce</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>
zoom <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>autoScaleYaxis <span class='op'>=</span> <span class='cn'>TRUE</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Localization ---------------------------------</span>
<span class='co'># Use included localization config</span>
<span class='kw'>dat</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span>(
x = <span class='fu'><a href='https://rdrr.io/r/base/Sys.time.html'>Sys.Date</a></span>() <span class='op'>+</span> <span class='fl'>1</span><span class='op'>:</span><span class='fl'>20</span>,
y = <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample.int</a></span>(<span class='fl'>20</span>, <span class='fl'>20</span>)
)
<span class='va'>dat</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span><span class='op'>(</span>
x <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/Sys.time.html'>Sys.Date</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>+</span> <span class='fl'>1</span><span class='op'>:</span><span class='fl'>20</span>,
y <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample.int</a></span><span class='op'>(</span><span class='fl'>20</span>, <span class='fl'>20</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># French</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>x</span>, <span class='kw'>y</span>), <span class='st'>"line"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(defaultLocale = <span class='st'>"fr"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>x</span>, <span class='va'>y</span><span class='op'>)</span>, <span class='st'>"line"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>defaultLocale <span class='op'>=</span> <span class='st'>"fr"</span><span class='op'>)</span>
<span class='co'># Italian</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>x</span>, <span class='kw'>y</span>), <span class='st'>"line"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(defaultLocale = <span class='st'>"it"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>x</span>, <span class='va'>y</span><span class='op'>)</span>, <span class='st'>"line"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>defaultLocale <span class='op'>=</span> <span class='st'>"it"</span><span class='op'>)</span>
<span class='co'># Custom config</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>x</span>, <span class='kw'>y</span>), <span class='st'>"line"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span>(locales = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
name = <span class='st'>"en"</span>, <span class='co'># override 'en' locale</span>
options = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
toolbar = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
exportToSVG = <span class='st'>"GET SVG"</span>,
exportToPNG = <span class='st'>"GET PNG"</span>
)
)
)
))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>dat</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>x</span>, <span class='va'>y</span><span class='op'>)</span>, <span class='st'>"line"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_chart</span><span class='op'>(</span>locales <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
name <span class='op'>=</span> <span class='st'>"en"</span>, <span class='co'># override 'en' locale</span>
options <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
toolbar <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
exportToSVG <span class='op'>=</span> <span class='st'>"GET SVG"</span>,
exportToPNG <span class='op'>=</span> <span class='st'>"GET PNG"</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
@ -475,7 +475,7 @@ Available options: <code>"normal"</code> or <code>"100%"</code>.</p></td>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

34
docs/reference/ax_colors.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,7 +230,7 @@
<p>Colors</p>
</div>
<pre class="usage"><span class='fu'>ax_colors</span>(<span class='kw'>ax</span>, <span class='kw'>...</span>)</pre>
<pre class="usage"><span class='fu'>ax_colors</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>...</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -254,23 +254,23 @@
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"diamonds"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"diamonds"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Change default color(s)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors</span>(<span class='st'>"#F7D358"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors</span><span class='op'>(</span><span class='st'>"#F7D358"</span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://scales.r-lib.org'>scales</a></span>)
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>color</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors</span>(<span class='fu'><a href='https://scales.r-lib.org//reference/brewer_pal.html'>brewer_pal</a></span>(palette = <span class='st'>"Set2"</span>)(<span class='fl'>7</span>))
<span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://scales.r-lib.org'>scales</a></span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>color</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors</span><span class='op'>(</span><span class='fu'><a href='https://scales.r-lib.org//reference/brewer_pal.html'>brewer_pal</a></span><span class='op'>(</span>palette <span class='op'>=</span> <span class='st'>"Set2"</span><span class='op'>)</span><span class='op'>(</span><span class='fl'>7</span><span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -292,7 +292,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

349
docs/reference/ax_colors_manual.html Normal file
View File

@ -0,0 +1,349 @@
<!-- Generated by pkgdown: do not edit by hand -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set specific color's series — ax_colors_manual • apexcharter</title>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="../css/theme.css" rel="stylesheet">
<style>
#pkgdown-sidebar {
z-index: 100;
background: #FFF;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script>
<!-- Font -->
<link href="../css/montserrat.css" rel="stylesheet">
<style>body {font-family: 'Montserrat', sans-serif;}</style>
<!-- bootstrap-toc -->
<link rel="stylesheet" href="../bootstrap-toc.css">
<script src="../bootstrap-toc.js"></script>
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous" />
<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script>
<!-- headroom.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
<!-- pkgdown -->
<link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script>
<!-- Particles -->
<script src="../js/particles.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
.contents {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
#sidebar {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
footer {
z-index: 1;
}
#particles {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
</style>
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous" />
<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script>
<!-- headroom.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js" integrity="sha256-DJFC1kqIhelURkuza0AvYal5RxMtpzLjFhsnVIeuk+U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
<!-- pkgdown -->
<link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script>
<meta property="og:title" content="Set specific color's series — ax_colors_manual" />
<meta property="og:description" content="Set specific color's series" />
<meta name="twitter:card" content="summary" />
<!-- mathjax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="body">
<div class="container template-reference-topic">
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="../index.html">
<span class="fas fa fas fa-home fa-lg"></span>
</a>
</li>
<li>
<a href="../articles/apexcharter.html">Get started</a>
</li>
<li>
<a href="../reference/index.html">Reference</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Articles
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="../articles/articles/advanced-configuration.html">Advanced configuration examples</a>
</li>
<li>
<a href="../articles/chart-options.html">Chart options</a>
</li>
<li>
<a href="../articles/shiny-integration.html">Shiny integration</a>
</li>
<li>
<a href="../articles/spark-box.html">Spark boxes</a>
</li>
<li>
<a href="../articles/sync-charts.html">Syncing charts</a>
</li>
</ul>
</li>
<li>
<a href="../news/index.html">Changelog</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/dreamRs/apexcharter/">
<span class="fab fa fab fa-github fa-lg"></span>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
</header>
<div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Set specific color's series</h1>
<small class="dont-index">Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/R/colors.R'><code>R/colors.R</code></a></small>
<div class="hidden name"><code>ax_colors_manual.Rd</code></div>
</div>
<div class="ref-description">
<p>Set specific color's series</p>
</div>
<pre class="usage"><span class='fu'>ax_colors_manual</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>values</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
<colgroup><col class="name" /><col class="desc" /></colgroup>
<tr>
<th>ax</th>
<td><p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p></td>
</tr>
<tr>
<th>values</th>
<td><p>Named list, names represent data series, values colors to use.</p></td>
</tr>
</table>
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='co'>## scatter</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>mtcars</span>,
type <span class='op'>=</span> <span class='st'>"scatter"</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>wt</span>, y <span class='op'>=</span> <span class='va'>mpg</span>, fill <span class='op'>=</span> <span class='va'>cyl</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors_manual</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
<span class='st'>"4"</span> <span class='op'>=</span> <span class='st'>"steelblue"</span>,
<span class='st'>"6"</span> <span class='op'>=</span> <span class='st'>"firebrick"</span>,
<span class='st'>"8"</span> <span class='op'>=</span> <span class='st'>"forestgreen"</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='co'># If missing level, colors are recycled</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>mtcars</span>,
type <span class='op'>=</span> <span class='st'>"scatter"</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>wt</span>, y <span class='op'>=</span> <span class='va'>mpg</span>, fill <span class='op'>=</span> <span class='va'>cyl</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors_manual</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
<span class='st'>"4"</span> <span class='op'>=</span> <span class='st'>"steelblue"</span>,
<span class='st'>"8"</span> <span class='op'>=</span> <span class='st'>"forestgreen"</span>
<span class='op'>)</span><span class='op'>)</span>
</div><div class='output co'>#&gt; <span class='warning'>Warning: Some groups doesn't have a corresponding color value</span></div><div class='input'>
<span class='co'># Ignore levels not present in data</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>mtcars</span>,
type <span class='op'>=</span> <span class='st'>"scatter"</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>wt</span>, y <span class='op'>=</span> <span class='va'>mpg</span>, fill <span class='op'>=</span> <span class='va'>cyl</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors_manual</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
<span class='st'>"4"</span> <span class='op'>=</span> <span class='st'>"steelblue"</span>,
<span class='st'>"6"</span> <span class='op'>=</span> <span class='st'>"firebrick"</span>,
<span class='st'>"8"</span> <span class='op'>=</span> <span class='st'>"forestgreen"</span>,
<span class='st'>"99"</span> <span class='op'>=</span> <span class='st'>"yellow"</span>
<span class='op'>)</span><span class='op'>)</span>
<span class='co'>## Bar</span>
<span class='va'>tab</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/table.html'>table</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='op'>(</span><span class='va'>letters</span><span class='op'>[</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span><span class='op'>]</span>, <span class='fl'>100</span>, <span class='cn'>TRUE</span><span class='op'>)</span>, <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='op'>(</span><span class='va'>LETTERS</span><span class='op'>[</span><span class='fl'>1</span><span class='op'>:</span><span class='fl'>5</span><span class='op'>]</span>, <span class='fl'>100</span>, <span class='cn'>TRUE</span><span class='op'>)</span><span class='op'>)</span>
<span class='va'>dat</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/as.data.frame.html'>as.data.frame</a></span><span class='op'>(</span><span class='va'>tab</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>dat</span>,
type <span class='op'>=</span> <span class='st'>"column"</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>Var1</span>, y <span class='op'>=</span> <span class='va'>Freq</span>, group <span class='op'>=</span> <span class='va'>Var2</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_colors_manual</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
A <span class='op'>=</span> <span class='st'>"steelblue"</span>,
C <span class='op'>=</span> <span class='st'>"firebrick"</span>,
D <span class='op'>=</span> <span class='st'>"forestgreen"</span>,
B <span class='op'>=</span> <span class='st'>"peachpuff"</span>,
E <span class='op'>=</span> <span class='st'>"chartreuse"</span>
<span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
<h2>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#arguments">Arguments</a></li>
<li><a href="#value">Value</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</div>
</div>
<footer>
<div class="copyright">
<p>Developed by <a href='https://twitter.com/_pvictorr'><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"/> Victor Perrier</a>, <a href='https://twitter.com/_mfaan'><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg" /> Fanny Meyer</a>.</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>
</div>
<div id="particles"></div>
<script>
window.onload = function() {
var config = {"particles":{"number":{"value":90,"density":{"enable":true,"value_area":1200}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":5,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;
particlesJS("particles", config);
};
</script>
</body>
</html>

42
docs/reference/ax_dataLabels.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,17 +230,17 @@
<p>Labels on data</p>
</div>
<pre class="usage"><span class='fu'>ax_dataLabels</span>(
<span class='kw'>ax</span>,
enabled = <span class='kw'>NULL</span>,
textAnchor = <span class='kw'>NULL</span>,
offsetX = <span class='kw'>NULL</span>,
offsetY = <span class='kw'>NULL</span>,
style = <span class='kw'>NULL</span>,
dropShadow = <span class='kw'>NULL</span>,
formatter = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_dataLabels</span><span class='op'>(</span>
<span class='va'>ax</span>,
enabled <span class='op'>=</span> <span class='cn'>NULL</span>,
textAnchor <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetX <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetY <span class='op'>=</span> <span class='cn'>NULL</span>,
style <span class='op'>=</span> <span class='cn'>NULL</span>,
dropShadow <span class='op'>=</span> <span class='cn'>NULL</span>,
formatter <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -292,15 +292,15 @@ Accepted values <code>"start"</code>, <code>"middle"</code> or <code>"end"</code
<p>See <a href='https://apexcharts.com/docs/options/datalabels/'>https://apexcharts.com/docs/options/datalabels/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"diamonds"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"diamonds"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Add data labels</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_dataLabels</span>(enabled = <span class='fl'>TRUE</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_dataLabels</span><span class='op'>(</span>enabled <span class='op'>=</span> <span class='cn'>TRUE</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -322,7 +322,7 @@ Accepted values <code>"start"</code>, <code>"middle"</code> or <code>"end"</code
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

80
docs/reference/ax_fill.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,16 +230,16 @@
<p>Fill property</p>
</div>
<pre class="usage"><span class='fu'>ax_fill</span>(
<span class='kw'>ax</span>,
type = <span class='kw'>NULL</span>,
colors = <span class='kw'>NULL</span>,
opacity = <span class='kw'>NULL</span>,
gradient = <span class='kw'>NULL</span>,
image = <span class='kw'>NULL</span>,
pattern = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_fill</span><span class='op'>(</span>
<span class='va'>ax</span>,
type <span class='op'>=</span> <span class='cn'>NULL</span>,
colors <span class='op'>=</span> <span class='cn'>NULL</span>,
opacity <span class='op'>=</span> <span class='cn'>NULL</span>,
gradient <span class='op'>=</span> <span class='cn'>NULL</span>,
image <span class='op'>=</span> <span class='cn'>NULL</span>,
pattern <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -287,39 +287,39 @@ Available options: <code>"solid"</code>, <code>"gradient"</code>, <code>"pattern
<p>See <a href='https://apexcharts.com/docs/options/fill/'>https://apexcharts.com/docs/options/fill/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"diamonds"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"diamonds"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Use a pattern to fill bars</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>, <span class='kw'>color</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>color</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>cut</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_fill</span>(
type = <span class='st'>"pattern"</span>,
opacity = <span class='fl'>1</span>,
pattern = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
style = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"circles"</span>, <span class='st'>"slantedLines"</span>, <span class='st'>"verticalLines"</span>, <span class='st'>"horizontalLines"</span>, <span class='st'>"squares"</span>)
)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span>, <span class='va'>color</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>color</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>cut</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_fill</span><span class='op'>(</span>
type <span class='op'>=</span> <span class='st'>"pattern"</span>,
opacity <span class='op'>=</span> <span class='fl'>1</span>,
pattern <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
style <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"circles"</span>, <span class='st'>"slantedLines"</span>, <span class='st'>"verticalLines"</span>, <span class='st'>"horizontalLines"</span>, <span class='st'>"squares"</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Customise gradient</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>psavert</span>),
type = <span class='st'>"area"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_fill</span>(gradient = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
enabled = <span class='fl'>TRUE</span>,
shadeIntensity = <span class='fl'>1</span>,
inverseColors = <span class='fl'>FALSE</span>,
opacityFrom = <span class='fl'>0</span>,
opacityTo = <span class='fl'>1</span>,
stops = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>0</span>, <span class='fl'>2000</span>)
))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>psavert</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"area"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_fill</span><span class='op'>(</span>gradient <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>
enabled <span class='op'>=</span> <span class='cn'>TRUE</span>,
shadeIntensity <span class='op'>=</span> <span class='fl'>1</span>,
inverseColors <span class='op'>=</span> <span class='cn'>FALSE</span>,
opacityFrom <span class='op'>=</span> <span class='fl'>0</span>,
opacityTo <span class='op'>=</span> <span class='fl'>1</span>,
stops <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>0</span>, <span class='fl'>2000</span><span class='op'>)</span>
<span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -341,7 +341,7 @@ Available options: <code>"solid"</code>, <code>"gradient"</code>, <code>"pattern
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

76
docs/reference/ax_grid.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,19 +230,19 @@
<p>Add grids on chart</p>
</div>
<pre class="usage"><span class='fu'>ax_grid</span>(
<span class='kw'>ax</span>,
show = <span class='kw'>NULL</span>,
borderColor = <span class='kw'>NULL</span>,
strokeDashArray = <span class='kw'>NULL</span>,
position = <span class='kw'>NULL</span>,
xaxis = <span class='kw'>NULL</span>,
yaxis = <span class='kw'>NULL</span>,
row = <span class='kw'>NULL</span>,
column = <span class='kw'>NULL</span>,
padding = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_grid</span><span class='op'>(</span>
<span class='va'>ax</span>,
show <span class='op'>=</span> <span class='cn'>NULL</span>,
borderColor <span class='op'>=</span> <span class='cn'>NULL</span>,
strokeDashArray <span class='op'>=</span> <span class='cn'>NULL</span>,
position <span class='op'>=</span> <span class='cn'>NULL</span>,
xaxis <span class='op'>=</span> <span class='cn'>NULL</span>,
yaxis <span class='op'>=</span> <span class='cn'>NULL</span>,
row <span class='op'>=</span> <span class='cn'>NULL</span>,
column <span class='op'>=</span> <span class='cn'>NULL</span>,
padding <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -301,35 +301,35 @@
<p>See <a href='https://apexcharts.com/docs/options/grid/'>https://apexcharts.com/docs/options/grid/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"mpg"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"mpg"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Hide Y-axis and gridelines</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>mpg</span>, <span class='kw'>manufacturer</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>manufacturer</span>, y = <span class='kw'>n</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span>(show = <span class='fl'>FALSE</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>mpg</span>, <span class='va'>manufacturer</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>manufacturer</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span>
<span class='co'># just grid lines</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>mpg</span>, <span class='kw'>manufacturer</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>manufacturer</span>, y = <span class='kw'>n</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span>(yaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(lines = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(show = <span class='fl'>FALSE</span>)))
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>mpg</span>, <span class='va'>manufacturer</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>manufacturer</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span><span class='op'>(</span>yaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>lines <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span><span class='op'>)</span><span class='op'>)</span>
<span class='co'># both x &amp; y</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='kw'>economics</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>psavert</span>),
type = <span class='st'>"line"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span>(
yaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(lines = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(show = <span class='fl'>TRUE</span>)),
xaxis = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(lines = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(show = <span class='fl'>TRUE</span>))
)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='va'>economics</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>psavert</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_grid</span><span class='op'>(</span>
yaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>lines <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>TRUE</span><span class='op'>)</span><span class='op'>)</span>,
xaxis <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>lines <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>TRUE</span><span class='op'>)</span><span class='op'>)</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -351,7 +351,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

26
docs/reference/ax_labels.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,9 +230,9 @@
<p>Alternative axis labels</p>
</div>
<pre class="usage"><span class='fu'>ax_labels</span>(<span class='kw'>ax</span>, <span class='kw'>...</span>)
<pre class="usage"><span class='fu'>ax_labels</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>...</span><span class='op'>)</span>
<span class='fu'>ax_labels2</span>(<span class='kw'>ax</span>, <span class='kw'>labels</span>)</pre>
<span class='fu'>ax_labels2</span><span class='op'>(</span><span class='va'>ax</span>, <span class='va'>labels</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -260,16 +260,16 @@ option. While, in pie/donut charts, each label corresponds to value in series ar
<p>See <a href='https://apexcharts.com/docs/options/labels/'>https://apexcharts.com/docs/options/labels/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(type = <span class='st'>"pie"</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(<span class='fl'>23</span>, <span class='fl'>45</span>, <span class='fl'>56</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_labels</span>(<span class='st'>"A"</span>, <span class='st'>"B"</span>, <span class='st'>"C"</span>)
<pre class="examples"><div class='input'><span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span><span class='op'>(</span>type <span class='op'>=</span> <span class='st'>"pie"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span><span class='op'>(</span><span class='fl'>23</span>, <span class='fl'>45</span>, <span class='fl'>56</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_labels</span><span class='op'>(</span><span class='st'>"A"</span>, <span class='st'>"B"</span>, <span class='st'>"C"</span><span class='op'>)</span>
<span class='co'># same as </span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(type = <span class='st'>"pie"</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series2</a></span>(<span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>23</span>, <span class='fl'>45</span>, <span class='fl'>56</span>)) <span class='op'>%&gt;%</span>
<span class='fu'>ax_labels2</span>(<span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"A"</span>, <span class='st'>"B"</span>, <span class='st'>"C"</span>))
<span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span><span class='op'>(</span>type <span class='op'>=</span> <span class='st'>"pie"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series2</a></span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>23</span>, <span class='fl'>45</span>, <span class='fl'>56</span><span class='op'>)</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_labels2</span><span class='op'>(</span><span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='st'>"A"</span>, <span class='st'>"B"</span>, <span class='st'>"C"</span><span class='op'>)</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -291,7 +291,7 @@ option. While, in pie/donut charts, each label corresponds to value in series ar
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

32
docs/reference/ax_labs.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,7 +230,7 @@
<p>Modify axis, legend, and chart labels</p>
</div>
<pre class="usage"><span class='fu'>ax_labs</span>(<span class='kw'>ax</span>, title = <span class='kw'>NULL</span>, subtitle = <span class='kw'>NULL</span>, x = <span class='kw'>NULL</span>, y = <span class='kw'>NULL</span>)</pre>
<pre class="usage"><span class='fu'>ax_labs</span><span class='op'>(</span><span class='va'>ax</span>, title <span class='op'>=</span> <span class='cn'>NULL</span>, subtitle <span class='op'>=</span> <span class='cn'>NULL</span>, x <span class='op'>=</span> <span class='cn'>NULL</span>, y <span class='op'>=</span> <span class='cn'>NULL</span><span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -259,19 +259,19 @@
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='kw'>meteo_paris</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span>(
month = <span class='kw'>month.name</span>,
tmax = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>7</span>, <span class='fl'>8</span>, <span class='fl'>12</span>, <span class='fl'>15</span>, <span class='fl'>19</span>, <span class='fl'>23</span>, <span class='fl'>25</span>, <span class='fl'>25</span>, <span class='fl'>21</span>, <span class='fl'>16</span>, <span class='fl'>11</span>, <span class='fl'>8</span>),
tmin = <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>3</span>, <span class='fl'>3</span>, <span class='fl'>5</span>, <span class='fl'>7</span>, <span class='fl'>11</span>, <span class='fl'>14</span>, <span class='fl'>16</span>, <span class='fl'>16</span>, <span class='fl'>13</span>, <span class='fl'>10</span>, <span class='fl'>6</span>, <span class='fl'>3</span>)
)
<pre class="examples"><div class='input'><span class='va'>meteo_paris</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span><span class='op'>(</span>
month <span class='op'>=</span> <span class='va'>month.name</span>,
tmax <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>7</span>, <span class='fl'>8</span>, <span class='fl'>12</span>, <span class='fl'>15</span>, <span class='fl'>19</span>, <span class='fl'>23</span>, <span class='fl'>25</span>, <span class='fl'>25</span>, <span class='fl'>21</span>, <span class='fl'>16</span>, <span class='fl'>11</span>, <span class='fl'>8</span><span class='op'>)</span>,
tmin <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='op'>(</span><span class='fl'>3</span>, <span class='fl'>3</span>, <span class='fl'>5</span>, <span class='fl'>7</span>, <span class='fl'>11</span>, <span class='fl'>14</span>, <span class='fl'>16</span>, <span class='fl'>16</span>, <span class='fl'>13</span>, <span class='fl'>10</span>, <span class='fl'>6</span>, <span class='fl'>3</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>meteo_paris</span>, type = <span class='st'>"column"</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>month</span>, y = <span class='kw'>tmin</span>)) <span class='op'>%&gt;%</span>
<span class='fu'>ax_labs</span>(
title = <span class='st'>"Average minimal temperature in Paris"</span>,
subtitle = <span class='st'>"Data from NOAA"</span>,
x = <span class='st'>"Month"</span>,
y = <span class='st'>"Temperature (\u00b0C)"</span>
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>meteo_paris</span>, type <span class='op'>=</span> <span class='st'>"column"</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>month</span>, y <span class='op'>=</span> <span class='va'>tmin</span><span class='op'>)</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_labs</span><span class='op'>(</span>
title <span class='op'>=</span> <span class='st'>"Average minimal temperature in Paris"</span>,
subtitle <span class='op'>=</span> <span class='st'>"Data from NOAA"</span>,
x <span class='op'>=</span> <span class='st'>"Month"</span>,
y <span class='op'>=</span> <span class='st'>"Temperature (\u00b0C)"</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -291,7 +291,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

74
docs/reference/ax_legend.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,28 +230,28 @@
<p>Legend properties</p>
</div>
<pre class="usage"><span class='fu'>ax_legend</span>(
<span class='kw'>ax</span>,
show = <span class='kw'>NULL</span>,
position = <span class='kw'>NULL</span>,
showForSingleSeries = <span class='kw'>NULL</span>,
showForNullSeries = <span class='kw'>NULL</span>,
showForZeroSeries = <span class='kw'>NULL</span>,
horizontalAlign = <span class='kw'>NULL</span>,
fontSize = <span class='kw'>NULL</span>,
textAnchor = <span class='kw'>NULL</span>,
offsetY = <span class='kw'>NULL</span>,
offsetX = <span class='kw'>NULL</span>,
formatter = <span class='kw'>NULL</span>,
labels = <span class='kw'>NULL</span>,
markers = <span class='kw'>NULL</span>,
itemMargin = <span class='kw'>NULL</span>,
containerMargin = <span class='kw'>NULL</span>,
onItemClick = <span class='kw'>NULL</span>,
onItemHover = <span class='kw'>NULL</span>,
floating = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_legend</span><span class='op'>(</span>
<span class='va'>ax</span>,
show <span class='op'>=</span> <span class='cn'>NULL</span>,
position <span class='op'>=</span> <span class='cn'>NULL</span>,
showForSingleSeries <span class='op'>=</span> <span class='cn'>NULL</span>,
showForNullSeries <span class='op'>=</span> <span class='cn'>NULL</span>,
showForZeroSeries <span class='op'>=</span> <span class='cn'>NULL</span>,
horizontalAlign <span class='op'>=</span> <span class='cn'>NULL</span>,
fontSize <span class='op'>=</span> <span class='cn'>NULL</span>,
textAnchor <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetY <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetX <span class='op'>=</span> <span class='cn'>NULL</span>,
formatter <span class='op'>=</span> <span class='cn'>NULL</span>,
labels <span class='op'>=</span> <span class='cn'>NULL</span>,
markers <span class='op'>=</span> <span class='cn'>NULL</span>,
itemMargin <span class='op'>=</span> <span class='cn'>NULL</span>,
containerMargin <span class='op'>=</span> <span class='cn'>NULL</span>,
onItemClick <span class='op'>=</span> <span class='cn'>NULL</span>,
onItemHover <span class='op'>=</span> <span class='cn'>NULL</span>,
floating <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -351,22 +351,22 @@ when hovered on legend item, it will highlight the paths of the hovered series i
<p>See <a href='https://apexcharts.com/docs/options/legend/'>https://apexcharts.com/docs/options/legend/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"mpg"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"mpg"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Legend position</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>mpg</span>, <span class='kw'>manufacturer</span>, <span class='kw'>year</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>manufacturer</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>year</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_legend</span>(position = <span class='st'>"right"</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>mpg</span>, <span class='va'>manufacturer</span>, <span class='va'>year</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>manufacturer</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>year</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_legend</span><span class='op'>(</span>position <span class='op'>=</span> <span class='st'>"right"</span><span class='op'>)</span>
<span class='co'># hide legend</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>mpg</span>, <span class='kw'>manufacturer</span>, <span class='kw'>year</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>manufacturer</span>, y = <span class='kw'>n</span>, fill = <span class='kw'>year</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_legend</span>(show = <span class='fl'>FALSE</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>mpg</span>, <span class='va'>manufacturer</span>, <span class='va'>year</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>manufacturer</span>, y <span class='op'>=</span> <span class='va'>n</span>, fill <span class='op'>=</span> <span class='va'>year</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_legend</span><span class='op'>(</span>show <span class='op'>=</span> <span class='cn'>FALSE</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -388,7 +388,7 @@ when hovered on legend item, it will highlight the paths of the hovered series i
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

50
docs/reference/ax_markers.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,21 +230,21 @@
<p>Markers properties</p>
</div>
<pre class="usage"><span class='fu'>ax_markers</span>(
<span class='kw'>ax</span>,
size = <span class='kw'>NULL</span>,
colors = <span class='kw'>NULL</span>,
strokeColor = <span class='kw'>NULL</span>,
strokeWidth = <span class='kw'>NULL</span>,
strokeOpacity = <span class='kw'>NULL</span>,
fillOpacity = <span class='kw'>NULL</span>,
shape = <span class='kw'>NULL</span>,
radius = <span class='kw'>NULL</span>,
offsetX = <span class='kw'>NULL</span>,
offsetY = <span class='kw'>NULL</span>,
hover = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_markers</span><span class='op'>(</span>
<span class='va'>ax</span>,
size <span class='op'>=</span> <span class='cn'>NULL</span>,
colors <span class='op'>=</span> <span class='cn'>NULL</span>,
strokeColor <span class='op'>=</span> <span class='cn'>NULL</span>,
strokeWidth <span class='op'>=</span> <span class='cn'>NULL</span>,
strokeOpacity <span class='op'>=</span> <span class='cn'>NULL</span>,
fillOpacity <span class='op'>=</span> <span class='cn'>NULL</span>,
shape <span class='op'>=</span> <span class='cn'>NULL</span>,
radius <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetX <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetY <span class='op'>=</span> <span class='cn'>NULL</span>,
hover <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -311,15 +311,15 @@
<p>See <a href='https://apexcharts.com/docs/options/markers/'>https://apexcharts.com/docs/options/markers/</a></p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"economics"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"economics"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># show points</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span>(<span class='kw'>economics</span>, <span class='fl'>20</span>),
type = <span class='st'>"line"</span>,
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>date</span>, y = <span class='kw'>uempmed</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_markers</span>(size = <span class='fl'>6</span>)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/utils/head.html'>tail</a></span><span class='op'>(</span><span class='va'>economics</span>, <span class='fl'>20</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"line"</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>date</span>, y <span class='op'>=</span> <span class='va'>uempmed</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_markers</span><span class='op'>(</span>size <span class='op'>=</span> <span class='fl'>6</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -341,7 +341,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

46
docs/reference/ax_nodata.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,17 +230,17 @@
<p>Configuration for charts with no data</p>
</div>
<pre class="usage"><span class='fu'>ax_nodata</span>(
<span class='kw'>ax</span>,
text = <span class='st'>"No data"</span>,
align = <span class='st'>"center"</span>,
verticalAlign = <span class='st'>"middle"</span>,
color = <span class='kw'>NULL</span>,
fontSize = <span class='kw'>NULL</span>,
fontFamily = <span class='kw'>NULL</span>,
offsetX = <span class='kw'>NULL</span>,
offsetY = <span class='kw'>NULL</span>
)</pre>
<pre class="usage"><span class='fu'>ax_nodata</span><span class='op'>(</span>
<span class='va'>ax</span>,
text <span class='op'>=</span> <span class='st'>"No data"</span>,
align <span class='op'>=</span> <span class='st'>"center"</span>,
verticalAlign <span class='op'>=</span> <span class='st'>"middle"</span>,
color <span class='op'>=</span> <span class='cn'>NULL</span>,
fontSize <span class='op'>=</span> <span class='cn'>NULL</span>,
fontFamily <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetX <span class='op'>=</span> <span class='cn'>NULL</span>,
offsetY <span class='op'>=</span> <span class='cn'>NULL</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -284,15 +284,15 @@
<p>An <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='kw'>empty</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span>(
var1 = <span class='fu'><a href='https://rdrr.io/r/base/character.html'>character</a></span>(<span class='fl'>0</span>),
var2 = <span class='fu'><a href='https://rdrr.io/r/base/numeric.html'>numeric</a></span>(<span class='fl'>0</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='kw'>empty</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='kw'>var1</span>, <span class='kw'>var2</span>), <span class='st'>"column"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_nodata</span>(
text = <span class='st'>"Sorry no data to visualize"</span>,
fontSize = <span class='st'>"30px"</span>
)
<pre class="examples"><div class='input'><span class='va'>empty</span> <span class='op'>&lt;-</span> <span class='fu'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span><span class='op'>(</span>
var1 <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/character.html'>character</a></span><span class='op'>(</span><span class='fl'>0</span><span class='op'>)</span>,
var2 <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/numeric.html'>numeric</a></span><span class='op'>(</span><span class='fl'>0</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span><span class='va'>empty</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span><span class='va'>var1</span>, <span class='va'>var2</span><span class='op'>)</span>, <span class='st'>"column"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_nodata</span><span class='op'>(</span>
text <span class='op'>=</span> <span class='st'>"Sorry no data to visualize"</span>,
fontSize <span class='op'>=</span> <span class='st'>"30px"</span>
<span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -313,7 +313,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

76
docs/reference/ax_plotOptions.html
View File

@ -151,11 +151,11 @@
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.5.920</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8</span>
</span>
</div>
@ -230,15 +230,15 @@
<p>Specific options for chart</p>
</div>
<pre class="usage"><span class='fu'>ax_plotOptions</span>(
<span class='kw'>ax</span>,
bar = <span class='kw'>NULL</span>,
heatmap = <span class='kw'>NULL</span>,
radialBar = <span class='kw'>NULL</span>,
pie = <span class='kw'>NULL</span>,
bubble = <span class='kw'>NULL</span>,
<span class='kw'>...</span>
)</pre>
<pre class="usage"><span class='fu'>ax_plotOptions</span><span class='op'>(</span>
<span class='va'>ax</span>,
bar <span class='op'>=</span> <span class='cn'>NULL</span>,
heatmap <span class='op'>=</span> <span class='cn'>NULL</span>,
radialBar <span class='op'>=</span> <span class='cn'>NULL</span>,
pie <span class='op'>=</span> <span class='cn'>NULL</span>,
bubble <span class='op'>=</span> <span class='cn'>NULL</span>,
<span class='va'>...</span>
<span class='op'>)</span></pre>
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
<table class="ref-arguments">
@ -278,39 +278,39 @@
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='kw'><a href='https://dplyr.tidyverse.org'>dplyr</a></span>)
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"diamonds"</span>, package = <span class='st'>"ggplot2"</span>)
<pre class="examples"><div class='input'><span class='kw'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='op'>(</span><span class='va'><a href='https://dplyr.tidyverse.org'>dplyr</a></span><span class='op'>)</span>
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span><span class='op'>(</span><span class='st'>"diamonds"</span>, package <span class='op'>=</span> <span class='st'>"ggplot2"</span><span class='op'>)</span>
<span class='co'># Stack bar type</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>)
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span>(
bar = <span class='fu'><a href='bar_opts.html'>bar_opts</a></span>(endingShape = <span class='st'>"rounded"</span>, columnWidth = <span class='st'>"10%"</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span><span class='op'>(</span>
bar <span class='op'>=</span> <span class='fu'><a href='bar_opts.html'>bar_opts</a></span><span class='op'>(</span>endingShape <span class='op'>=</span> <span class='st'>"rounded"</span>, columnWidth <span class='op'>=</span> <span class='st'>"10%"</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Pie</span>
<span class='fu'><a href='apex.html'>apex</a></span>(
data = <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span>(<span class='kw'>diamonds</span>, <span class='kw'>cut</span>),
mapping = <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(x = <span class='kw'>cut</span>, y = <span class='kw'>n</span>),
type = <span class='st'>"pie"</span>
) <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span>(
pie = <span class='fu'><a href='pie_opts.html'>pie_opts</a></span>(customScale = <span class='fl'>0.5</span>)
)
<span class='fu'><a href='apex.html'>apex</a></span><span class='op'>(</span>
data <span class='op'>=</span> <span class='fu'><a href='https://dplyr.tidyverse.org/reference/count.html'>count</a></span><span class='op'>(</span><span class='va'>diamonds</span>, <span class='va'>cut</span><span class='op'>)</span>,
mapping <span class='op'>=</span> <span class='fu'><a href='apexcharter-exports.html'>aes</a></span><span class='op'>(</span>x <span class='op'>=</span> <span class='va'>cut</span>, y <span class='op'>=</span> <span class='va'>n</span><span class='op'>)</span>,
type <span class='op'>=</span> <span class='st'>"pie"</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span><span class='op'>(</span>
pie <span class='op'>=</span> <span class='fu'><a href='pie_opts.html'>pie_opts</a></span><span class='op'>(</span>customScale <span class='op'>=</span> <span class='fl'>0.5</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='co'># Radial</span>
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(type = <span class='st'>"radialBar"</span>) <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span>(
radialBar = <span class='fu'><a href='radialBar_opts.html'>radialBar_opts</a></span>(
hollow = <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(size = <span class='st'>"70%"</span>)
)
) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(<span class='fl'>70</span>) <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_labels.html'>ax_labels</a></span>(<span class='st'>"Indicator"</span>)
<span class='fu'><a href='apexchart.html'>apexchart</a></span><span class='op'>(</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span><span class='op'>(</span>type <span class='op'>=</span> <span class='st'>"radialBar"</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'>ax_plotOptions</span><span class='op'>(</span>
radialBar <span class='op'>=</span> <span class='fu'><a href='radialBar_opts.html'>radialBar_opts</a></span><span class='op'>(</span>
hollow <span class='op'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='op'>(</span>size <span class='op'>=</span> <span class='st'>"70%"</span><span class='op'>)</span>
<span class='op'>)</span>
<span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span><span class='op'>(</span><span class='fl'>70</span><span class='op'>)</span> <span class='op'>%&gt;%</span>
<span class='fu'><a href='ax_labels.html'>ax_labels</a></span><span class='op'>(</span><span class='st'>"Indicator"</span><span class='op'>)</span>
</div></pre>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
@ -331,7 +331,7 @@
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.0.</p>
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>

Some files were not shown because too many files have changed in this diff Show More