Modified webpage display and added js.

This commit is contained in:
Mokaddem 2016-08-12 10:22:24 +02:00
parent 9c3b573af2
commit 0431ecf434
2 changed files with 173 additions and 23 deletions

View file

@ -0,0 +1,140 @@
/* ---------------- Gauge ---------------- */
var gaugeOptions = {
animateEasing: true,
elementWidth: 200,
elementHeight: 125,
arcFillStart: 10,
arcFillEnd: 12,
arcFillTotal: 20,
incTot: 1.0,
arcBgColorLight: 200,
arcBgColorSat: 0,
arcStrokeFg: 20,
arcStrokeBg: 30,
colorArcFg: '#FF3300',
animateSpeed: 1,
};
// Clone object
var gaugeOptions2 = jQuery.extend(true, {}, gaugeOptions);
var gaugeOptions3 = jQuery.extend(true, {}, gaugeOptions);
gaugeOptions.appendTo = '#gauge_today_last_hour';
gaugeOptions.dialLabel = 'Last hour';
gaugeOptions.elementId = 'gauge1';
gaugeOptions.inc = -0.7;
var gauge_today_last_hour = new FlexGauge(gaugeOptions);
gaugeOptions2.appendTo = '#gauge_today_last_days';
gaugeOptions2.dialLabel = 'Today';
gaugeOptions2.elementId = 'gauge2';
gaugeOptions2.inc = 0.4;
var gauge_today_last_days = new FlexGauge(gaugeOptions2);
gaugeOptions3.appendTo = '#gauge_week';
gaugeOptions3.dialLabel = 'Week';
gaugeOptions3.elementId = 'gauge3';
gaugeOptions3.inc = -0.3;
var gauge_today_last_days = new FlexGauge(gaugeOptions3);
/* ---------- Sparkline Charts ---------- */
//generate random number for charts
randNum = function(){
var num = Math.random();
if(num > 0.5)
num = -1+num;
console.log(Math.floor(num*101));
return Math.floor(num*101);
//return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
}
var sparklineOptions = {
width: 250,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
height: 80,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
type: 'bar',
barSpacing: 0,
barWidth: 10,
barColor: '#00bf5f',
negBarColor: '#f22929',
zeroColor: '#ffff00'
};
//sparklines (making loop with random data for all 10 sparkline)
i=1;
for (i=1; i<10; i++) {
var data = [3+randNum(), 5+randNum(), 8+randNum(), 11+randNum(),14+randNum(),17+randNum(),20+randNum(),15+randNum(),18+randNum(),22+randNum()];
placeholder = '.sparkLineStatsToday' + i;
$(placeholder).sparkline(data, sparklineOptions);
}
//sparklines (making loop with random data for all 10 sparkline)
i=1;
for (i=1; i<10; i++) {
var data = [3+randNum(), 5+randNum(), 8+randNum(), 11+randNum(),14+randNum(),17+randNum(),20+randNum(),15+randNum(),18+randNum(),22+randNum()];
placeholder = '.sparkLineStatsWeek' + i;
$(placeholder).sparkline(data, sparklineOptions);
}
/* ----------- CanvasJS ------------ */
var options_canvasJS = {
animationEnabled: true,
axisY: {
tickThickness: 0,
lineThickness: 0,
valueFormatString: " ",
gridThickness: 0
},
axisX: {
tickThickness: 0,
lineThickness: 0,
labelFontSize: 0.1,
},
data: [
{
type: "bar",
color: "green",
dataPoints: [
{y: 25}
]
},
{
type: "bar",
color: "red",
dataPoints: [
{y: -13}
]
}
]
};
var chart_canvas1 = new CanvasJS.Chart("bar_today_last_hour", options_canvasJS);
var chart_canvas2 = new CanvasJS.Chart("bar_today_last_days", options_canvasJS);
chart_canvas1.render();
chart_canvas2.render();

View file

