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

Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
 +
.big-chart {
 +
  width:100%;
 +
  height:220px;
 +
}
 +
.line-chart {
 +
  width:100%;
 +
  height:100px;
 +
}
 +
.donut {width:100%;height:150px;min-width:150px;}
 +
 +
.donut-label {
 +
  position:absolute;
 +
  left:45%;
 +
  font-size:22pt;
 +
  color:#ddd;
 +
  width:100%;
 +
  top:38%;
 +
}
 
   .myintro {
 
   .myintro {
 
       display: table;
 
       display: table;
Line 104: Line 122:
 
             <div class="col-lg-8 col-lg-offset-2">
 
             <div class="col-lg-8 col-lg-offset-2">
 
                 <h2>Modeling.</h2>
 
                 <h2>Modeling.</h2>
−
                 <p>Under construction...
+
                 <p>Under construction...</p>
−
                <canvas id="lineChart"></canvas></p>
+
<h2 class="text-center">Examples using Flot</h2>
−
 
+
<div class="container">
 +
  <div class="col-xs-6 col-xs-offset-3">
 +
    <h4 class="text-center">Real-time</h4>
 +
    <div id="chart1" class="big-chart"></div>
 +
  </div>
 +
</div>
 +
<hr>
 +
<div class="container">
 +
  <h4 class="text-center">Line charts</h4>
 +
  <div class="col-xs-2 col-xs-offset-3">
 +
    <div id="chart2" class="line-chart"></div>
 +
  </div>
 +
  <div class="col-xs-2">
 +
    <div id="chart3" class="line-chart"></div>
 +
  </div>
 +
  <div class="col-xs-2">
 +
    <div id="chart4" class="line-chart"></div>
 +
  </div>
 +
</div>
 +
<hr>
 +
<div class="container">
 +
  <h4 class="text-center">Donut charts</h4>
 +
  <div class="col-xs-3 col-xs-offset-3">
 +
    <div id="chart5" class="donut"></div>
 +
    <div class="donut-label">24</div>
 +
  </div>
 +
  <div class="col-xs-3">
 +
    <div id="chart6" class="donut"></div>
 +
    <div class="donut-label">75</div>
 +
  </div>
 +
</div>
 +
<hr>
  
 
             </div>
 
             </div>

Revision as of 12:56, 22 August 2017

Modeling

V

Modeling.

Under construction...

Examples using Flot

Real-time

Line charts

Donut charts

24
75