|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <style> | | <style> |
| − | .grafico.bar-chart {
| |
| − | background: #3468AF;
| |
| − | padding: 0 1rem 2rem 1rem;
| |
| − | width: 100%;
| |
| − | height: 60%;
| |
| − | position: relative;
| |
| − | color: #fff;
| |
| − | font-size: 80%;
| |
| − | }
| |
| − | .bar-chart [class^='eje-'] {
| |
| − | padding: 0 1rem 0 2rem;
| |
| − | bottom: 1rem;
| |
| − | }
| |
| − | .bar-chart .eje-x {
| |
| − | bottom: 0;
| |
| − | }
| |
| − | .bar-chart .eje-y li {
| |
| − | height: 20%;
| |
| − | border-top: 1px solid #fff;
| |
| − | }
| |
| − | .bar-chart .eje-x li {
| |
| − | width: 14%;
| |
| − | position: relative;
| |
| − | text-align: left;
| |
| − | }
| |
| − | .bar-chart .eje-x li i {
| |
| − | transform: rotatez(-45deg) translatex(-1rem);
| |
| − | transform-origin: 30% 60%;
| |
| − | display: block;
| |
| − | }
| |
| − | .bar-chart .eje-x li:before {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | bottom: 1.9rem;
| |
| − | width: 70%;
| |
| − | right: 5%;
| |
| − | box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(1):before {
| |
| − | background: #E64C65;
| |
| − | height: 570%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(2):before {
| |
| − | background: #11A8AB;
| |
| − | height: 900%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(3):before {
| |
| − | background: #FCB150;
| |
| − | height: 400%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(4):before {
| |
| − | background: #4FC4F6;
| |
| − | height: 290%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(5):before {
| |
| − | background: #FFED0D;
| |
| − | height: 720%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(6):before {
| |
| − | background: #F46FDA;
| |
| − | height: 820%;
| |
| − | }
| |
| − | .bar-chart .eje-x li:nth-child(7):before {
| |
| − | background: #15BFCC;
| |
| − | height: 520%;
| |
| − | }
| |
| | .myintro { | | .myintro { |
| | display: table; | | display: table; |
| Line 171: |
Line 105: |
| | <h2>Modeling.</h2> | | <h2>Modeling.</h2> |
| | <p>Under construction... | | <p>Under construction... |
| − | </p>
| + | <canvas id="lineChart"></canvas></p> |
| − | <!-- https://codepen.io/jlalovi/details/bIyAr -->
| + | |
| − | <div class="container">
| + | |
| − | <!-- DONUT CHART BLOCK (LEFT-CONTAINER) -->
| + | |
| − | <div class="donut-chart-block block">
| + | |
| − | <h2 class="titular">OS AUDIENCE STATS</h2>
| + | |
| − | <div class="donut-chart">
| + | |
| − | <!-- PORCIONES GRAFICO CIRCULAR
| + | |
| − | ELIMINADO #donut-chart
| + | |
| − | MODIFICADO CSS de .donut-chart -->
| + | |
| − | <div id="porcion1" class="recorte"><div class="quesito ios" data-rel="21"></div></div>
| + | |
| − | <div id="porcion2" class="recorte"><div class="quesito mac" data-rel="39"></div></div>
| + | |
| − | <div id="porcion3" class="recorte"><div class="quesito win" data-rel="31"></div></div>
| + | |
| − | <div id="porcionFin" class="recorte"><div class="quesito linux" data-rel="9"></div></div>
| + | |
| − | <!-- FIN AÑADIDO GRÄFICO -->
| + | |
| − | <p class="center-date">JUNE<br><span class="scnd-font-color">2013</span></p>
| + | |
| − | </div>
| + | |
| − | <ul class="os-percentages horizontal-list">
| + | |
| − | <li>
| + | |
| − | <p class="ios os scnd-font-color">iOS</p>
| + | |
| − | <p class="os-percentage">21<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <p class="mac os scnd-font-color">Mac</p>
| + | |
| − | <p class="os-percentage">39<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <p class="linux os scnd-font-color">Linux</p>
| + | |
| − | <p class="os-percentage">9<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <p class="win os scnd-font-color">Win</p>
| + | |
| − | <p class="os-percentage">31<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <!-- LINE CHART BLOCK (LEFT-CONTAINER) -->
| + | |
| − | <div class="line-chart-block block">
| + | |
| − | <div class="line-chart">
| + | |
| − | <div class='grafico'>
| + | |
| − | <ul class='eje-y'>
| + | |
| − | <li data-ejeY='30'></li>
| + | |
| − | <li data-ejeY='20'></li>
| + | |
| − | <li data-ejeY='10'></li>
| + | |
| − | <li data-ejeY='0'></li>
| + | |
| − | </ul>
| + | |
| − | <ul class='eje-x'>
| + | |
| − | <li>Apr</li>
| + | |
| − | <li>May</li>
| + | |
| − | <li>Jun</li>
| + | |
| − | </ul>
| + | |
| − | <span data-valor='25'>
| + | |
| − | <span data-valor='8'>
| + | |
| − | <span data-valor='13'>
| + | |
| − | <span data-valor='5'>
| + | |
| − | <span data-valor='23'>
| + | |
| − | <span data-valor='12'>
| + | |
| − | <span data-valor='15'>
| + | |
| − | </span></span></span></span></span></span></span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | <ul class="time-lenght horizontal-list">
| + | |
| − | <li><a class="time-lenght-btn" href="#14">Week</a></li>
| + | |
| − | <li><a class="time-lenght-btn" href="#15">Month</a></li>
| + | |
| − | <li><a class="time-lenght-btn" href="#16">Year</a></li>
| + | |
| − | </ul>
| + | |
| − | <ul class="month-data clear">
| + | |
| − | <li>
| + | |
| − | <p>APR<span class="scnd-font-color"> 2013</span></p>
| + | |
| − | <p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <p>MAY<span class="scnd-font-color"> 2013</span></p>
| + | |
| − | <p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <p>JUN<span class="scnd-font-color"> 2013</span></p>
| + | |
| − | <p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | <div class="bar-chart-block block">
| + | |
| − | <h2 class='titular'>By Country <span>*1000</span></h2>
| + | |
| − | <div class='grafico bar-chart'>
| + | |
| − | <ul class='eje-y'>
| + | |
| − | <li data-ejeY='60'></li>
| + | |
| − | <li data-ejeY='45'></li>
| + | |
| − | <li data-ejeY='30'></li>
| + | |
| − | <li data-ejeY='15'></li>
| + | |
| − | <li data-ejeY='0'></li>
| + | |
| − | </ul>
| + | |
| − | <ul class='eje-x'>
| + | |
| − | <li data-ejeX='37'><i>España</i></li>
| + | |
| − | <li data-ejeX='56'><i>Portugal</i></li>
| + | |
| − | <li data-ejeX='25'><i>Italia</i></li>
| + | |
| − | <li data-ejeX='18'><i>Grecia</i></li>
| + | |
| − | <li data-ejeX='45'><i>EE.UU</i></li>
| + | |
| − | <li data-ejeX='50'><i>México</i></li>
| + | |
| − | <li data-ejeX='33'><i>Chile</i></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | <p class='nota-final'>Este pen es sólo para que <strong>@jlalovi</strong> complemente con los gráficos <a href='https://codepen.io/jlalovi/details/bIyAr'>el suyo</a>.</p>
| |
| | | | |
| | </div> | | </div> |
