mirror of
https://gitlab.silvrtree.co.uk/martind2000/censis-archive.git
synced 2025-01-26 20:16:18 +00:00
”2016-08-24”
This commit is contained in:
Martin Donnelly
parent
a5ff1dff52
commit
cbe4f1adc4
139
mdot/mdot_server/mdot_server/app/graph.html
Normal file
139
mdot/mdot_server/mdot_server/app/graph.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>JS Bin</title>
|
||||
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
|
||||
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
|
||||
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
|
||||
<link rel="stylesheet"
|
||||
href="https://www.amcharts.com/lib/3/plugins/export/export.css"
|
||||
type="text/css" media="all"/>
|
||||
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
|
||||
<script src="js/staticdata.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chartdiv" style="width: 100%; height: 700px;"></div>
|
||||
<script>
|
||||
var chart = new AmCharts.AmStockChart();
|
||||
chart.pathToImages = "lib/images/";
|
||||
|
||||
chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
|
||||
|
||||
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
|
||||
categoryAxesSettings.minPeriod = '5mm';
|
||||
categoryAxesSettings.parseDates = true;
|
||||
categoryAxesSettings.axisColor = 'rgba(255,255,255,0.8)';
|
||||
categoryAxesSettings.minorGridEnabled = true;
|
||||
categoryAxesSettings.gridColor = '#556374';
|
||||
categoryAxesSettings.maxSeries = 0;
|
||||
|
||||
chart.categoryAxesSettings = categoryAxesSettings;
|
||||
|
||||
var dataSetLux = new AmCharts.DataSet();
|
||||
dataSetLux.title = "Lux";
|
||||
dataSetLux.fieldMappings = [
|
||||
{
|
||||
fromField: "lux", toField: "value"
|
||||
}, {
|
||||
fromField: "co2", toField: "co2"
|
||||
}, {
|
||||
fromField: "humid", toField: "humid"
|
||||
}, {
|
||||
fromField: "temp", toField: "temp"
|
||||
}
|
||||
];
|
||||
dataSetLux.dataProvider = chartData;
|
||||
dataSetLux.categoryField = "date";
|
||||
|
||||
/*
|
||||
{
|
||||
"date": "2016-08-10T11:27:21.000Z",
|
||||
"co2": 599,
|
||||
"humid": 42.7,
|
||||
"lux": 23,
|
||||
"noise": 1664,
|
||||
"temp": 21.7,
|
||||
"occupancy": 0
|
||||
},
|
||||
*/
|
||||
|
||||
|
||||
|
||||
// set data sets to the chart
|
||||
chart.dataSets = [dataSetLux];
|
||||
|
||||
var stockPanel1 = new AmCharts.StockPanel();
|
||||
stockPanel1.showCategoryAxis = false;
|
||||
stockPanel1.title = "Sensor Readings";
|
||||
stockPanel1.percentHeight = 60;
|
||||
|
||||
// LUX
|
||||
|
||||
var valueAxisLux = new AmCharts.ValueAxis();
|
||||
stockPanel1.addValueAxis(valueAxisLux);
|
||||
|
||||
var valueAxis2 = new AmCharts.ValueAxis();
|
||||
valueAxis2.position = "right";
|
||||
stockPanel1.addValueAxis(valueAxis2);
|
||||
|
||||
var valueAxis3 = new AmCharts.ValueAxis();
|
||||
valueAxis3.offset = '-50';
|
||||
stockPanel1.addValueAxis(valueAxis3);
|
||||
|
||||
var valueAxis4 = new AmCharts.ValueAxis();
|
||||
valueAxis4.position = "right";
|
||||
stockPanel1.addValueAxis(valueAxis4);
|
||||
|
||||
var graphLux = new AmCharts.StockGraph();
|
||||
graphLux.title = "Light";
|
||||
graphLux.valueField = "value";
|
||||
graphLux.lineThickness = 1;
|
||||
graphLux.lineColor = "#00cc00";
|
||||
graphLux.useDataSetColors = false;
|
||||
graphLux.stackable = false;
|
||||
stockPanel1.addStockGraph(graphLux);
|
||||
|
||||
// CO2
|
||||
|
||||
var graph2 = new AmCharts.StockGraph();
|
||||
graph2.title = "Co2";
|
||||
graph2.valueField = "co2";
|
||||
// graph2.type = "column";
|
||||
graph2.showBalloon = false;
|
||||
|
||||
graph2.valueAxis = valueAxis2;
|
||||
stockPanel1.addStockGraph(graph2);
|
||||
|
||||
var graph3 = new AmCharts.StockGraph();
|
||||
graph3.title = "Humidity";
|
||||
graph3.valueField = "humid";
|
||||
graph3.lineThickness = 1;
|
||||
graph3.lineColor = "#ffcc00";
|
||||
graph3.useDataSetColors = false;
|
||||
graph3.stackable = false;
|
||||
graph3.valueAxis = valueAxis3;
|
||||
stockPanel1.addStockGraph(graph3);
|
||||
|
||||
var graph4 = new AmCharts.StockGraph();
|
||||
graph4.title = "Temp";
|
||||
graph4.valueField = "temp";
|
||||
graph4.lineColor = "#00ffcc";
|
||||
// graph2.type = "column";
|
||||
graph4.showBalloon = false;
|
||||
|
||||
graph4.valueAxis = valueAxis4;
|
||||
stockPanel1.addStockGraph(graph4);
|
||||
|
||||
stockPanel1.stockLegend = new AmCharts.StockLegend();
|
||||
|
||||
chart.panels = [stockPanel1];
|
||||
|
||||
chart.write('chartdiv');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@ -301,11 +301,157 @@
|
||||
this.chart.dataSets = [this.dataSet];
|
||||
},
|
||||
|
||||
doChartV3: function(chartData) {
|
||||
var self = this;
|
||||
console.log('doChartV3');
|
||||
console.time('doChartV3');
|
||||
console.log(JSON.stringify(chartData));
|
||||
self.chart = AmCharts.makeChart( "chartdiv", {
|
||||
"type": "stock",
|
||||
"theme": "dark",
|
||||
"dataSets": [ {
|
||||
"fieldMappings": [
|
||||
{
|
||||
"fromField": "value",
|
||||
"toField": "value"
|
||||
} ],
|
||||
"color": "#0000ff",
|
||||
"dataProvider": chartData,
|
||||
"title": "West Stock",
|
||||
"categoryField": "date"
|
||||
}, {
|
||||
"fieldMappings": [ {
|
||||
"fromField": "lux",
|
||||
"toField": "lux"
|
||||
} ],
|
||||
"color": "#00ff00",
|
||||
"dataProvider": chartData,
|
||||
"compared": true,
|
||||
"title": "Eastr Stock",
|
||||
"categoryField": "date"
|
||||
} ],
|
||||
|
||||
|
||||
"panels": [ {
|
||||
"title": "Value",
|
||||
"showCategoryAxis": false,
|
||||
"percentHeight": 70,
|
||||
"luxAxes": [ {
|
||||
"id": "v1",
|
||||
"dashLength": 5
|
||||
} ],
|
||||
|
||||
"categoryAxis": {
|
||||
"dashLength": 5
|
||||
},
|
||||
|
||||
"stockGraphs": [ {
|
||||
"type": "line",
|
||||
"id": "g1",
|
||||
"openField": "open",
|
||||
"closeField": "close",
|
||||
"highField": "high",
|
||||
"lowField": "low",
|
||||
"valueField": "close",
|
||||
"lineColor": "#7f8da9",
|
||||
"fillColors": "#7f8da9",
|
||||
"negativeLineColor": "#db4c3c",
|
||||
"negativeFillColors": "#db4c3c",
|
||||
"fillAlphas": 1,
|
||||
"useDataSetColors": false,
|
||||
"comparable": true,
|
||||
"compareField": "value",
|
||||
"showBalloon": false,
|
||||
"proCandlesticks": true
|
||||
} ],
|
||||
|
||||
"stockLegend": {
|
||||
"valueTextRegular": undefined,
|
||||
"periodValueTextComparing": "[[percents.value.close]]%"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Volume",
|
||||
"percentHeight": 30,
|
||||
"marginTop": 1,
|
||||
"showCategoryAxis": true,
|
||||
"valueAxes": [ {
|
||||
"dashLength": 5
|
||||
} ],
|
||||
|
||||
"categoryAxis": {
|
||||
"dashLength": 5
|
||||
},
|
||||
|
||||
"stockGraphs": [ {
|
||||
"valueField": "volume",
|
||||
"type": "column",
|
||||
"showBalloon": false,
|
||||
"fillAlphas": 1
|
||||
} ],
|
||||
|
||||
"stockLegend": {
|
||||
"markerType": "none",
|
||||
"markerSize": 0,
|
||||
"labelText": "",
|
||||
"periodValueTextRegular": "[[value.close]]"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
"chartScrollbarSettings": {
|
||||
"graph": "g1",
|
||||
"graphType": "line",
|
||||
"usePeriod": "WW"
|
||||
},
|
||||
|
||||
"chartCursorSettings": {
|
||||
"valueLineBalloonEnabled": true,
|
||||
"valueLineEnabled": true
|
||||
},
|
||||
|
||||
"periodSelector": {
|
||||
"position": "bottom",
|
||||
"periods": [ {
|
||||
"period": "DD",
|
||||
"count": 10,
|
||||
"label": "10 days"
|
||||
}, {
|
||||
"period": "MM",
|
||||
"selected": true,
|
||||
"count": 1,
|
||||
"label": "1 month"
|
||||
}, {
|
||||
"period": "YYYY",
|
||||
"count": 1,
|
||||
"label": "1 year"
|
||||
}, {
|
||||
"period": "YTD",
|
||||
"label": "YTD"
|
||||
}, {
|
||||
"period": "MAX",
|
||||
"label": "MAX"
|
||||
} ]
|
||||
},
|
||||
"export": {
|
||||
"enabled": true
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
|
||||
$('#chartdiv').empty();
|
||||
self.chart.write('chartdiv');
|
||||
|
||||
console.timeEnd('doChartV3');
|
||||
},
|
||||
//DataProvider: chartData,
|
||||
doChartV2: function(chartData) {
|
||||
var self = this;
|
||||
console.time('doChartV2');
|
||||
self.chart = AmCharts.makeChart('chartdiv', {
|
||||
type: 'serial',
|
||||
type: 'stock',
|
||||
theme: 'light',
|
||||
|
||||
legend: {
|
||||
@ -479,7 +625,7 @@
|
||||
console.log('Record count:',chartData.length);
|
||||
|
||||
// Console.log(chartData);
|
||||
self.doChartV2(chartData);
|
||||
self.doChartV3(chartData);
|
||||
console.timeEnd('updateGraphV2');
|
||||
}
|
||||
|
||||
|
||||
19161
mdot/mdot_server/mdot_server/app/js/staticdata.js
Normal file
19161
mdot/mdot_server/mdot_server/app/js/staticdata.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -5,19 +5,19 @@
|
||||
<title>Graph</title>
|
||||
<meta name="viewport"
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
|
||||
<!-- build:css -->
|
||||
<link href="css/mui.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/test.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="lib/mui.js"></script>
|
||||
<script src="lib/notification.js"></script>
|
||||
<link rel="stylesheet" href="css/notification.css">
|
||||
<!-- endbuild -->
|
||||
|
||||
</head>
|
||||
<body style="background-color:#171d25">
|
||||
<div class="mui-container">
|
||||
<div class='mui-row'>
|
||||
<div class="mui-col-md-3 panel">
|
||||
<div class='mui-panel' id="main"></div>
|
||||
<!--<div class='mui-panel' id="graph"></div>-->
|
||||
<div id="output"></div>
|
||||
</div>
|
||||
<div class="mui-col-md-9">
|
||||
@ -26,8 +26,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div id="main"></div>-->
|
||||
<!--<div id="graph"></div>-->
|
||||
<script type="text/template" id="loaded-template">
|
||||
<div
|
||||
style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
|
||||
@ -183,6 +181,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- build:vendor -->
|
||||
<script src="lib/mui.js"></script>
|
||||
<script src="lib/notification.js"></script>
|
||||
<script src="lib/jquery.js"
|
||||
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
|
||||
crossorigin="anonymous"></script>
|
||||
@ -194,6 +196,9 @@
|
||||
<script src="lib/amcharts.js"></script>
|
||||
<script src="lib/serial.js"></script>
|
||||
<script src="lib/amstock.js"></script>
|
||||
<!-- endbuild -->
|
||||
<!-- build:js -->
|
||||
<script src="js/mdot.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
124
mdot/mdot_server/mdot_server/gulpfile.js
Normal file
124
mdot/mdot_server/mdot_server/gulpfile.js
Normal file
@ -0,0 +1,124 @@
|
||||
var gulp = require('gulp');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
var cssnano = require('gulp-cssnano');
|
||||
var jshint = require('gulp-jshint');
|
||||
var uglify = require('gulp-uglify');
|
||||
var rename = require('gulp-rename');
|
||||
var concat = require('gulp-concat');
|
||||
var notify = require('gulp-notify');
|
||||
var cache = require('gulp-cache');
|
||||
var livereload = require('gulp-livereload');
|
||||
var htmlmin = require('gulp-htmlmin');
|
||||
var inject = require('gulp-inject');
|
||||
var del = require('del');
|
||||
var htmlreplace = require('gulp-html-replace');
|
||||
var stripDebug = require('gulp-strip-debug');
|
||||
|
||||
|
||||
var filePath = {
|
||||
build_dir: './dist'
|
||||
};
|
||||
|
||||
var fontOptions = { };
|
||||
|
||||
|
||||
gulp.task('appJS', function() {
|
||||
return gulp.src(['app/js/mdot.js'])
|
||||
.pipe(stripDebug())
|
||||
.pipe(jshint('.jshintrc'))
|
||||
.pipe(jshint.reporter('default'))
|
||||
.pipe(concat('app.js'))
|
||||
.pipe(uglify({mangle: false}))
|
||||
.pipe(gulp.dest('www/js'));
|
||||
});
|
||||
|
||||
gulp.task('vendor', function() {
|
||||
return gulp.src(['src/bower_modules/mui/packages/cdn/js/mui.min.js',
|
||||
'src/bower_modules/jquery/dist/jquery.min.js',
|
||||
'src/bower_modules/base64/base64.min.js',
|
||||
'src/bower_modules/underscore/underscore-min.js',
|
||||
'src/bower_modules/backbone/backbone-min.js',
|
||||
'src/bower_modules/sugarjs-date/sugar-date.min.js',
|
||||
'src/bower_modules/notification-js/build/notification.min.js',
|
||||
'src/bower_modules/amstock3/amcharts/amcharts.js',
|
||||
'src/bower_modules/amstock3/amcharts/serial.js',
|
||||
'src/bower_modules/amstock3/amcharts/amstock.js'
|
||||
])
|
||||
.pipe(concat('vendor.js'))
|
||||
.pipe(uglify({mangle: false}))
|
||||
.pipe(gulp.dest('www/libs'));
|
||||
});
|
||||
|
||||
|
||||
|
||||
gulp.task('styles', function() {
|
||||
return gulp.src(['src/bower_modules/mui/packages/cdn/css/mui.min.css','app/css/test.css','app/css/style.css','src/bower_modules/notification-js/build/notification.min.js'])
|
||||
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
|
||||
.pipe(cssnano())
|
||||
.pipe(concat('app.css'))
|
||||
.pipe(gulp.dest('www/css'));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('index', function() {
|
||||
|
||||
return gulp.src(['app/index.html'])
|
||||
.pipe(htmlreplace({
|
||||
mui: 'css/custom.css',
|
||||
css: 'css/app.css',
|
||||
js: 'js/app.js',
|
||||
vendor: 'libs/vendor.js'
|
||||
|
||||
}))
|
||||
.pipe(htmlmin({removeComments: true, collapseWhitespace: true, keepClosingSlash: true}))
|
||||
|
||||
.pipe(gulp.dest('www/'));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('partials', function() {
|
||||
|
||||
gulp.src(['app/partials/**/*']).pipe(gulp.dest('www/partials'));
|
||||
// gulp.src(['app/libs/ejs_production.js']).pipe(gulp.dest('dist/libs'));
|
||||
// gulp.src(['app/libs/microevent.js']).pipe(gulp.dest('dist/libs'));
|
||||
//gulp.src(['app/fav/**/*']).pipe(size({title: 'Partials'})).pipe(gulp.dest('dist/fav'));
|
||||
gulp.src(['app/img/logo.png']).pipe(gulp.dest('www/img'));
|
||||
});
|
||||
|
||||
gulp.task('copy', function() {
|
||||
return gulp.src(['app/**/*'])
|
||||
.pipe(gulp.dest('www'));
|
||||
});
|
||||
|
||||
gulp.task('buildJS', function() {
|
||||
gulp.start('appJS','vendor');
|
||||
});
|
||||
|
||||
gulp.task('clean', function() {
|
||||
return del(['www']);
|
||||
});
|
||||
|
||||
|
||||
gulp.task('normal', ['clean'], function() {
|
||||
'use strict';
|
||||
gulp.start('copy', 'sloc','watch');
|
||||
});
|
||||
|
||||
gulp.task('default', ['clean'], function() {
|
||||
gulp.start('buildJS','styles','index');
|
||||
});
|
||||
|
||||
gulp.task('watch',function() {
|
||||
gulp.watch('app/**/*',['copy']);
|
||||
|
||||
});
|
||||
|
||||
gulp.task('MUIWatcher', function() {
|
||||
'use strict';
|
||||
gulp.start('customMUI','watchMUI');
|
||||
});
|
||||
|
||||
gulp.task('watchMUI',function() {
|
||||
gulp.watch('app/css/custom.scss',['customMUI']);
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user