|
|
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 122: |
Line 104: |
| <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> | + | <p>Under construction... |
− | <h2 class="text-center">Examples using Flot</h2> | + | <canvas id="lineChart"></canvas></p> |
− | <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:57, 22 August 2017
Modeling.
Under construction...