|
|
@@ -46,26 +46,17 @@
|
|
|
</div>
|
|
|
<div class="col-sm-6">
|
|
|
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
|
|
|
- <label class="btn btn-sm btn-primary btn-simple active" id="0">
|
|
|
+ <label class="btn btn-sm btn-primary btn-simple active" id="0" onclick="graphtoggle('mochart')">
|
|
|
<input type="radio" name="options" checked>
|
|
|
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Höhenmeter</span>
|
|
|
- <span class="d-block d-sm-none">
|
|
|
- <i class="tim-icons icon-single-02"></i>
|
|
|
- </span>
|
|
|
</label>
|
|
|
- <label class="btn btn-sm btn-primary btn-simple" id="1">
|
|
|
+ <label class="btn btn-sm btn-primary btn-simple" id="1" onclick="graphtoggle('distchart')">
|
|
|
<input type="radio" class="d-none d-sm-none" name="options">
|
|
|
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Entfernung</span>
|
|
|
- <span class="d-block d-sm-none">
|
|
|
- <i class="tim-icons icon-gift-2"></i>
|
|
|
- </span>
|
|
|
</label>
|
|
|
- <label class="btn btn-sm btn-primary btn-simple" id="2">
|
|
|
+ <label class="btn btn-sm btn-primary btn-simple" id="2" onclick="graphtoggle('timechart')">
|
|
|
<input type="radio" class="d-none" name="options">
|
|
|
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Zeit</span>
|
|
|
- <span class="d-block d-sm-none">
|
|
|
- <i class="tim-icons icon-tap-02"></i>
|
|
|
- </span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,13 +64,9 @@
|
|
|
</div>
|
|
|
<div class="card-body" style="height:450px;">
|
|
|
<div class="chart-area">
|
|
|
- <div id="mochart"></div>
|
|
|
- </div>
|
|
|
- <div class="chart-area">
|
|
|
- <div id="mochart"></div>
|
|
|
- </div>
|
|
|
- <div class="chart-area">
|
|
|
- <div id="mochart"></div>
|
|
|
+ <div id="mochart" style="visibility:visible"></div>
|
|
|
+ <div id="distchart" style="visibility:visible"></div>
|
|
|
+ <div id="timechart" style="visibility:visible"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -103,280 +90,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="card-body ">
|
|
|
- <div class="table-full-width table-responsive">
|
|
|
- <table class="table">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">Update the Documentation</p>
|
|
|
- <p class="text-muted">Dwuamish Head, Seattle, WA 8:47 AM</p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="" checked="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">GDPR Compliance</p>
|
|
|
- <p class="text-muted">The GDPR is a regulation that requires businesses to
|
|
|
- protect the personal data and privacy of Europe citizens for
|
|
|
- transactions that occur within EU member states.</p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">Solve the issues</p>
|
|
|
- <p class="text-muted">Fifty percent of all respondents said they would be
|
|
|
- more likely to shop at a company </p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">Release v2.0.0</p>
|
|
|
- <p class="text-muted">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">Export the processed files</p>
|
|
|
- <p class="text-muted">The report also shows that consumers will not easily
|
|
|
- forgive a company once a breach exposing their personal data
|
|
|
- occurs. </p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <div class="form-check">
|
|
|
- <label class="form-check-label">
|
|
|
- <input class="form-check-input" type="checkbox" value="">
|
|
|
- <span class="form-check-sign">
|
|
|
- <span class="check"></span>
|
|
|
- </span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <p class="title">Arival at export process</p>
|
|
|
- <p class="text-muted">Capitol Hill, Seattle, WA 12:34 AM</p>
|
|
|
- </td>
|
|
|
- <td class="td-actions text-right">
|
|
|
- <button type="button" rel="tooltip" title="" class="btn btn-link"
|
|
|
- data-original-title="Edit Task">
|
|
|
- <i class="tim-icons icon-pencil"></i>
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col-lg-6 col-md-12">
|
|
|
- <div class="card ">
|
|
|
- <div class="card-header">
|
|
|
- <h4 class="card-title"> Simple Table</h4>
|
|
|
- </div>
|
|
|
- <div class="card-body">
|
|
|
- <div class="table-responsive">
|
|
|
- <table class="table tablesorter " id="">
|
|
|
- <thead class=" text-primary">
|
|
|
- <tr>
|
|
|
- <th>
|
|
|
- Name
|
|
|
- </th>
|
|
|
- <th>
|
|
|
- Country
|
|
|
- </th>
|
|
|
- <th>
|
|
|
- City
|
|
|
- </th>
|
|
|
- <th class="text-center">
|
|
|
- Salary
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Dakota Rice
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Niger
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Oud-Turnhout
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $36,738
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Minerva Hooper
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Curaçao
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Sinaai-Waas
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $23,789
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Sage Rodriguez
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Netherlands
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Baileux
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $56,142
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Philip Chaney
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Korea, South
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Overland Park
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $38,735
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Doris Greene
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Malawi
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Feldkirchen in Kärnten
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $63,542
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Mason Porter
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Chile
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Gloucester
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $78,615
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- Jon Porter
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Portugal
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- Gloucester
|
|
|
- </td>
|
|
|
- <td class="text-center">
|
|
|
- $98,615
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -399,11 +113,21 @@
|
|
|
$(document).ready(function () {
|
|
|
var graphs = {{mosum|safe}};
|
|
|
Plotly.plot('mochart',graphs,{});
|
|
|
- // var distgraphs = {{distsum|safe}};
|
|
|
- // Plotly.plot('distchart',distgraphs,{});
|
|
|
- // var timegraphs = {{timesum|safe}};
|
|
|
- // Plotly.plot('timechart',timegraphs,{});
|
|
|
+
|
|
|
+ var distgraphs = {{distsum|safe}};
|
|
|
+ Plotly.plot('distchart',distgraphs,{});
|
|
|
+
|
|
|
+ var timegraphs = {{timesum|safe}};
|
|
|
+ Plotly.plot('timechart',timegraphs,{});
|
|
|
});
|
|
|
+
|
|
|
+ function graphtoggle( graph ) {
|
|
|
+ $('#mochart').hide();
|
|
|
+ $('#distchart').hide();
|
|
|
+ $('#timechart').hide();
|
|
|
+ // console.log('#'+graph);
|
|
|
+ $('#' + graph).show();
|
|
|
+ }
|
|
|
</script>
|
|
|
<!-- Apex Chart -->
|
|
|
<!-- <script src="{{ url_for('static', filename='assets/js/plugins/apexcharts.min.js') }}"></script> -->
|