mirror of
https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git
synced 2025-02-06 03:59:16 +00:00
126 lines
3.4 KiB
HTML
126 lines
3.4 KiB
HTML
<!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";
|
|
|
|
// 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>
|
|
|
|
|
|
|