Difference between revisions of "Team:BOKU-Vienna/Model"

(Undo revision 95675 by Gotsmy (talk))
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 105: Line 171:
 
                 <h2>Modeling.</h2>
 
                 <h2>Modeling.</h2>
 
                 <p>Under construction...
 
                 <p>Under construction...
−
                <canvas id="lineChart"></canvas></p>
+
              </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>

Revision as of 13:03, 22 August 2017

Modeling

V

Modeling.

Under construction...

OS AUDIENCE STATS

JUNE
2013

  • iOS

    21%

  • Mac

    39%

  • Linux

    9%

  • Win

    31%

  • Apr
  • May
  • Jun

  • APR 2013

    21%

  • MAY 2013

    48%

  • JUN 2013

    35%

By Country *1000

  • España
  • Portugal
  • Italia
  • Grecia
  • EE.UU
  • México
  • Chile

Este pen es sólo para que @jlalovi complemente con los gráficos el suyo.