207 lines
50 KiB
HTML
207 lines
50 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<meta name="description" content="apexcharter">
|
||
|
|
<title>Syncing charts • apexcharter</title>
|
||
|
|
<script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<link href="../deps/bootstrap-4.6.0/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<script src="../deps/bootstrap-4.6.0/bootstrap.bundle.min.js"></script><script src="../deps/bs3compat-0.2.5.1/tabs.js"></script><script src="../deps/bs3compat-0.2.5.1/bs3compat.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">
|
||
|
|
<!-- bootstrap-toc --><script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></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><!-- 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><!-- search --><script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
|
||
|
|
<link href="../syntax-highlighting.css" rel="stylesheet">
|
||
|
|
<script src="../pkgdown.js"></script><meta property="og:title" content="Syncing charts">
|
||
|
|
<meta property="og:description" content="apexcharter">
|
||
|
|
<!-- 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 data-spy="scroll" data-target="#toc" data-headroom>
|
||
|
|
|
||
|
|
|
||
|
|
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary"><div class="container">
|
||
|
|
<a class="navbar-brand mb-0 h1" href="../index.html">apexcharter</a>
|
||
|
|
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button type="button" id="version-badge" class="badge badge-default d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Released version">0.2.0.9100</button>
|
||
|
|
|
||
|
|
<div id="navbar" class="collapse navbar-collapse">
|
||
|
|
<ul class="navbar-nav mr-auto ml-3">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../articles/apexcharter.html">Get started</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../reference/index.html">Reference</a>
|
||
|
|
</li>
|
||
|
|
<li class="active nav-item dropdown">
|
||
|
|
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown-articles">Articles</a>
|
||
|
|
<div class="dropdown-menu" aria-labelledby="dropdown-articles">
|
||
|
|
<a class="dropdown-item" href="../articles/articles/advanced-configuration.html">Advanced configuration examples</a>
|
||
|
|
<a class="dropdown-item" href="../articles/chart-options.html">Chart options</a>
|
||
|
|
<a class="dropdown-item" href="../articles/facets.html">Facets: grid of charts</a>
|
||
|
|
<a class="dropdown-item" href="../articles/shiny-integration.html">Shiny integration</a>
|
||
|
|
<a class="dropdown-item" href="../articles/spark-box.html">Spark boxes</a>
|
||
|
|
<a class="dropdown-item" href="../articles/sync-charts.html">Syncing charts</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../news/index.html">Changelog</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<form class="form-inline my-2 my-lg-0" role="search">
|
||
|
|
<input type="search" class="form-control mr-sm-2" aria-label="Search" name="search-input" data-search-index="/search.json" id="search-input" placeholder="Search..." autocomplete="off">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<ul class="navbar-nav ml-1">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="external-link nav-link" href="https://github.com/dreamRs/apexcharter/" aria-label="github">
|
||
|
|
<span class="fab fa fab fa-github fa-lg"></span>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav><div class="container template-article">
|
||
|
|
<script src="sync-charts_files/header-attrs-2.9/header-attrs.js"></script><script src="sync-charts_files/htmlwidgets-1.5.3/htmlwidgets.js"></script><script src="sync-charts_files/apexcharts-3.27.3/apexcharts.min.js"></script><link href="sync-charts_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
|
||
|
|
<script src="sync-charts_files/d3-format-1.4.2/d3-format.min.js"></script><script src="sync-charts_files/apexcharter-binding-0.2.0.9100/apexcharter.js"></script><div class="row">
|
||
|
|
<div class="col-md-9 contents">
|
||
|
|
<img src="" class="pkg-logo" alt=""><div class="page-header pb-2 mt-4 mb-2 border-bottom toc-ignore">
|
||
|
|
<h1 class="display-4" data-toc-skip>Syncing charts</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/sync-charts.Rmd" class="external-link"><code>vignettes/sync-charts.Rmd</code></a></small>
|
||
|
|
<div class="d-none name"><code>sync-charts.Rmd</code></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<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" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter" class="external-link">apexcharter</a></span><span class="op">)</span>
|
||
|
|
<span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">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></code></pre></div>
|
||
|
|
<div id="sync-charts" class="section level2">
|
||
|
|
<h2 class="hasAnchor">
|
||
|
|
<a href="#sync-charts" class="anchor" aria-hidden="true"></a>Sync charts</h2>
|
||
|
|
<p>With <a href="https://apexcharts.com" class="external-link">Apexcharts</a> you can sync (tooltip, zoom) several charts together by providing a common id in <code>synchronize</code> argument. This works in Shiny and Markdown. Here an example where we create two charts, tooltip will be displayed on both charts when you hover one, and if you zoom on one, the other one will be synced :</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="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">150</span><span class="op">)</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">pce</span><span class="op">)</span>,
|
||
|
|
type <span class="op">=</span> <span class="st">"line"</span>,
|
||
|
|
synchronize <span class="op">=</span> <span class="st">"economics"</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></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">0</span>,
|
||
|
|
labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
formatter <span class="op">=</span> <span class="fu"><a href="../reference/format_num.html">format_num</a></span><span class="op">(</span><span class="st">"~s"</span><span class="op">)</span>,
|
||
|
|
minWidth <span class="op">=</span> <span class="fl">40</span>
|
||
|
|
<span class="op">)</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span>x <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</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="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">150</span><span class="op">)</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">psavert</span><span class="op">)</span>,
|
||
|
|
type <span class="op">=</span> <span class="st">"line"</span>,
|
||
|
|
synchronize <span class="op">=</span> <span class="st">"economics"</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></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">0</span>,
|
||
|
|
labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
formatter <span class="op">=</span> <span class="fu"><a href="../reference/format_num.html">format_num</a></span><span class="op">(</span><span class="st">"~s"</span><span class="op">)</span>,
|
||
|
|
minWidth <span class="op">=</span> <span class="fl">40</span>
|
||
|
|
<span class="op">)</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span>x <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</span><span class="op">)</span></code></pre></div>
|
||
|
|
<div id="htmlwidget-81a6fd1156e9d0d583dd" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||
|
|
<script type="application/json" data-for="htmlwidget-81a6fd1156e9d0d583dd">{"x":{"ax_opts":{"chart":{"type":"line","group":"economics"},"series":[{"name":"pce","type":"line","data":[[1036108800000,7459.7],[1038700800000,7512.8],[1041379200000,7533.1],[1044057600000,7535.9],[1046476800000,7598.4],[1049155200000,7621],[1051747200000,7628.1],[1054425600000,7678.6],[1057017600000,7738.2],[1059696000000,7834.5],[1062374400000,7835],[1064966400000,7845.7],[1067644800000,7899.6],[1070236800000,7929.2],[1072915200000,7987.4],[1075593600000,8019.8],[1078099200000,8076],[1080777600000,8088.6],[1083369600000,8163.2],[1086048000000,8147.2],[1088640000000,8218.9],[1091318400000,8253.1],[1093996800000,8321.1],[1096588800000,8374.6],[1099267200000,8420.6],[1101859200000,8481.5],[1104537600000,8470.2],[1107216000000,8529.2],[1109635200000,8569.5],[1112313600000,8645.6],[1114905600000,8643.9],[1117584000000,8724.8],[1120176000000,8829.5],[1122854400000,8832.4],[1125532800000,8885.8],[1128124800000,8926.6],[1130803200000,8938.5],[1133395200000,8969.6],[1136073600000,9059.8],[1138752000000,9090.1],[1141171200000,9122.1],[1143849600000,9174.8],[1146441600000,9215.1],[1149120000000,9240.8],[1151712000000,9322.6],[1154390400000,9321.8],[1157068800000,9354.7],[1159660800000,9373.2],[1162339200000,9380.2],[1164931200000,9469],[1167609600000,9516.3],[1170288000000,9546.8],[1172707200000,9585.1],[1175385600000,9615.7],[1177977600000,9651.3],[1180656000000,9667.3],[1183248000000,9709.6],[1185926400000,9753.9],[1188604800000,9797.9],[1191196800000,9827],[1193875200000,9897.8],[1196467200000,9908.4],[1199145600000,9930],[1201824000000,9913.4],[1204329600000,9959.4],[1207008000000,9996.8],[1209600000000,10053.8],[1212278400000,10107.9],[1214870400000,10104.7],[1217548800000,10094.7],[1220227200000,10043.5],[1222819200000,9960.3],[1225497600000,9820.8],[1228089600000,9730.7],[1230768000000,9783.8],[1233446400000,9766],[1235865600000,9718.5],[1238544000000,9724.8],[1241136000000,9748.9],[1243814400000,9806.9],[1246406400000,9841.7],[1249084800000,9961],[1251763200000,9883.4],[1254355200000,9931.9],[1257033600000,9940.5],[1259625600000,9998.9],[1262304000000,10001.8],[1264982400000,10030.6],[1267401600000,10089.1],[1270080000000,10112.9],[1272672000000,10131],[1275350400000,10151.4],[1277942400000,10184.7],[1280620800000,10228.2],[1283299200000,10249],[1285891200000,10304.7],[1288569600000,10354.7],[1291161600000,10392.1],[1293840000000,10435.5],[1296518400000,10470.1],[1298937600000,10550.5],[1301616000000,10587.6],[1304208000000,10612],[1306886400000,10636.8],[1309478400000,10677.5],[1312156800000,10700.6],[1314835200000,10738.1],[1317427200000,10753.1],[1320105600000,10759.5],[1322697600000,10772.2],[1325376000000,10862.1],[1328054400000,10953.5],[1330560000000,10951.8],[1333238400000,10979.7],[1335830400000,10968.6],[1338508800000,10946.3],[1341100800000,10977.2],[1343779200000,11004.1],[1346457600000,11061.5],[1349049600000,11099.8],[1351728000000,11136.8],[1354320000000,11140.5],[1356998400000,11202.8],[1359676800000,11239.6],[1362096000000,11227.1],[1364774400000,11205.4],[1367366400000,11244.6],[1370044800000,11268.8],[1372636800000,11296.7],[1375315200000,11329.2],[1377993600000,11366.9],[1380585600000,11419.8],[1383264000000,11487.6],[1385856000000,11517.9],[1388534400000,11512.5],[1391212800000,11566.2],[1393632000000,11643],[1396310400000,11702.6],[1398902400000,11748.4],[1401580800000,11817],[1404172800000,11860.5],[1406851200000,11944.3],[1409529600000,11957.4],[1412121600000,12023],[1414800000000,12051.4],[1417392000000,12062],[1420070400000,12046],[1422748800000,12082.4],[1425168000000,12158.3],[1427846400000,12193.8]]}],"yaxis":{"labels":{"minWidth":40,"style":{"colors":"#848484"},"formatter":"function(value) {var locale = d3.formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~s')(value) + '';}"},"decimalsInFloat":0},"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"xaxis":{"type":"datetime","labels":{"style":{"col
|
||
|
|
<script type="application/json" data-for="htmlwidget-f0fbfafaaabecfc88520">{"x":{"ax_opts":{"chart":{"type":"line","group":"economics"},"series":[{"name":"psavert","type":"line","data":[[1036108800000,5.7],[1038700800000,5.5],[1041379200000,5.5],[1044057600000,5.6],[1046476800000,5.3],[1049155200000,5.3],[1051747200000,5.8],[1054425600000,5.6],[1057017600000,6.3],[1059696000000,6],[1062374400000,5.2],[1064966400000,5.3],[1067644800000,5.4],[1070236800000,5.4],[1072915200000,5],[1075593600000,5],[1078099200000,4.9],[1080777600000,5.3],[1083369600000,5.3],[1086048000000,5.8],[1088640000000,5.3],[1091318400000,5.2],[1093996800000,4.6],[1096588800000,4.5],[1099267200000,4.1],[1101859200000,6.9],[1104537600000,3.7],[1107216000000,3.4],[1109635200000,3.6],[1112313600000,3.1],[1114905600000,3.5],[1117584000000,2.9],[1120176000000,2.2],[1122854400000,2.7],[1125532800000,2.7],[1128124800000,3.1],[1130803200000,3.5],[1133395200000,3.7],[1136073600000,4.2],[1138752000000,4.2],[1141171200000,4.2],[1143849600000,4],[1146441600000,3.8],[1149120000000,4],[1151712000000,3.4],[1154390400000,3.6],[1157068800000,3.6],[1159660800000,3.6],[1162339200000,3.9],[1164931200000,3.7],[1167609600000,3.7],[1170288000000,4.1],[1172707200000,4.4],[1175385600000,4.2],[1177977600000,4],[1180656000000,3.8],[1183248000000,3.7],[1185926400000,3.4],[1188604800000,3.5],[1191196800000,3.4],[1193875200000,3.1],[1196467200000,3.6],[1199145600000,3.7],[1201824000000,4.1],[1204329600000,4],[1207008000000,3.4],[1209600000000,7.8],[1212278400000,5.5],[1214870400000,4.4],[1217548800000,3.8],[1220227200000,4.7],[1222819200000,5.5],[1225497600000,6.4],[1228089600000,6.4],[1230768000000,6.2],[1233446400000,5.5],[1235865600000,5.9],[1238544000000,6.8],[1241136000000,8.2],[1243814400000,6.7],[1246406400000,6],[1249084800000,4.9],[1251763200000,5.9],[1254355200000,5.4],[1257033600000,5.9],[1259625600000,5.9],[1262304000000,6.1],[1264982400000,5.8],[1267401600000,5.7],[1270080000000,6.4],[1272672000000,7],[1275350400000,6.9],[1277942400000,6.8],[1280620800000,6.9],[1283299200000,6.7],[1285891200000,6.6],[1288569600000,6.6],[1291161600000,7.1],[1293840000000,7.4],[1296518400000,7.6],[1298937600000,7],[1301616000000,6.9],[1304208000000,6.9],[1306886400000,7.2],[1309478400000,7.3],[1312156800000,7.2],[1314835200000,6.8],[1317427200000,6.8],[1320105600000,7],[1322697600000,7.8],[1325376000000,8],[1328054400000,8],[1330560000000,8.5],[1333238400000,8.7],[1335830400000,8.8],[1338508800000,9.1],[1341100800000,8.2],[1343779200000,8],[1346457600000,8.2],[1349049600000,8.8],[1351728000000,9.7],[1354320000000,12],[1356998400000,6.3],[1359676800000,5.8],[1362096000000,5.9],[1364774400000,6.4],[1367366400000,6.7],[1370044800000,6.8],[1372636800000,6.6],[1375315200000,6.7],[1377993600000,6.8],[1380585600000,6.3],[1383264000000,6.2],[1385856000000,6.4],[1388534400000,7.1],[1391212800000,7.3],[1393632000000,7.4],[1396310400000,7.4],[1398902400000,7.4],[1401580800000,7.4],[1404172800000,7.5],[1406851200000,7.2],[1409529600000,7.4],[1412121600000,7.2],[1414800000000,7.3],[1417392000000,7.6],[1420070400000,7.7],[1422748800000,7.9],[1425168000000,7.4],[1427846400000,7.6]]}],"yaxis":{"labels":{"minWidth":40,"style":{"colors":"#848484"},"formatter":"function(value) {var locale = d3.formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~s')(value) + '';}"},"decimalsInFloat":0},"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"tooltip":{"x":{"format":"yyyy"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2002-11-01","max":"2015-04-01"},"type":"line"},"evals":["ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><p>Note that you have to set a common <code>minWidth</code> for y axis labels. Different width yaxis in different charts will produce incorrect results when hovering or inter
|
||
|
|
<p>For an example in Shiny, you can run:</p>
|
||
|
|
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
|
||
|
|
<code class="sourceCode R"><span class="fu">run_sync_demo</span><span class="op">(</span><span class="op">)</span></code></pre></div>
|
||
|
|
</div>
|
||
|
|
<div id="brush-chart" class="section level2">
|
||
|
|
<h2 class="hasAnchor">
|
||
|
|
<a href="#brush-chart" class="anchor" aria-hidden="true"></a>Brush chart</h2>
|
||
|
|
<p>Create a brush chart to navigate into a synced chart : use the chart below to navigate in the chart above.</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">economics</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">psavert</span><span class="op">)</span>,
|
||
|
|
type <span class="op">=</span> <span class="st">"line"</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>
|
||
|
|
id <span class="op">=</span> <span class="st">"target-chart"</span>, <span class="co"># <-- define target id here</span>
|
||
|
|
toolbar <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
autoSelected <span class="op">=</span> <span class="st">"pan"</span>,
|
||
|
|
show <span class="op">=</span> <span class="cn">FALSE</span>
|
||
|
|
<span class="op">)</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>,
|
||
|
|
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">psavert</span><span class="op">)</span>,
|
||
|
|
type <span class="op">=</span> <span class="st">"line"</span>,
|
||
|
|
height <span class="op">=</span> <span class="st">"130px"</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>
|
||
|
|
brush <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
target <span class="op">=</span> <span class="st">"target-chart"</span>, <span class="co"># <-- use target id here</span>
|
||
|
|
enabled <span class="op">=</span> <span class="cn">TRUE</span>
|
||
|
|
<span class="op">)</span>,
|
||
|
|
offsetY <span class="op">=</span> <span class="op">-</span><span class="fl">20</span>,
|
||
|
|
selection <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
enabled <span class="op">=</span> <span class="cn">TRUE</span>, <span class="co"># <-- enable selection and define starting range</span>
|
||
|
|
xaxis <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
|
||
|
|
min <span class="op">=</span> <span class="fu"><a href="../reference/format_date.html">format_date</a></span><span class="op">(</span><span class="va">economics</span><span class="op">$</span><span class="va">date</span><span class="op">[</span><span class="fl">1</span><span class="op">]</span><span class="op">)</span>,
|
||
|
|
max <span class="op">=</span> <span class="fu"><a href="../reference/format_date.html">format_date</a></span><span class="op">(</span><span class="va">economics</span><span class="op">$</span><span class="va">date</span><span class="op">[</span><span class="fl">100</span><span class="op">]</span><span class="op">)</span>
|
||
|
|
<span class="op">)</span>
|
||
|
|
<span class="op">)</span>
|
||
|
|
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">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"><a href="../reference/apexcharter-exports.html">%>%</a></span>
|
||
|
|
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">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></code></pre></div>
|
||
|
|
<div id="htmlwidget-5e39551fc9121b5fa535" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
||
|
|
<script type="application/json" data-for="htmlwidget-5e39551fc9121b5fa535">{"x":{"ax_opts":{"chart":{"type":"line","toolbar":{"autoSelected":"pan","show":false},"id":"target-chart"},"series":[{"name":"psavert","type":"line","data":[[-79056000000,12.6],[-76377600000,12.6],[-73699200000,11.9],[-71107200000,12.9],[-68428800000,12.8],[-65836800000,11.8],[-63158400000,11.7],[-60480000000,12.3],[-57974400000,11.7],[-55296000000,12.3],[-52704000000,12],[-50025600000,11.7],[-47433600000,10.7],[-44755200000,10.5],[-42076800000,10.6],[-39484800000,10.8],[-36806400000,10.6],[-34214400000,11.1],[-31536000000,10.3],[-28857600000,9.7],[-26438400000,10.2],[-23760000000,9.7],[-21168000000,10.1],[-18489600000,11.1],[-15897600000,11.8],[-13219200000,11.5],[-10540800000,11.6],[-7948800000,11.4],[-5270400000,11.6],[-2678400000,11.8],[0,11.8],[2678400000,11.7],[5097600000,12.4],[7776000000,13.3],[10368000000,12.4],[13046400000,12.3],[15638400000,13.5],[18316800000,13.4],[20995200000,12.9],[23587200000,13.1],[26265600000,13.6],[28857600000,13.2],[31536000000,13.3],[34214400000,13.3],[36633600000,13.5],[39312000000,13.2],[41904000000,13.6],[44582400000,14.7],[47174400000,13.8],[49852800000,13.6],[52531200000,13.3],[55123200000,13.3],[57801600000,13.1],[60393600000,13],[63072000000,12.5],[65750400000,12.8],[68256000000,11.8],[70934400000,11.5],[73526400000,11.7],[76204800000,11.7],[78796800000,11.7],[81475200000,12],[84153600000,12.2],[86745600000,13],[89424000000,13.6],[92016000000,13.7],[94694400000,12.4],[97372800000,12.5],[99792000000,12.7],[102470400000,13.2],[105062400000,13.2],[107740800000,13.6],[110332800000,13.2],[113011200000,13.9],[115689600000,13.1],[118281600000,14.4],[120960000000,14.4],[123552000000,14.8],[126230400000,14.3],[128908800000,14.2],[131328000000,13.4],[134006400000,13.1],[136598400000,12.8],[139276800000,12.8],[141868800000,12.8],[144547200000,12.1],[147225600000,12.9],[149817600000,13.4],[152496000000,13.8],[155088000000,14],[157766400000,13.2],[160444800000,12.5],[162864000000,12.7],[165542400000,14.2],[168134400000,17.3],[170812800000,14.3],[173404800000,12.6],[176083200000,13],[178761600000,13],[181353600000,13.4],[184032000000,12.7],[186624000000,12],[189302400000,11.7],[191980800000,12.3],[194486400000,12.2],[197164800000,11.7],[199756800000,12.3],[202435200000,11.4],[205027200000,11.7],[207705600000,11.7],[210384000000,11.4],[212976000000,11.1],[215654400000,11.4],[218246400000,10.6],[220924800000,10.6],[223603200000,9.3],[226022400000,10.5],[228700800000,10.5],[231292800000,10.3],[233971200000,10.6],[236563200000,10.5],[239241600000,10.9],[241920000000,11.1],[244512000000,11],[247190400000,11.2],[249782400000,11.4],[252460800000,11.9],[255139200000,11.1],[257558400000,11],[260236800000,10.8],[262828800000,10.3],[265507200000,10],[268099200000,10.9],[270777600000,10.5],[273456000000,10.6],[276048000000,10.7],[278726400000,10.5],[281318400000,10.4],[283996800000,11.1],[286675200000,11.1],[289094400000,11.2],[291772800000,11],[294364800000,10.3],[297043200000,9.9],[299635200000,10.6],[302313600000,9.7],[304992000000,9.4],[307584000000,9.7],[310262400000,9.7],[312854400000,10.1],[315532800000,9.9],[318211200000,10.1],[320716800000,10.2],[323395200000,11.3],[325987200000,11.4],[328665600000,11.2],[331257600000,11.3],[333936000000,11.3],[336614400000,11.7],[339206400000,11.3],[341884800000,11.6],[344476800000,11.4],[347155200000,10.9],[349833600000,10.8],[352252800000,10.8],[354931200000,10.9],[357523200000,11],[360201600000,10.8],[362793600000,12.3],[365472000000,12],[368150400000,12.4],[370742400000,13],[373420800000,13.2],[376012800000,12.5],[378691200000,12.7],[381369600000,12.1],[383788800000,12.2],[386467200000,12.9],[389059200000,12.3],[391737600000,12.3],[394329600000,12.5],[397008000000,12.6],[399686400000,11.8],[402278400000,11.3],[404956800000,10.9],[407548800000,10.9],[410227200000,11.1],[412905600000,11.1],[415324800000,10.6],[418003200000,10.3],[420595200000,9.9],[423273600000,9.1],[425865600000,9.6],[428544000000,9.2],[431222400000,9.6],[433814400000,9.7],[436492800000,10.3],[439084800000,10.1],[44
|
||
|
|
<script type="application/json" data-for="htmlwidget-9b0f34c59d19916bf5b1">{"x":{"ax_opts":{"chart":{"type":"line","offsetY":-20,"selection":{"enabled":true,"xaxis":{"min":"new Date('1967-07-01').getTime()","max":"new Date('1975-10-01').getTime()"}},"brush":{"target":"target-chart","enabled":true}},"series":[{"name":"psavert","type":"line","data":[[-79056000000,12.6],[-76377600000,12.6],[-73699200000,11.9],[-71107200000,12.9],[-68428800000,12.8],[-65836800000,11.8],[-63158400000,11.7],[-60480000000,12.3],[-57974400000,11.7],[-55296000000,12.3],[-52704000000,12],[-50025600000,11.7],[-47433600000,10.7],[-44755200000,10.5],[-42076800000,10.6],[-39484800000,10.8],[-36806400000,10.6],[-34214400000,11.1],[-31536000000,10.3],[-28857600000,9.7],[-26438400000,10.2],[-23760000000,9.7],[-21168000000,10.1],[-18489600000,11.1],[-15897600000,11.8],[-13219200000,11.5],[-10540800000,11.6],[-7948800000,11.4],[-5270400000,11.6],[-2678400000,11.8],[0,11.8],[2678400000,11.7],[5097600000,12.4],[7776000000,13.3],[10368000000,12.4],[13046400000,12.3],[15638400000,13.5],[18316800000,13.4],[20995200000,12.9],[23587200000,13.1],[26265600000,13.6],[28857600000,13.2],[31536000000,13.3],[34214400000,13.3],[36633600000,13.5],[39312000000,13.2],[41904000000,13.6],[44582400000,14.7],[47174400000,13.8],[49852800000,13.6],[52531200000,13.3],[55123200000,13.3],[57801600000,13.1],[60393600000,13],[63072000000,12.5],[65750400000,12.8],[68256000000,11.8],[70934400000,11.5],[73526400000,11.7],[76204800000,11.7],[78796800000,11.7],[81475200000,12],[84153600000,12.2],[86745600000,13],[89424000000,13.6],[92016000000,13.7],[94694400000,12.4],[97372800000,12.5],[99792000000,12.7],[102470400000,13.2],[105062400000,13.2],[107740800000,13.6],[110332800000,13.2],[113011200000,13.9],[115689600000,13.1],[118281600000,14.4],[120960000000,14.4],[123552000000,14.8],[126230400000,14.3],[128908800000,14.2],[131328000000,13.4],[134006400000,13.1],[136598400000,12.8],[139276800000,12.8],[141868800000,12.8],[144547200000,12.1],[147225600000,12.9],[149817600000,13.4],[152496000000,13.8],[155088000000,14],[157766400000,13.2],[160444800000,12.5],[162864000000,12.7],[165542400000,14.2],[168134400000,17.3],[170812800000,14.3],[173404800000,12.6],[176083200000,13],[178761600000,13],[181353600000,13.4],[184032000000,12.7],[186624000000,12],[189302400000,11.7],[191980800000,12.3],[194486400000,12.2],[197164800000,11.7],[199756800000,12.3],[202435200000,11.4],[205027200000,11.7],[207705600000,11.7],[210384000000,11.4],[212976000000,11.1],[215654400000,11.4],[218246400000,10.6],[220924800000,10.6],[223603200000,9.3],[226022400000,10.5],[228700800000,10.5],[231292800000,10.3],[233971200000,10.6],[236563200000,10.5],[239241600000,10.9],[241920000000,11.1],[244512000000,11],[247190400000,11.2],[249782400000,11.4],[252460800000,11.9],[255139200000,11.1],[257558400000,11],[260236800000,10.8],[262828800000,10.3],[265507200000,10],[268099200000,10.9],[270777600000,10.5],[273456000000,10.6],[276048000000,10.7],[278726400000,10.5],[281318400000,10.4],[283996800000,11.1],[286675200000,11.1],[289094400000,11.2],[291772800000,11],[294364800000,10.3],[297043200000,9.9],[299635200000,10.6],[302313600000,9.7],[304992000000,9.4],[307584000000,9.7],[310262400000,9.7],[312854400000,10.1],[315532800000,9.9],[318211200000,10.1],[320716800000,10.2],[323395200000,11.3],[325987200000,11.4],[328665600000,11.2],[331257600000,11.3],[333936000000,11.3],[336614400000,11.7],[339206400000,11.3],[341884800000,11.6],[344476800000,11.4],[347155200000,10.9],[349833600000,10.8],[352252800000,10.8],[354931200000,10.9],[357523200000,11],[360201600000,10.8],[362793600000,12.3],[365472000000,12],[368150400000,12.4],[370742400000,13],[373420800000,13.2],[376012800000,12.5],[378691200000,12.7],[381369600000,12.1],[383788800000,12.2],[386467200000,12.9],[389059200000,12.3],[391737600000,12.3],[394329600000,12.5],[397008000000,12.6],[399686400000,11.8],[402278400000,11.3],[404956800000,10.9],[407548800000,10.9],[410227200000,11.1],[412905600000,11.1],[415324800000,10.6],[418003200000,10.3],[420595200000,9.9],[423273600000,9.1],[
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 d-none d-md-block" id="pkgdown-sidebar">
|
||
|
|
<div class="sticky-top">
|
||
|
|
<nav id="toc"><h2 data-toc-skip>Contents</h2>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer><div class="pkgdown-footer-left">
|
||
|
|
<p></p>
|
||
|
|
<p>Developed by <a href="https://twitter.com/_pvictorr" class="external-link external-link"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <a href="https://twitter.com/_mfaan" class="external-link external-link"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pkgdown-footer-right">
|
||
|
|
<p></p>
|
||
|
|
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link external-link">pkgdown</a> 1.6.1.9001.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|