apexcharter/docs/articles/starting-with-apexcharts.html

268 lines
105 KiB
HTML
Raw Normal View History

2019-02-18 20:32:34 +01:00
<!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.0">
<title>Starting with ApexCharts • apexcharter</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" 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><!-- sticky kit --><script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js" integrity="sha256-c4Rlo1ZozqTPE2RLuvbusY3+SU1pQaJC0TjuhygMipw=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Starting with ApexCharts">
<meta property="og:description" content="">
<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>
<div class="container template-article">
<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">
<a class="navbar-link" href="../index.html">apexcharter</a>
2019-05-15 11:53:53 +02:00
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.0.4.910</span>
2019-02-18 20:32:34 +01:00
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="../index.html">
<span class="fa fa-home fa-lg"></span>
</a>
</li>
2019-05-15 11:53:53 +02:00
<li>
<a href="../articles/starting-with-apexcharts.html">Get started</a>
</li>
2019-02-18 20:32:34 +01:00
<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>
2019-05-15 11:53:53 +02:00
<a href="../articles/labs.html">Labs: title, subtitle &amp; axis</a>
2019-02-18 20:32:34 +01:00
</li>
</ul>
2019-05-15 11:53:53 +02:00
</li>
<li>
<a href="../news/index.html">News</a>
2019-02-18 20:32:34 +01:00
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/dreamRs/apexcharter">
<span class="fa fa-github fa-lg"></span>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
2019-05-15 11:53:53 +02:00
</header><script src="starting-with-apexcharts_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="starting-with-apexcharts_files/apexcharts-3.6.10/apexcharts.min.js"></script><script src="starting-with-apexcharts_files/apexcharter-binding-0.0.4.900/apexcharter.js"></script><div class="row">
2019-02-18 20:32:34 +01:00
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Starting with ApexCharts</h1>
<h4 class="author">Victor Perrier</h4>
2019-05-15 11:53:53 +02:00
<h4 class="date">2019-05-15</h4>
2019-02-18 20:32:34 +01:00
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/starting-with-apexcharts.Rmd"><code>vignettes/starting-with-apexcharts.Rmd</code></a></small>
<div class="hidden name"><code>starting-with-apexcharts.Rmd</code></div>
</div>
<p>The objective of this vignette is to show how to quickly build data visualizations with the ApexCharts JavaScript library, as well as to give an overview of the different graphics available.</p>
<p>Data used are from <code>ggplot2</code> package, data manipulation will be done with the <code>dplyr</code> package.</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(ggplot2)</a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(dplyr)</a>
2019-05-15 11:53:53 +02:00
<a class="sourceLine" id="cb1-3" title="3"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(apexcharter)</a></code></pre></div>
2019-02-18 20:32:34 +01:00
<div id="bar-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#bar-charts" class="anchor"></a>Bar charts</h2>
<p>Simple bar charts can be created with:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"mpg"</span>)</a>
<a class="sourceLine" id="cb2-2" title="2">n_manufac &lt;-<span class="st"> </span><span class="kw">count</span>(mpg, manufacturer)</a>
<a class="sourceLine" id="cb2-3" title="3"></a>
<a class="sourceLine" id="cb2-4" title="4"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_manufac, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> manufacturer, <span class="dt">y =</span> n))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-bf941c05de3dd71ff4b5" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-bf941c05de3dd71ff4b5">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Flipping coordinates can be done by using <code>type = "bar"</code>:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_manufac, <span class="dt">type =</span> <span class="st">"bar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> manufacturer, <span class="dt">y =</span> n))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-ec91a56a333ee2c52902" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ec91a56a333ee2c52902">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":true}},"grid":{"yaxis":{"lines":{"show":false}},"xaxis":{"lines":{"show":true}}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>To create a dodge bar charts, use aesthetic <code>fill</code> :</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" title="1">n_manufac_year &lt;-<span class="st"> </span><span class="kw">count</span>(mpg, manufacturer, year)</a>
<a class="sourceLine" id="cb4-2" title="2"></a>
<a class="sourceLine" id="cb4-3" title="3"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_manufac_year, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> manufacturer, <span class="dt">y =</span> n, <span class="dt">fill =</span> year))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-6b6add01b24886216fc1" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-6b6add01b24886216fc1">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":1999,"data":[{"x":"audi","y":9,"fill":1999},{"x":"chevrolet","y":7,"fill":1999},{"x":"dodge","y":16,"fill":1999},{"x":"ford","y":15,"fill":1999},{"x":"honda","y":5,"fill":1999},{"x":"hyundai","y":6,"fill":1999},{"x":"jeep","y":2,"fill":1999},{"x":"land rover","y":2,"fill":1999},{"x":"lincoln","y":2,"fill":1999},{"x":"mercury","y":2,"fill":1999},{"x":"nissan","y":6,"fill":1999},{"x":"pontiac","y":3,"fill":1999},{"x":"subaru","y":6,"fill":1999},{"x":"toyota","y":20,"fill":1999},{"x":"volkswagen","y":16,"fill":1999}]},{"name":2008,"data":[{"x":"audi","y":9,"fill":2008},{"x":"chevrolet","y":12,"fill":2008},{"x":"dodge","y":21,"fill":2008},{"x":"ford","y":10,"fill":2008},{"x":"honda","y":4,"fill":2008},{"x":"hyundai","y":8,"fill":2008},{"x":"jeep","y":6,"fill":2008},{"x":"land rover","y":2,"fill":2008},{"x":"lincoln","y":1,"fill":2008},{"x":"mercury","y":2,"fill":2008},{"x":"nissan","y":7,"fill":2008},{"x":"pontiac","y":2,"fill":2008},{"x":"subaru","y":8,"fill":2008},{"x":"toyota","y":14,"fill":2008},{"x":"volkswagen","y":11,"fill":2008}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>For stacked bar charts, specify option <code>stacked</code> in <code>ax_chart</code> :</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_manufac_year, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> manufacturer, <span class="dt">y =</span> n, <span class="dt">fill =</span> year)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb5-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">stacked =</span> <span class="ot">TRUE</span>)</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-1b68a2d6ad942de9be70" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-1b68a2d6ad942de9be70">{"x":{"ax_opts":{"chart":{"type":"bar","stacked":true},"series":[{"name":1999,"data":[{"x":"audi","y":9,"fill":1999},{"x":"chevrolet","y":7,"fill":1999},{"x":"dodge","y":16,"fill":1999},{"x":"ford","y":15,"fill":1999},{"x":"honda","y":5,"fill":1999},{"x":"hyundai","y":6,"fill":1999},{"x":"jeep","y":2,"fill":1999},{"x":"land rover","y":2,"fill":1999},{"x":"lincoln","y":2,"fill":1999},{"x":"mercury","y":2,"fill":1999},{"x":"nissan","y":6,"fill":1999},{"x":"pontiac","y":3,"fill":1999},{"x":"subaru","y":6,"fill":1999},{"x":"toyota","y":20,"fill":1999},{"x":"volkswagen","y":16,"fill":1999}]},{"name":2008,"data":[{"x":"audi","y":9,"fill":2008},{"x":"chevrolet","y":12,"fill":2008},{"x":"dodge","y":21,"fill":2008},{"x":"ford","y":10,"fill":2008},{"x":"honda","y":4,"fill":2008},{"x":"hyundai","y":8,"fill":2008},{"x":"jeep","y":6,"fill":2008},{"x":"land rover","y":2,"fill":2008},{"x":"lincoln","y":1,"fill":2008},{"x":"mercury","y":2,"fill":2008},{"x":"nissan","y":7,"fill":2008},{"x":"pontiac","y":2,"fill":2008},{"x":"subaru","y":8,"fill":2008},{"x":"toyota","y":14,"fill":2008},{"x":"volkswagen","y":11,"fill":2008}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
2019-02-18 20:32:34 +01:00
</div>
<div id="line-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#line-charts" class="anchor"></a>Line charts</h2>
<p>Simple line charts can be created with (works with <code>character</code>, <code>Date</code> or <code>POSIXct</code>):</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"economics"</span>)</a>
<a class="sourceLine" id="cb6-2" title="2">economics &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">100</span>)</a>
<a class="sourceLine" id="cb6-3" title="3"></a>
<a class="sourceLine" id="cb6-4" title="4"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-afd4ba020089f674840f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-afd4ba020089f674840f">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[{"x":"2007-01-01","y":8.3},{"x":"2007-02-01","y":8.5},{"x":"2007-03-01","y":9.1},{"x":"2007-04-01","y":8.6},{"x":"2007-05-01","y":8.2},{"x":"2007-06-01","y":7.7},{"x":"2007-07-01","y":8.7},{"x":"2007-08-01","y":8.8},{"x":"2007-09-01","y":8.7},{"x":"2007-10-01","y":8.4},{"x":"2007-11-01","y":8.6},{"x":"2007-12-01","y":8.4},{"x":"2008-01-01","y":9},{"x":"2008-02-01","y":8.7},{"x":"2008-03-01","y":8.7},{"x":"2008-04-01","y":9.4},{"x":"2008-05-01","y":7.9},{"x":"2008-06-01","y":9},{"x":"2008-07-01","y":9.7},{"x":"2008-08-01","y":9.7},{"x":"2008-09-01","y":10.2},{"x":"2008-10-01","y":10.4},{"x":"2008-11-01","y":9.8},{"x":"2008-12-01","y":10.5},{"x":"2009-01-01","y":10.7},{"x":"2009-02-01","y":11.7},{"x":"2009-03-01","y":12.3},{"x":"2009-04-01","y":13.1},{"x":"2009-05-01","y":14.2},{"x":"2009-06-01","y":17.2},{"x":"2009-07-01","y":16},{"x":"2009-08-01","y":16.3},{"x":"2009-09-01","y":17.8},{"x":"2009-10-01","y":18.9},{"x":"2009-11-01","y":19.8},{"x":"2009-12-01","y":20.1},{"x":"2010-01-01","y":20},{"x":"2010-02-01","y":19.9},{"x":"2010-03-01","y":20.4},{"x":"2010-04-01","y":22.1},{"x":"2010-05-01","y":22.3},{"x":"2010-06-01","y":25.2},{"x":"2010-07-01","y":22.3},{"x":"2010-08-01","y":21},{"x":"2010-09-01","y":20.3},{"x":"2010-10-01","y":21.2},{"x":"2010-11-01","y":21},{"x":"2010-12-01","y":21.9},{"x":"2011-01-01","y":21.6},{"x":"2011-02-01","y":21.1},{"x":"2011-03-01","y":21.5},{"x":"2011-04-01","y":20.9},{"x":"2011-05-01","y":21.6},{"x":"2011-06-01","y":22.3},{"x":"2011-07-01","y":22},{"x":"2011-08-01","y":22.4},{"x":"2011-09-01","y":22},{"x":"2011-10-01","y":20.5},{"x":"2011-11-01","y":20.9},{"x":"2011-12-01","y":20.5},{"x":"2012-01-01","y":21},{"x":"2012-02-01","y":19.8},{"x":"2012-03-01","y":19.2},{"x":"2012-04-01","y":19.1},{"x":"2012-05-01","y":19.9},{"x":"2012-06-01","y":20.1},{"x":"2012-07-01","y":17.5},{"x":"2012-08-01","y":18.5},{"x":"2012-09-01","y":18.8},{"x":"2012-10-01","y":19.7},{"x":"2012-11-01","y":18.5},{"x":"2012-12-01","y":17.6},{"x":"2013-01-01","y":16.2},{"x":"2013-02-01","y":17.5},{"x":"2013-03-01","y":17.7},{"x":"2013-04-01","y":17.1},{"x":"2013-05-01","y":17},{"x":"2013-06-01","y":16.6},{"x":"2013-07-01","y":16.3},{"x":"2013-08-01","y":16.8},{"x":"2013-09-01","y":16.5},{"x":"2013-10-01","y":16.1},{"x":"2013-11-01","y":17},{"x":"2013-12-01","y":17},{"x":"2014-01-01","y":15.9},{"x":"2014-02-01","y":16.2},{"x":"2014-03-01","y":15.9},{"x":"2014-04-01","y":15.6},{"x":"2014-05-01","y":14.5},{"x":"2014-06-01","y":13.2},{"x":"2014-07-01","y":13.5},{"x":"2014-08-01","y":13.3},{"x":"2014-09-01","y":13.3},{"x":"2014-10-01","y":13.5},{"x":"2014-11-01","y":12.8},{"x":"2014-12-01","y":12.6},{"x":"2015-01-01","y":13.4},{"x":"2015-02-01","y":13.1},{"x":"2015-03-01","y":12.2},{"x":"2015-04-01","y":11.7}]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>To represent several lines, use a <code>data.frame</code> in long format and the <code>group</code> aesthetic:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"economics_long"</span>)</a>
<a class="sourceLine" id="cb7-2" title="2">economics_long &lt;-<span class="st"> </span>economics_long <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb7-3" title="3"><span class="st"> </span><span class="kw">group_by</span>(variable) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb7-4" title="4"><span class="st"> </span><span class="kw">slice</span>((<span class="kw">n</span>()<span class="op">-</span><span class="dv">100</span>)<span class="op">:</span><span class="kw">n</span>())</a>
<a class="sourceLine" id="cb7-5" title="5"></a>
<a class="sourceLine" id="cb7-6" title="6"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> value01, <span class="dt">group =</span> variable))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-fe530910a7c3db9e72be" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-fe530910a7c3db9e72be">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[{"x":"2006-12-01","y":0.773041247286363,"group":"pce"},{"x":"2007-01-01","y":0.776181772938279,"group":"pce"},{"x":"2007-02-01","y":0.779416685973177,"group":"pce"},{"x":"2007-03-01","y":0.782917599814658,"group":"pce"},{"x":"2007-04-01","y":0.786264061574896,"group":"pce"},{"x":"2007-05-01","y":0.789550458636875,"group":"pce"},{"x":"2007-06-01","y":0.790786075286809,"group":"pce"},{"x":"2007-07-01","y":0.793900858925185,"group":"pce"},{"x":"2007-08-01","y":0.797418934109026,"group":"pce"},{"x":"2007-09-01","y":0.800585201774483,"group":"pce"},{"x":"2007-10-01","y":0.801992431848019,"group":"pce"},{"x":"2007-11-01","y":0.808402193219554,"group":"pce"},{"x":"2007-12-01","y":0.810032520743773,"group":"pce"},{"x":"2008-01-01","y":0.811371105447868,"group":"pce"},{"x":"2008-02-01","y":0.810727555109361,"group":"pce"},{"x":"2008-03-01","y":0.814889180631709,"group":"pce"},{"x":"2008-04-01","y":0.818355771788469,"group":"pce"},{"x":"2008-05-01","y":0.822534558653178,"group":"pce"},{"x":"2008-06-01","y":0.827348315185214,"group":"pce"},{"x":"2008-07-01","y":0.827494186595276,"group":"pce"},{"x":"2008-08-01","y":0.826567474107825,"group":"pce"},{"x":"2008-09-01","y":0.821667910863988,"group":"pce"},{"x":"2008-10-01","y":0.813095820355068,"group":"pce"},{"x":"2008-11-01","y":0.801760753726157,"group":"pce"},{"x":"2008-12-01","y":0.79257943556345,"group":"pce"},{"x":"2009-01-01","y":0.796689577058718,"group":"pce"},{"x":"2009-02-01","y":0.795282346985181,"group":"pce"},{"x":"2009-03-01","y":0.792467886838108,"group":"pce"},{"x":"2009-04-01","y":0.792382080126308,"group":"pce"},{"x":"2009-05-01","y":0.793909439596365,"group":"pce"},{"x":"2009-06-01","y":0.798019581091633,"group":"pce"},{"x":"2009-07-01","y":0.800387846337341,"group":"pce"},{"x":"2009-08-01","y":0.811259556722527,"group":"pce"},{"x":"2009-09-01","y":0.803837276151741,"group":"pce"},{"x":"2009-10-01","y":0.80805896637235,"group":"pce"},{"x":"2009-11-01","y":0.809903810676071,"group":"pce"},{"x":"2009-12-01","y":0.814580276469225,"group":"pce"},{"x":"2010-01-01","y":0.814820535262268,"group":"pce"},{"x":"2010-02-01","y":0.817506285341639,"group":"pce"},{"x":"2010-03-01","y":0.82272333341914,"group":"pce"},{"x":"2010-04-01","y":0.823701529933671,"group":"pce"},{"x":"2010-05-01","y":0.826558893436645,"group":"pce"},{"x":"2010-06-01","y":0.82876412592993,"group":"pce"},{"x":"2010-07-01","y":0.830342969427069,"group":"pce"},{"x":"2010-08-01","y":0.835731630928171,"group":"pce"},{"x":"2010-09-01","y":0.837602217245433,"group":"pce"},{"x":"2010-10-01","y":0.844020559288148,"group":"pce"},{"x":"2010-11-01","y":0.848834315820183,"group":"pce"},{"x":"2010-12-01","y":0.85194909945856,"group":"pce"},{"x":"2011-01-01","y":0.855261238534078,"group":"pce"},{"x":"2011-02-01","y":0.858496151568976,"group":"pce"},{"x":"2011-03-01","y":0.864597008778027,"group":"pce"},{"x":"2011-04-01","y":0.868123664633048,"group":"pce"},{"x":"2011-05-01","y":0.870569155919376,"group":"pce"},{"x":"2011-06-01","y":0.872568452304339,"group":"pce"},{"x":"2011-07-01","y":0.87691885259265,"group":"pce"},{"x":"2011-08-01","y":0.878506276760968,"group":"pce"},{"x":"2011-09-01","y":0.882367578792013,"group":"pce"},{"x":"2011-10-01","y":0.88554242712865,"group":"pce"},{"x":"2011-11-01","y":0.885636814511631,"group":"pce"},{"x":"2011-12-01","y":0.88551668511511,"group":"pce"},{"x":"2012-01-01","y":0.892226769977948,"group":"pce"},{"x":"2012-02-01","y":0.898550724637681,"group":"pce"},{"x":"2012-03-01","y":0.899846405985876,"group":"pce"},{"x":"2012-04-01","y":0.902926866939532,"group":"pce"},{"x":"2012-05-01","y":0.902823898885371,"group":"pce"},{"x":"2012-06-01","y":0.903124222376674,"group":"pce"},{"x":"2012-07-01","y":0.906753846285856,"group":"pce"},{"x":"2012-08-01","y":0.909328047639886,"group":"pce"},{"x":"2012-09-01","y":0.915746389682601,"group":"pce"},{"x":"2012-10-01","y":0.917488265932161,"group":"pce"},{"x":"2012-11-01","y":0.919453239632404,"group":"p
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <span class="dt">type =</span> <span class="st">"area"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> value01, <span class="dt">fill =</span> variable)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb8-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">stacked =</span> <span class="ot">TRUE</span>)</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-d9696f2a2036348493b7" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d9696f2a2036348493b7">{"x":{"ax_opts":{"chart":{"type":"area","stacked":true},"series":[{"name":"pce","data":[{"x":"2006-12-01","y":0.773041247286363,"fill":"pce"},{"x":"2007-01-01","y":0.776181772938279,"fill":"pce"},{"x":"2007-02-01","y":0.779416685973177,"fill":"pce"},{"x":"2007-03-01","y":0.782917599814658,"fill":"pce"},{"x":"2007-04-01","y":0.786264061574896,"fill":"pce"},{"x":"2007-05-01","y":0.789550458636875,"fill":"pce"},{"x":"2007-06-01","y":0.790786075286809,"fill":"pce"},{"x":"2007-07-01","y":0.793900858925185,"fill":"pce"},{"x":"2007-08-01","y":0.797418934109026,"fill":"pce"},{"x":"2007-09-01","y":0.800585201774483,"fill":"pce"},{"x":"2007-10-01","y":0.801992431848019,"fill":"pce"},{"x":"2007-11-01","y":0.808402193219554,"fill":"pce"},{"x":"2007-12-01","y":0.810032520743773,"fill":"pce"},{"x":"2008-01-01","y":0.811371105447868,"fill":"pce"},{"x":"2008-02-01","y":0.810727555109361,"fill":"pce"},{"x":"2008-03-01","y":0.814889180631709,"fill":"pce"},{"x":"2008-04-01","y":0.818355771788469,"fill":"pce"},{"x":"2008-05-01","y":0.822534558653178,"fill":"pce"},{"x":"2008-06-01","y":0.827348315185214,"fill":"pce"},{"x":"2008-07-01","y":0.827494186595276,"fill":"pce"},{"x":"2008-08-01","y":0.826567474107825,"fill":"pce"},{"x":"2008-09-01","y":0.821667910863988,"fill":"pce"},{"x":"2008-10-01","y":0.813095820355068,"fill":"pce"},{"x":"2008-11-01","y":0.801760753726157,"fill":"pce"},{"x":"2008-12-01","y":0.79257943556345,"fill":"pce"},{"x":"2009-01-01","y":0.796689577058718,"fill":"pce"},{"x":"2009-02-01","y":0.795282346985181,"fill":"pce"},{"x":"2009-03-01","y":0.792467886838108,"fill":"pce"},{"x":"2009-04-01","y":0.792382080126308,"fill":"pce"},{"x":"2009-05-01","y":0.793909439596365,"fill":"pce"},{"x":"2009-06-01","y":0.798019581091633,"fill":"pce"},{"x":"2009-07-01","y":0.800387846337341,"fill":"pce"},{"x":"2009-08-01","y":0.811259556722527,"fill":"pce"},{"x":"2009-09-01","y":0.803837276151741,"fill":"pce"},{"x":"2009-10-01","y":0.80805896637235,"fill":"pce"},{"x":"2009-11-01","y":0.809903810676071,"fill":"pce"},{"x":"2009-12-01","y":0.814580276469225,"fill":"pce"},{"x":"2010-01-01","y":0.814820535262268,"fill":"pce"},{"x":"2010-02-01","y":0.817506285341639,"fill":"pce"},{"x":"2010-03-01","y":0.82272333341914,"fill":"pce"},{"x":"2010-04-01","y":0.823701529933671,"fill":"pce"},{"x":"2010-05-01","y":0.826558893436645,"fill":"pce"},{"x":"2010-06-01","y":0.82876412592993,"fill":"pce"},{"x":"2010-07-01","y":0.830342969427069,"fill":"pce"},{"x":"2010-08-01","y":0.835731630928171,"fill":"pce"},{"x":"2010-09-01","y":0.837602217245433,"fill":"pce"},{"x":"2010-10-01","y":0.844020559288148,"fill":"pce"},{"x":"2010-11-01","y":0.848834315820183,"fill":"pce"},{"x":"2010-12-01","y":0.85194909945856,"fill":"pce"},{"x":"2011-01-01","y":0.855261238534078,"fill":"pce"},{"x":"2011-02-01","y":0.858496151568976,"fill":"pce"},{"x":"2011-03-01","y":0.864597008778027,"fill":"pce"},{"x":"2011-04-01","y":0.868123664633048,"fill":"pce"},{"x":"2011-05-01","y":0.870569155919376,"fill":"pce"},{"x":"2011-06-01","y":0.872568452304339,"fill":"pce"},{"x":"2011-07-01","y":0.87691885259265,"fill":"pce"},{"x":"2011-08-01","y":0.878506276760968,"fill":"pce"},{"x":"2011-09-01","y":0.882367578792013,"fill":"pce"},{"x":"2011-10-01","y":0.88554242712865,"fill":"pce"},{"x":"2011-11-01","y":0.885636814511631,"fill":"pce"},{"x":"2011-12-01","y":0.88551668511511,"fill":"pce"},{"x":"2012-01-01","y":0.892226769977948,"fill":"pce"},{"x":"2012-02-01","y":0.898550724637681,"fill":"pce"},{"x":"2012-03-01","y":0.899846405985876,"fill":"pce"},{"x":"2012-04-01","y":0.902926866939532,"fill":"pce"},{"x":"2012-05-01","y":0.902823898885371,"fill":"pce"},{"x":"2012-06-01","y":0.903124222376674,"fill":"pce"},{"x":"2012-07-01","y":0.906753846285856,"fill":"pce"},{"x":"2012-08-01","y":0.909328047639886,"fill":"pce"},{"x":"2012-09-01","y":0.915746389682601,"fill":"pce"},{"x":"2012-10-01","y":0.917488265932161,"fill":"pce"},{"x":"2012-11-01","y":0.919453239632404,"fill":"pce"},{"x":"2012-12-01","y":0.921375309976746,"fill":"pce"
2019-02-18 20:32:34 +01:00
</div>
<div id="scatter-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#scatter-charts" class="anchor"></a>Scatter charts</h2>
<p>Simple bar charts can be created with:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> mtcars, <span class="dt">type =</span> <span class="st">"scatter"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> wt, <span class="dt">y =</span> mpg))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-714dc588da22803aff87" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-714dc588da22803aff87">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"mpg","data":[{"x":2.62,"y":21},{"x":2.875,"y":21},{"x":2.32,"y":22.8},{"x":3.215,"y":21.4},{"x":3.44,"y":18.7},{"x":3.46,"y":18.1},{"x":3.57,"y":14.3},{"x":3.19,"y":24.4},{"x":3.15,"y":22.8},{"x":3.44,"y":19.2},{"x":3.44,"y":17.8},{"x":4.07,"y":16.4},{"x":3.73,"y":17.3},{"x":3.78,"y":15.2},{"x":5.25,"y":10.4},{"x":5.424,"y":10.4},{"x":5.345,"y":14.7},{"x":2.2,"y":32.4},{"x":1.615,"y":30.4},{"x":1.835,"y":33.9},{"x":2.465,"y":21.5},{"x":3.52,"y":15.5},{"x":3.435,"y":15.2},{"x":3.84,"y":13.3},{"x":3.845,"y":19.2},{"x":1.935,"y":27.3},{"x":2.14,"y":26},{"x":1.513,"y":30.4},{"x":3.17,"y":15.8},{"x":2.77,"y":19.7},{"x":3.57,"y":15},{"x":2.78,"y":21.4}]}],"xaxis":{"min":1,"max":6},"yaxis":{"min":10,"max":35}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Color points according to a third variable:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> mtcars, <span class="dt">type =</span> <span class="st">"scatter"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">fill =</span> cyl)) <span class="op">%&gt;%</span></a>
<a class="sourceLine" id="cb10-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span>(<span class="dt">tickAmount =</span> <span class="dv">5</span>)</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-3618313dee037425cec6" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3618313dee037425cec6">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":6,"data":[{"x":2.62,"y":21,"fill":6},{"x":2.875,"y":21,"fill":6},{"x":3.215,"y":21.4,"fill":6},{"x":3.46,"y":18.1,"fill":6},{"x":3.44,"y":19.2,"fill":6},{"x":3.44,"y":17.8,"fill":6},{"x":2.77,"y":19.7,"fill":6}]},{"name":4,"data":[{"x":2.32,"y":22.8,"fill":4},{"x":3.19,"y":24.4,"fill":4},{"x":3.15,"y":22.8,"fill":4},{"x":2.2,"y":32.4,"fill":4},{"x":1.615,"y":30.4,"fill":4},{"x":1.835,"y":33.9,"fill":4},{"x":2.465,"y":21.5,"fill":4},{"x":1.935,"y":27.3,"fill":4},{"x":2.14,"y":26,"fill":4},{"x":1.513,"y":30.4,"fill":4},{"x":2.78,"y":21.4,"fill":4}]},{"name":8,"data":[{"x":3.44,"y":18.7,"fill":8},{"x":3.57,"y":14.3,"fill":8},{"x":4.07,"y":16.4,"fill":8},{"x":3.73,"y":17.3,"fill":8},{"x":3.78,"y":15.2,"fill":8},{"x":5.25,"y":10.4,"fill":8},{"x":5.424,"y":10.4,"fill":8},{"x":5.345,"y":14.7,"fill":8},{"x":3.52,"y":15.5,"fill":8},{"x":3.435,"y":15.2,"fill":8},{"x":3.84,"y":13.3,"fill":8},{"x":3.845,"y":19.2,"fill":8},{"x":3.17,"y":15.8,"fill":8},{"x":3.57,"y":15,"fill":8}]}],"xaxis":{"min":1,"max":6,"tickAmount":5},"yaxis":{"min":10,"max":35}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>And change point size using <code>z</code> aesthetics:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb11-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> mtcars, <span class="dt">type =</span> <span class="st">"scatter"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">z =</span> scales<span class="op">::</span><span class="kw"><a href="https://www.rdocumentation.org/packages/scales/topics/rescale">rescale</a></span>(qsec)))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-0e68d5caa33385544de3" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-0e68d5caa33385544de3">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"mpg","data":[{"x":2.62,"y":21,"z":0.233333333333333},{"x":2.875,"y":21,"z":0.3},{"x":2.32,"y":22.8,"z":0.489285714285714},{"x":3.215,"y":21.4,"z":0.588095238095238},{"x":3.44,"y":18.7,"z":0.3},{"x":3.46,"y":18.1,"z":0.680952380952381},{"x":3.57,"y":14.3,"z":0.15952380952381},{"x":3.19,"y":24.4,"z":0.654761904761905},{"x":3.15,"y":22.8,"z":1},{"x":3.44,"y":19.2,"z":0.452380952380953},{"x":3.44,"y":17.8,"z":0.523809523809524},{"x":4.07,"y":16.4,"z":0.345238095238095},{"x":3.73,"y":17.3,"z":0.369047619047619},{"x":3.78,"y":15.2,"z":0.416666666666667},{"x":5.25,"y":10.4,"z":0.414285714285714},{"x":5.424,"y":10.4,"z":0.395238095238095},{"x":5.345,"y":14.7,"z":0.347619047619048},{"x":2.2,"y":32.4,"z":0.591666666666667},{"x":1.615,"y":30.4,"z":0.478571428571429},{"x":1.835,"y":33.9,"z":0.642857142857143},{"x":2.465,"y":21.5,"z":0.655952380952381},{"x":3.52,"y":15.5,"z":0.282142857142857},{"x":3.435,"y":15.2,"z":0.333333333333333},{"x":3.84,"y":13.3,"z":0.108333333333333},{"x":3.845,"y":19.2,"z":0.303571428571429},{"x":1.935,"y":27.3,"z":0.523809523809524},{"x":2.14,"y":26,"z":0.261904761904762},{"x":1.513,"y":30.4,"z":0.285714285714286},{"x":3.17,"y":15.8,"z":0},{"x":2.77,"y":19.7,"z":0.119047619047619},{"x":3.57,"y":15,"z":0.0119047619047619},{"x":2.78,"y":21.4,"z":0.488095238095238}]}],"xaxis":{"min":1,"max":6},"yaxis":{"min":10,"max":35}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
2019-02-18 20:32:34 +01:00
</div>
<div id="pie-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#pie-charts" class="anchor"></a>Pie charts</h2>
<p>Simple pie charts can be created with:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" title="1">poll &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/data.frame">data.frame</a></span>(</a>
<a class="sourceLine" id="cb12-2" title="2"> <span class="dt">answer =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"Yes"</span>, <span class="st">"No"</span>),</a>
<a class="sourceLine" id="cb12-3" title="3"> <span class="dt">n =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">254</span>, <span class="dv">238</span>)</a>
<a class="sourceLine" id="cb12-4" title="4">)</a>
<a class="sourceLine" id="cb12-5" title="5"></a>
<a class="sourceLine" id="cb12-6" title="6"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> poll, <span class="dt">type =</span> <span class="st">"pie"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> answer, <span class="dt">y =</span> n))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-b4e5a08849eca694e0ba" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-b4e5a08849eca694e0ba">{"x":{"ax_opts":{"chart":{"type":"pie"},"series":[254,238],"labels":["Yes","No"]},"auto_update":true},"evals":[],"jsHooks":[]}</script>
2019-02-18 20:32:34 +01:00
</div>
<div id="radial-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#radial-charts" class="anchor"></a>Radial charts</h2>
<p>Simple radial charts can be created with (here we pass values directly in <code>aes</code>, but you can use a <code>data.frame</code>) :</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb13"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb13-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="ot">NULL</span>, <span class="dt">type =</span> <span class="st">"radialBar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> <span class="st">"My value"</span>, <span class="dt">y =</span> <span class="dv">65</span>))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-65599ce74718ebad456d" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-65599ce74718ebad456d">{"x":{"ax_opts":{"chart":{"type":"radialBar"},"series":[65],"labels":["My value"]},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Multi radial chart (more than one value):</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb14-1" title="1">fruits &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/data.frame">data.frame</a></span>(</a>
<a class="sourceLine" id="cb14-2" title="2"> <span class="dt">name =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">'Apples'</span>, <span class="st">'Oranges'</span>, <span class="st">'Bananas'</span>, <span class="st">'Berries'</span>),</a>
<a class="sourceLine" id="cb14-3" title="3"> <span class="dt">value =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">44</span>, <span class="dv">55</span>, <span class="dv">67</span>, <span class="dv">83</span>)</a>
<a class="sourceLine" id="cb14-4" title="4">)</a>
<a class="sourceLine" id="cb14-5" title="5"></a>
<a class="sourceLine" id="cb14-6" title="6"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> fruits, <span class="dt">type =</span> <span class="st">"radialBar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> name, <span class="dt">y =</span> value))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-38a0c1c729555b9b7c66" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-38a0c1c729555b9b7c66">{"x":{"ax_opts":{"chart":{"type":"radialBar"},"series":[44,55,67,83],"labels":["Apples","Oranges","Bananas","Berries"]},"auto_update":true},"evals":[],"jsHooks":[]}</script>
2019-02-18 20:32:34 +01:00
</div>
<div id="radar-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#radar-charts" class="anchor"></a>Radar charts</h2>
<p>Simple radar charts can be created with:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb15"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb15-1" title="1">mtcars<span class="op">$</span>model &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/colnames">rownames</a></span>(mtcars)</a>
<a class="sourceLine" id="cb15-2" title="2"></a>
<a class="sourceLine" id="cb15-3" title="3"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">head</a></span>(mtcars), <span class="dt">type =</span> <span class="st">"radar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> model, <span class="dt">y =</span> qsec))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-52760a6be7e8560989b8" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-52760a6be7e8560989b8">{"x":{"ax_opts":{"chart":{"type":"radar"},"series":[{"name":"qsec","data":[{"x":"Mazda RX4","y":16.46},{"x":"Mazda RX4 Wag","y":17.02},{"x":"Datsun 710","y":18.61},{"x":"Hornet 4 Drive","y":19.44},{"x":"Hornet Sportabout","y":17.02},{"x":"Valiant","y":20.22}]}]},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With a grouping variable:</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb16-1" title="1"><span class="co"># extremely complicated reshaping</span></a>
<a class="sourceLine" id="cb16-2" title="2">new_mtcars &lt;-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/stats/topics/reshape">reshape</a></span>(</a>
<a class="sourceLine" id="cb16-3" title="3"> <span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">head</a></span>(mtcars), </a>
<a class="sourceLine" id="cb16-4" title="4"> <span class="dt">idvar =</span> <span class="st">"model"</span>, </a>
<a class="sourceLine" id="cb16-5" title="5"> <span class="dt">varying =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"drat"</span>, <span class="st">"wt"</span>)),</a>
<a class="sourceLine" id="cb16-6" title="6"> <span class="dt">times =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"drat"</span>, <span class="st">"wt"</span>),</a>
<a class="sourceLine" id="cb16-7" title="7"> <span class="dt">direction =</span> <span class="st">"long"</span>,</a>
<a class="sourceLine" id="cb16-8" title="8"> <span class="dt">v.names =</span> <span class="st">"value"</span>,</a>
<a class="sourceLine" id="cb16-9" title="9"> <span class="dt">drop =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"mpg"</span>, <span class="st">"cyl"</span>, <span class="st">"hp"</span>, <span class="st">"dist"</span>, <span class="st">"qsec"</span>, <span class="st">"vs"</span>, <span class="st">"am"</span>, <span class="st">"gear"</span>, <span class="st">"carb"</span>)</a>
<a class="sourceLine" id="cb16-10" title="10">)</a>
<a class="sourceLine" id="cb16-11" title="11"></a>
<a class="sourceLine" id="cb16-12" title="12"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> new_mtcars, <span class="dt">type =</span> <span class="st">"radar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> model, <span class="dt">y =</span> value, <span class="dt">group =</span> time))</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-166690eb6c0dd8cfa493" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-166690eb6c0dd8cfa493">{"x":{"ax_opts":{"chart":{"type":"radar"},"series":[{"name":"drat","data":[{"x":"Mazda RX4","y":3.9,"group":"drat"},{"x":"Mazda RX4 Wag","y":3.9,"group":"drat"},{"x":"Datsun 710","y":3.85,"group":"drat"},{"x":"Hornet 4 Drive","y":3.08,"group":"drat"},{"x":"Hornet Sportabout","y":3.15,"group":"drat"},{"x":"Valiant","y":2.76,"group":"drat"}]},{"name":"wt","data":[{"x":"Mazda RX4","y":2.62,"group":"wt"},{"x":"Mazda RX4 Wag","y":2.875,"group":"wt"},{"x":"Datsun 710","y":2.32,"group":"wt"},{"x":"Hornet 4 Drive","y":3.215,"group":"wt"},{"x":"Hornet Sportabout","y":3.44,"group":"wt"},{"x":"Valiant","y":3.46,"group":"wt"}]}]},"auto_update":true},"evals":[],"jsHooks":[]}</script>
2019-02-18 20:32:34 +01:00
</div>
<div id="heatmap" class="section level2">
<h2 class="hasAnchor">
<a href="#heatmap" class="anchor"></a>Heatmap</h2>
<p>Create heatmap with :</p>
2019-03-13 09:22:45 +01:00
<div class="sourceCode" id="cb17"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb17-1" title="1">txhousing2 &lt;-<span class="st"> </span>txhousing <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb17-2" title="2"><span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/stats/topics/filter">filter</a></span>(city <span class="op">%in%</span><span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">head</a></span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/unique">unique</a></span>(city)), year <span class="op">%in%</span><span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">2000</span>, <span class="dv">2001</span>)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb17-3" title="3"><span class="st"> </span><span class="kw">rename</span>(<span class="dt">val_med =</span> median)</a>
<a class="sourceLine" id="cb17-4" title="4"></a>
<a class="sourceLine" id="cb17-5" title="5"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> txhousing2,</a>
<a class="sourceLine" id="cb17-6" title="6"> <span class="dt">type =</span> <span class="st">"heatmap"</span>, </a>
<a class="sourceLine" id="cb17-7" title="7"> <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> scales<span class="op">::</span><span class="kw"><a href="https://www.rdocumentation.org/packages/scales/topics/rescale">rescale</a></span>(val_med), <span class="dt">group =</span> city)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb17-8" title="8"><span class="st"> </span><span class="kw"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb17-9" title="9"><span class="st"> </span><span class="kw"><a href="../reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#008FFB"</span>)</a></code></pre></div>
2019-05-15 11:53:53 +02:00
<div id="htmlwidget-7e41829b87480ede55ca" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-7e41829b87480ede55ca">{"x":{"ax_opts":{"chart":{"type":"heatmap"},"series":[{"name":"Abilene","data":[{"x":2000,"y":0.136270491803279,"group":"Abilene"},{"x":2000.08333333333,"y":0.00614754098360656,"group":"Abilene"},{"x":2000.16666666667,"y":0,"group":"Abilene"},{"x":2000.25,"y":0.107581967213115,"group":"Abilene"},{"x":2000.33333333333,"y":0.0942622950819672,"group":"Abilene"},{"x":2000.41666666667,"y":0.0901639344262295,"group":"Abilene"},{"x":2000.5,"y":0.157786885245902,"group":"Abilene"},{"x":2000.58333333333,"y":0.173155737704918,"group":"Abilene"},{"x":2000.66666666667,"y":0.0655737704918033,"group":"Abilene"},{"x":2000.75,"y":0.0122950819672131,"group":"Abilene"},{"x":2000.83333333333,"y":0.131147540983607,"group":"Abilene"},{"x":2000.91666666667,"y":0.0706967213114754,"group":"Abilene"},{"x":2001,"y":0.0655737704918033,"group":"Abilene"},{"x":2001.08333333333,"y":0.110655737704918,"group":"Abilene"},{"x":2001.16666666667,"y":0.145491803278689,"group":"Abilene"},{"x":2001.25,"y":0.137295081967213,"group":"Abilene"},{"x":2001.33333333333,"y":0.132172131147541,"group":"Abilene"},{"x":2001.41666666667,"y":0.204918032786885,"group":"Abilene"},{"x":2001.5,"y":0.293032786885246,"group":"Abilene"},{"x":2001.58333333333,"y":0.111680327868852,"group":"Abilene"},{"x":2001.66666666667,"y":0.0625,"group":"Abilene"},{"x":2001.75,"y":0.0665983606557377,"group":"Abilene"},{"x":2001.83333333333,"y":0.112704918032787,"group":"Abilene"},{"x":2001.91666666667,"y":0.140368852459016,"group":"Abilene"}]},{"name":"Amarillo","data":[{"x":2000,"y":0.224385245901639,"group":"Amarillo"},{"x":2000.08333333333,"y":0.206967213114754,"group":"Amarillo"},{"x":2000.16666666667,"y":0.171106557377049,"group":"Amarillo"},{"x":2000.25,"y":0.30327868852459,"group":"Amarillo"},{"x":2000.33333333333,"y":0.235655737704918,"group":"Amarillo"},{"x":2000.41666666667,"y":0.266393442622951,"group":"Amarillo"},{"x":2000.5,"y":0.370901639344262,"group":"Amarillo"},{"x":2000.58333333333,"y":0.381147540983607,"group":"Amarillo"},{"x":2000.66666666667,"y":0.337090163934426,"group":"Amarillo"},{"x":2000.75,"y":0.316598360655738,"group":"Amarillo"},{"x":2000.83333333333,"y":0.299180327868852,"group":"Amarillo"},{"x":2000.91666666667,"y":0.309426229508197,"group":"Amarillo"},{"x":2001,"y":0.316598360655738,"group":"Amarillo"},{"x":2001.08333333333,"y":0.297131147540984,"group":"Amarillo"},{"x":2001.16666666667,"y":0.288934426229508,"group":"Amarillo"},{"x":2001.25,"y":0.359631147540984,"group":"Amarillo"},{"x":2001.33333333333,"y":0.309426229508197,"group":"Amarillo"},{"x":2001.41666666667,"y":0.339139344262295,"group":"Amarillo"},{"x":2001.5,"y":0.399590163934426,"group":"Amarillo"},{"x":2001.58333333333,"y":0.366803278688525,"group":"Amarillo"},{"x":2001.66666666667,"y":0.302254098360656,"group":"Amarillo"},{"x":2001.75,"y":0.310450819672131,"group":"Amarillo"},{"x":2001.83333333333,"y":0.326844262295082,"group":"Amarillo"},{"x":2001.91666666667,"y":0.388319672131148,"group":"Amarillo"}]},{"name":"Arlington","data":[{"x":2000,"y":0.367827868852459,"group":"Arlington"},{"x":2000.08333333333,"y":0.370901639344262,"group":"Arlington"},{"x":2000.16666666667,"y":0.415983606557377,"group":"Arlington"},{"x":2000.25,"y":0.41905737704918,"group":"Arlington"},{"x":2000.33333333333,"y":0.460040983606557,"group":"Arlington"},{"x":2000.41666666667,"y":0.510245901639344,"group":"Arlington"},{"x":2000.5,"y":0.488729508196721,"group":"Arlington"},{"x":2000.58333333333,"y":0.464139344262295,"group":"Arlington"},{"x":2000.66666666667,"y":0.536885245901639,"group":"Arlington"},{"x":2000.75,"y":0.471311475409836,"group":"Arlington"},{"x":2000.83333333333,"y":0.508196721311475,"group":"Arlington"},{"x":2000.91666666667,"y":0.487704918032787,"group":"Arlington"},{"x":2001,"y":0.487704918032787,"group":"Arlington"},{"x":2001.08333333333,"y":0.494877049180328,"group":"Arlington"},{"x":2001.16666666667,"y":0.528688524590164,"group":"Arlington"},{"x":2001.25,"y":0.548155737704918,"group":"Arlington"},{"x":2001.33333333333,"y":0.576844
2019-02-18 20:32:34 +01:00
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
<div id="tocnav">
<h2 class="hasAnchor">
<a href="#tocnav" class="anchor"></a>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#bar-charts">Bar charts</a></li>
<li><a href="#line-charts">Line charts</a></li>
<li><a href="#scatter-charts">Scatter charts</a></li>
<li><a href="#pie-charts">Pie charts</a></li>
<li><a href="#radial-charts">Radial charts</a></li>
<li><a href="#radar-charts">Radar charts</a></li>
<li><a href="#heatmap">Heatmap</a></li>
</ul>
</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.3.0.</p>
</div>
</footer>
</div>
</body>
</html>