martin/mdot_server
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git synced 2025-02-09 20:59:16 +00:00
Code Issues Projects Releases Wiki Activity

darkening the graph

Browse Source
This commit is contained in:
Martin Donnelly 2016-08-16 10:46:01 +01:00
parent 5431a05917
commit 2e5ffef5b6
3 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/css/test.css Normal file
View File

@ -0,0 +1,3 @@
.panel {
background-color: rgba(255,255,255,0.95);
}

79
app/js/mdot.js
View File

@ -344,16 +344,20 @@
self.chart.dataProvider = chartData; self.chart.dataProvider = chartData;
self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ'; self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
self.chart.categoryField = 'date'; self.chart.categoryField = 'date';
self.chart.color = '#ffffff';
self.chart.marginLeft = 0;
// AXES // AXES
// category // category
var categoryAxis = self.chart.categoryAxis; var categoryAxis = self.chart.categoryAxis;
categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
categoryAxis.minPeriod = 'mm'; // Our data is daily, so we set minPeriod to DD categoryAxis.minPeriod = 'mm';
categoryAxis.gridAlpha = 0.1; categoryAxis.gridAlpha = 0.2;
categoryAxis.minorGridAlpha = 0.1; categoryAxis.minorGridAlpha = 0;
categoryAxis.axisAlpha = 0; categoryAxis.axisAlpha = 0.5;
categoryAxis.minorGridEnabled = true; categoryAxis.minorGridEnabled = true;
categoryAxis.gridColor = '#FFFFFF';
categoryAxis.axisColor = '#cccccc';
categoryAxis.inside = true; categoryAxis.inside = true;
// Value // Value
@ -364,6 +368,8 @@
valueAxis.showLastLabel = false; valueAxis.showLastLabel = false;
valueAxis.title = this.titles[this.mode]; valueAxis.title = this.titles[this.mode];
valueAxis.position = 'left'; valueAxis.position = 'left';
valueAxis.gridColor = '#FFFFFF';
valueAxis.axisColor = '#cccccc';
self.chart.addValueAxis(valueAxis); self.chart.addValueAxis(valueAxis);
if (mode === 6) { if (mode === 6) {
@ -393,10 +399,11 @@
// GRAPH // GRAPH
var graph = new AmCharts.AmGraph(); var graph = new AmCharts.AmGraph();
graph.dashLength = 3; graph.dashLength = 3;
graph.lineColor = '#00CC00'; graph.lineColor = 'rgba(46,255,0,1)';
graph.labelColor = 'rgba(46,255,0,1)';
graph.valueField = 'value'; graph.valueField = 'value';
graph.dashLength = 3; graph.dashLength = 3;
/* graph.bullet = 'round';*/ /* Graph.bullet = 'round';*/
graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>' + this.titles[this.mode] + ':[[value]]</span></b>'; graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>' + this.titles[this.mode] + ':[[value]]</span></b>';
self.chart.addGraph(graph); self.chart.addGraph(graph);
@ -407,19 +414,20 @@
co2graph.title = 'Co2'; co2graph.title = 'Co2';
co2graph.type = 'line'; co2graph.type = 'line';
co2graph.valueAxis = co2Axis; // Indicate which axis should be used co2graph.valueAxis = co2Axis; // Indicate which axis should be used
co2graph.lineColor = '#786c56'; co2graph.lineColor = 'rgba(0,191,255,1)';
co2graph.labelColor = 'rgba(0,191,255,1)';
co2graph.lineThickness = 1; co2graph.lineThickness = 1;
co2graph.legendValueText = '[[description]]/[[value]]'; co2graph.legendValueText = '[[description]]/[[value]]';
/* co2graph.bullet = 'round'; /* Co2graph.bullet = 'round';
co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
co2graph.bulletBorderColor = '#786c56'; co2graph.bulletBorderColor = '#786c56';
co2graph.bulletBorderAlpha = 1; co2graph.bulletBorderAlpha = 1;
co2graph.bulletBorderThickness = 2; co2graph.bulletBorderThickness = 2;
co2graph.bulletColor = '#000000';*/ co2graph.bulletColor = '#000000';*/
//Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets. //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
co2graph.labelPosition = 'right'; co2graph.labelPosition = 'right';
co2graph.balloonText = "Co2 Level:[[value]]"; co2graph.balloonText = 'Co2 Level:[[value]]';
co2graph.showBalloon = true; co2graph.showBalloon = true;
co2graph.dashLengthField = 'dashLength'; co2graph.dashLengthField = 'dashLength';
self.chart.addGraph(co2graph); self.chart.addGraph(co2graph);
@ -427,29 +435,30 @@
} }
if (mode === 7) { if (mode === 7) {
var otherGraph = new AmCharts.AmGraph(); var otherGraph = new AmCharts.AmGraph();
otherGraph.valueField = 'valueB'; otherGraph.valueField = 'valueB';
otherGraph.title = 'Humidity'; otherGraph.title = 'Humidity';
otherGraph.type = 'line'; otherGraph.type = 'line';
otherGraph.valueAxis = otherAxis; // Indicate which axis should be used otherGraph.valueAxis = otherAxis; // Indicate which axis should be used
otherGraph.lineColor = '#786c56'; otherGraph.lineColor = 'rgba(0,191,255,1)';
otherGraph.lineThickness = 1; otherGraph.labelColor = 'rgba(0,191,255,1)';
otherGraph.legendValueText = '[[description]]/[[value]]'; otherGraph.lineThickness = 1;
otherGraph.legendValueText = '[[description]]/[[value]]';
otherGraph.bullet = 'round'; /*otherGraph.bullet = 'round';
otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
otherGraph.bulletBorderColor = '#786c56'; otherGraph.bulletBorderColor = '#786c56';
otherGraph.bulletBorderAlpha = 1; otherGraph.bulletBorderAlpha = 1;
otherGraph.bulletBorderThickness = 2; otherGraph.bulletBorderThickness = 2;
otherGraph.bulletColor = '#000000'; otherGraph.bulletColor = '#000000';
//Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets. //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
otherGraph.labelPosition = 'right'; otherGraph.labelPosition = 'right';*/
//Co2graph.balloonText = "latitude:[[value]]"; //Co2graph.balloonText = "latitude:[[value]]";
otherGraph.showBalloon = true; otherGraph.showBalloon = true;
otherGraph.dashLengthField = 'dashLength'; otherGraph.dashLengthField = 'dashLength';
self.chart.addGraph(otherGraph); self.chart.addGraph(otherGraph);
} }
// CURSOR // CURSOR
var chartCursor = new AmCharts.ChartCursor(); var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineEnabled = true; chartCursor.valueLineEnabled = true;

5
app/test.html
View File

@ -4,14 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Title</title> <title>Title</title>
<link href="css/mui.css" rel="stylesheet" type="text/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"/> <link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="lib/notification.js"></script> <script src="lib/notification.js"></script>
<link rel="stylesheet" href="css/notification.css"> <link rel="stylesheet" href="css/notification.css">
</head> </head>
<body> <body style="background-color:#161616">
<div class="mui-container"> <div class="mui-container">
<div class='mui-row'> <div class='mui-row'>
<div class="mui-col-md-3"> <div class="mui-col-md-3 panel">
<div id="main"></div> <div id="main"></div>
<div id="graph"></div> <div id="graph"></div>
<div id="output"></div> <div id="output"></div>