@ -13,8 +13,9 @@
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
<script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.sparkline.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/FlexGauge.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.sparkline.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.canvasjs.min.js') }}"></script>
<style>
strong {
@ -34,7 +35,6 @@
.sparkLineStats ul li {
margin-bottom: 8px;
line-height: 90px;
padding-top: 3px;
font-size: 12px;
}
@ -45,6 +45,11 @@
.sparkLineStats ul li div:first-child {
margin-right: 5px;
}
.wellInside {
background-color: #dedede;
padding: 12px;
}
.fg-dial-label {
font-size: 100%;
@ -102,25 +107,25 @@
</div>
<div class="panel-body">
<!-- left column -->
<div class="col-lg-9">
<div class="col-lg-9 well">
<!-- providers charts -->
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
<li><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
<li><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="provider-today3">Graph 3</strong></li>
<li><div class="sparkLineStatsToday4"></div><div id="line_today_graph4"></div><strong id="provider-today4">Graph 4</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday1"></div><div id="line_today_graph1"></div><strong id="providerToday1">Graph 1</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday2"></div><div id="line_today_graph2"></div><strong id="providerToday2">Graph 2</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday3"></div><div id="line_today_graph3"></div><strong id="providerToday3">Graph 3</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday4"></div><div id="line_today_graph4"></div><strong id="providerToday4">Graph 4</strong></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
<li><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
<li><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="provider-today7">Graph 7</strong></li>
<li><div class="sparkLineStatsToday9"></div><div id="line_today_graph8"></div><strong id="provider-today8">Graph 8</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday6"></div><div id="line_today_graph5"></div><strong id="providerToday5">Graph 5</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday7"></div><div id="line_today_graph6"></div><strong id="providerToday6">Graph 6</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday8"></div><div id="line_today_graph7"></div><strong id="providerToday7">Graph 7</strong></li>
<li class="well wellInside"><div class="sparkLineStatsToday9"></div><div id="line_today_graph8"></div><strong id="providerToday8">Graph 8</strong></li>
</ul>
</div>
</div>
@ -128,12 +133,16 @@
<!-- right column -->
<div class="col-lg-3">
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<div id="gauge_today_last_hour"></div>
<div id="bar_today_last_hour"></div>
<strong>Compound by mood</strong>
<div id="bar_today_last_hour" style="height: 70px; width: 100%;"></div>
</div>
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<div id="gauge_today_last_days"></div>
<div id="bar_today_last_hour"></div>
<strong>Compound by mood</strong>
<div id="bar_today_last_days" style="height: 70px; width: 100%;"></div>
</div>
</div>
<!-- /.row -->
@ -158,25 +167,25 @@
</div>
<div class="panel-body">
<!-- left column -->
<div class="col-lg-9">
<div class="col-lg-9 well">
<!-- providers charts -->
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="provider-today1">Graph 1</strong></li>
<li><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="provider-today2">Graph 2</strong></li>
<li><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="provider-today3">Graph 3</strong></li>
<li><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="provider-today4">Graph 4</strong></li>
</ul>
<li class="well wellInside"><div class="sparkLineStatsWeek1"></div><div id="line_week_graph1"></div><strong id="providerWeek1">Graph 1</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek2"></div><div id="line_week_graph2"></div><strong id="providerWeek2">Graph 2</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek3"></div><div id="line_week_graph3"></div><strong id="providerWeek3">Graph 3</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek4"></div><div id="line_week_graph4"></div><strong id="providerWeek4">Graph 4</strong></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="sparkLineStats">
<ul>
<li><div class="sparkLineStatsWeek6"></div><div id="line_week_graph5"></div><strong id="provider-today5">Graph 5</strong></li>
<li><div class="sparkLineStatsWeek7"></div><div id="line_week_graph6"></div><strong id="provider-today6">Graph 6</strong></li>
<li><div class="sparkLineStatsWeek8"></div><div id="line_week_graph7"></div><strong id="provider-today7">Graph 7</strong></li>
<li><div class="sparkLineStatsWeek9"></div><div id="line_week_graph8"></div><strong id="provider-today8">Graph 8</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek5"></div><div id="line_week_graph5"></div><strong id="providerWeek5">Graph 5</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek6"></div><div id="line_week_graph6"></div><strong id="providerWeek6">Graph 6</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek7"></div><div id="line_week_graph7"></div><strong id="providerWeek7">Graph 7</strong></li>
<li class="well wellInside"><div class="sparkLineStatsWeek8"></div><div id="line_week_graph8"></div><strong id="providerWeek8">Graph 8</strong></li>
</ul>
</div>
</div>
@ -184,6 +193,7 @@
<!-- right column -->
<div class="col-lg-3">
<div class="well text-center" style="padding: 0px;">
<strong>Mood value</strong>
<div id="gauge_week"></div>
</div>
<div class="well text-center" style="padding: 0px;">