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> |
− | + | <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.
Under construction...
Examples using Flot
Real-time
Line charts
Donut charts
24
75