From 0431ecf434268061e1c59cb0c0658688f03c8d67 Mon Sep 17 00:00:00 2001 From: Mokaddem Date: Fri, 12 Aug 2016 10:22:24 +0200 Subject: [PATCH] Modified webpage display and added js. --- var/www/static/js/sentiment_trending.js | 140 ++++++++++++++++++ .../sentiment_analysis_trending.html | 56 ++++--- 2 files changed, 173 insertions(+), 23 deletions(-) create mode 100644 var/www/static/js/sentiment_trending.js diff --git a/var/www/static/js/sentiment_trending.js b/var/www/static/js/sentiment_trending.js new file mode 100644 index 00000000..53f7da5a --- /dev/null +++ b/var/www/static/js/sentiment_trending.js @@ -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(); + diff --git a/var/www/templates/sentiment_analysis_trending.html b/var/www/templates/sentiment_analysis_trending.html index 245af336..7cc730ef 100644 --- a/var/www/templates/sentiment_analysis_trending.html +++ b/var/www/templates/sentiment_analysis_trending.html @@ -13,8 +13,9 @@ - + +