martin/mdot_server
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git synced 2025-02-04 11:30:13 +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.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
self.chart.categoryField = 'date';
self.chart.color = '#ffffff';
self.chart.marginLeft = 0;
// AXES
// category
var categoryAxis = self.chart.categoryAxis;
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.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minPeriod = 'mm';
categoryAxis.gridAlpha = 0.2;
categoryAxis.minorGridAlpha = 0;
categoryAxis.axisAlpha = 0.5;
categoryAxis.minorGridEnabled = true;
categoryAxis.gridColor = '#FFFFFF';
categoryAxis.axisColor = '#cccccc';
categoryAxis.inside = true;
// Value
@ -364,6 +368,8 @@
valueAxis.showLastLabel = false;
valueAxis.title = this.titles[this.mode];
valueAxis.position = 'left';
valueAxis.gridColor = '#FFFFFF';
valueAxis.axisColor = '#cccccc';
self.chart.addValueAxis(valueAxis);
if (mode === 6) {
@ -393,10 +399,11 @@
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = '#00CC00';
graph.lineColor = 'rgba(46,255,0,1)';
graph.labelColor = 'rgba(46,255,0,1)';
graph.valueField = 'value';
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>';
self.chart.addGraph(graph);
@ -407,19 +414,20 @@
co2graph.title = 'Co2';
co2graph.type = 'line';
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.legendValueText = '[[description]]/[[value]]';
/* co2graph.bullet = 'round';
co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
co2graph.bulletBorderColor = '#786c56';
co2graph.bulletBorderAlpha = 1;
co2graph.bulletBorderThickness = 2;
co2graph.bulletColor = '#000000';*/
/* Co2graph.bullet = 'round';
co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
co2graph.bulletBorderColor = '#786c56';
co2graph.bulletBorderAlpha = 1;
co2graph.bulletBorderThickness = 2;
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.labelPosition = 'right';
co2graph.balloonText = "Co2 Level:[[value]]";
co2graph.balloonText = 'Co2 Level:[[value]]';
co2graph.showBalloon = true;
co2graph.dashLengthField = 'dashLength';
self.chart.addGraph(co2graph);
@ -427,29 +435,30 @@
}
if (mode === 7) {
var otherGraph = new AmCharts.AmGraph();
otherGraph.valueField = 'valueB';
otherGraph.title = 'Humidity';
otherGraph.type = 'line';
otherGraph.valueAxis = otherAxis; // Indicate which axis should be used
otherGraph.lineColor = '#786c56';
otherGraph.lineThickness = 1;
otherGraph.legendValueText = '[[description]]/[[value]]';
var otherGraph = new AmCharts.AmGraph();
otherGraph.valueField = 'valueB';
otherGraph.title = 'Humidity';
otherGraph.type = 'line';
otherGraph.valueAxis = otherAxis; // Indicate which axis should be used
otherGraph.lineColor = 'rgba(0,191,255,1)';
otherGraph.labelColor = 'rgba(0,191,255,1)';
otherGraph.lineThickness = 1;
otherGraph.legendValueText = '[[description]]/[[value]]';
otherGraph.bullet = 'round';
otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
otherGraph.bulletBorderColor = '#786c56';
otherGraph.bulletBorderAlpha = 1;
otherGraph.bulletBorderThickness = 2;
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.
otherGraph.labelPosition = 'right';
//Co2graph.balloonText = "latitude:[[value]]";
otherGraph.showBalloon = true;
otherGraph.dashLengthField = 'dashLength';
self.chart.addGraph(otherGraph);
/*otherGraph.bullet = 'round';
otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
otherGraph.bulletBorderColor = '#786c56';
otherGraph.bulletBorderAlpha = 1;
otherGraph.bulletBorderThickness = 2;
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.
otherGraph.labelPosition = 'right';*/
//Co2graph.balloonText = "latitude:[[value]]";
otherGraph.showBalloon = true;
otherGraph.dashLengthField = 'dashLength';
self.chart.addGraph(otherGraph);
}
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineEnabled = true;

5
app/test.html
View File

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