<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4="crossorigin="anonymous"></script><!-- Font --><linkhref="../css/montserrat.css"rel="stylesheet">
<scriptsrc="../bootstrap-toc.js"></script><!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="crossorigin="anonymous">
<!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css"integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78="crossorigin="anonymous">
date <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/Sys.time.html">Sys.Date</a></span><spanclass="op">(</span><spanclass="op">)</span><spanclass="op">+</span><spanclass="fl">1</span><spanclass="op">:</span><spanclass="fl">20</span>,
data <spanclass="op">=</span><spanclass="va">spark_data</span>,
title <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/mean.html">mean</a></span><spanclass="op">(</span><spanclass="va">spark_data</span><spanclass="op">$</span><spanclass="va">var1</span><spanclass="op">)</span>,
<scripttype="application/json"data-for="htmlwidget-e20912f1f888061590c4">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[[1618876800000,64],[1618963200000,57],[1619049600000,48],[1619136000000,49],[1619222400000,52],[1619308800000,50],[1619395200000,63],[1619481600000,64],[1619568000000,59],[1619654400000,47],[1619740800000,37],[1619827200000,50],[1619913600000,53],[1620000000000,47],[1620086400000,59],[1620172800000,62],[1620259200000,54],[1620345600000,57],[1620432000000,54],[1620518400000,51]]}],"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":53.85,"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":"2021-04-20","max":"2021-05-09"},"type":"area"},"evals":[],"jsHooks":[]}</script><p>With more styles :</p>
data <spanclass="op">=</span><spanclass="va">spark_data</span>,
title <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/mean.html">mean</a></span><spanclass="op">(</span><spanclass="va">spark_data</span><spanclass="op">$</span><spanclass="va">var1</span><spanclass="op">)</span>,
<scripttype="application/json"data-for="htmlwidget-ea85db986f3bc3e4a657">{"x":{"ax_opts":{"chart":{"type":"area","sparkline":{"enabled":true}},"series":[{"name":"var1","type":"area","data":[[1618876800000,64],[1618963200000,57],[1619049600000,48],[1619136000000,49],[1619222400000,52],[1619308800000,50],[1619395200000,63],[1619481600000,64],[1619568000000,59],[1619654400000,47],[1619740800000,37],[1619827200000,50],[1619913600000,53],[1620000000000,47],[1620086400000,59],[1620172800000,62],[1620259200000,54],[1620345600000,57],[1620432000000,54],[1620518400000,51]]}],"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":53.85,"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":"2021-04-20","max":"2021-05-09"},"type":"area"},"evals":[],"jsHooks":[]}</script><p>You can also use spark boxes in Shiny application, use code to launch an example :</p>
<p>Developed by <ahref="https://twitter.com/_pvictorr"><imgsrc="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <ahref="https://twitter.com/_mfaan"><imgsrc="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
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} ;