diff --git a/index.html b/index.html
index 6b55324530fd70d5d8c1ccf65cd5d1c174a42941..afc866dda0e1fafccd1913bd719c4257177daf01 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
<meta name="author" content="" />
<title>Dashboard - iCity Bosch</title>
<link href="css/styles.css" rel="stylesheet" />
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" rel="stylesheet" />
+
<link
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel="stylesheet"
@@ -30,7 +32,7 @@
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<!-- chart.js library -->
- <script src='https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js'></script>
+ <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script> -->
<!-- Apexcharts lib -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="css/styles.css" />
@@ -54,8 +56,19 @@
<script defer src="js/thirdparty/scripts.js"></script>
<!--
Custom JS -->
+ <!-- chart.js library -->
+ <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script> -->
+
+ <!-- chart.js library -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+ <!-- for gesture recogintion -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.min.js"></script>
+
<script defer src="js/appCesium.js"></script>
<script defer src="js/appChart.js"></script>
+ <!-- <script defer src="js/testzoom.js"></script> -->
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
@@ -127,8 +140,8 @@
<div id="chart-apex-heatmap" width="100%" height="40"></div>
</div>
</div>
- </div>
-
+ </div>
+
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
@@ -137,27 +150,38 @@
</div>
<div class="card-body">
<canvas id="lineChart" width="400" height="400"></canvas>
+
+ <button id="reset_zoom_line">Reset zoom</button>
+
+ <button id="disable_zoom_line">Disable zoom</button>
+
+ <button id="enable_zoom_line">Enable zoom</button>
+
</div>
</div>
- </div>
+ </div>
- <div class="col-xl-6">
+ <!-- <div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-chart-area mr-1"></i>
Test Scatter Chart.js
</div>
- <div class="card-body">
+ <div class="card-body" >
<canvas id="scatterChart" width="400" height="400"></canvas>
- </div>
- </div>
- </div>
- </div>
+ <button id="reset_zoom">Reset zoom</button>
+ <button id="disable_zoom">Disable zoom</button>
+ <button id="enable_zoom">Enable zoom</button>
+ </div>
+ </div>
+ </div> -->
+
+ </div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">
diff --git a/index.js b/index.js
index 4742827c3c42cf3993a1d713dad657a948e504ba..2c628007160786192a796be41beaebbde61b6c44 100644
--- a/index.js
+++ b/index.js
@@ -13,6 +13,10 @@ app.get("/index.html", (req, res) => {
res.redirect("/");
});
+app.get("/test", (req, res) => {
+ res.sendFile(__dirname + "/test.html");
+});
+
app.listen(port, () => {
console.log(`App listening at localhost:${port}`);
});
diff --git a/public/js/appChart.js b/public/js/appChart.js
index b416b0f3812cd367faa725b38acd4204c6d7215d..fa0dad649618e1ac093612cf392b0635aabbcb30 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -442,6 +442,28 @@ followNextLink(
///////////// use chart.js for line chart
+
+ function renameKey(obj, oldKey, newKey) {
+ obj[newKey] = obj[oldKey];
+ delete obj[oldKey];
+ }
+
+ function convertArray2JSON(arr) {
+ var arrayToString = JSON.stringify(Object.assign({}, arr)); // convert array to string
+ var stringToJsonObject = JSON.parse(arrayToString); // convert string to json object
+ return stringToJsonObject;
+ }
+
+ let jsonFromArr = [];
+ for (var i = 0; i < observationArr.length; i++) {
+ jsonFromArr.push(convertArray2JSON(observationArr[i]));
+ }
+
+ jsonFromArr.forEach((obj) => renameKey(obj, "0", "x"));
+ let jsonFromArr2 = jsonFromArr;
+ jsonFromArr2.forEach((obj) => renameKey(obj, "1", "y"));
+
+
var ctx = document.getElementById("lineChart").getContext("2d");
var lineChart = new Chart(ctx, {
type: "line",
@@ -449,71 +471,127 @@ followNextLink(
datasets: [
{
label: "Inflow (Vorlauf)",
- data: observationArr, // [12, 19, 3, 5, 2, 3]
+ data: [12, 19, 3, 5, 2, 3],
borderColor: ["rgba(255, 99, 132, 0.2)"],
- fill: false
+ fill: false,
},
],
},
options: {
scales: {
y: {
- beginAtZero: true,
+ beginAtZero: false,
},
- },
+ },
+
+ // pan: {
+ // enabled: true,
+ // mode: "x",
+ // speed: 10,
+ // threshold: 10,
+ // },
+ // zoom: {
+ // enabled: true,
+ // drag: false,
+ // mode: "y",
+ // speed: 0.5,
+ // // sensitivity: 0.1,
+ // // limits: {
+ // // max: 10,
+ // // min: 0.5,
+ // // },
+ // },
},
});
-
- function renameKey ( obj, oldKey, newKey ) {
- obj[newKey] = obj[oldKey];
- delete obj[oldKey];
- }
- function convertArray2JSON(arr){
- var arrayToString = JSON.stringify(Object.assign({}, arr)); // convert array to string
- var stringToJsonObject = JSON.parse(arrayToString); // convert string to json object
- return stringToJsonObject;
- }
+ $('#reset_zoom_line').click(function(){
+ lineChart.resetZoom();
+ console.log(lineChart);
+ });
+
+ $('#disable_zoom_line').click(function(){
+ lineChart.ctx.canvas.removeEventListener('wheel', lineChart._wheelHandler);
+ });
+
+ $('#enable_zoom_line').click(function(){
+ lineChart.ctx.canvas.addEventListener('wheel', lineChart._wheelHandler);
+ });
-
- let jsonFromArr = [];
- for (var i=0; i < observationArr.length; i++){
- jsonFromArr.push(convertArray2JSON(observationArr[i]));
- }
-
- jsonFromArr.forEach( obj => renameKey( obj, '0', 'x' ) );
- let jsonFromArr2 = jsonFromArr;
- jsonFromArr2.forEach( obj => renameKey( obj, '1', 'y' ) );
-
- // arr = JSON.parse(observationArr_upd1);
- // arr.forEach( obj => renameKey( obj, '1', 'y' ) );
- // const observationArr_upd2 = JSON.stringify( arr );
-
- ///////////// use chart.js for line chart
-
- var ctx_scatter = document.getElementById("scatterChart").getContext("2d");
- var scatterChart = new Chart(ctx_scatter, {
- type: "scatter",
- data: {
- datasets: [
- {
- label: "Inflow (Vorlauf)",
- data: jsonFromArr2, // [12, 19, 3, 5, 2, 3]
- borderColor: ["rgba(255, 99, 132, 0.2)"],
- fill: false
- },
- ],
- },
- options: {
- scales: {
- y: {
- beginAtZero: true,
- },
- },
- },
- });
-
-
-
- }); // this closes the followLink.then ({ .... })
+
+
+
+
+
+
+
+/////////////////////////////////////////
+
+// var ctx_scatterChart = document.getElementById("scatterChart");
+// var scatterChart = new Chart(ctx_scatterChart, {
+// type: 'bar',
+// data: {
+// labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+// datasets: [{
+// label: '# of Votes',
+// data: [12, 19, 3, 5, 2, 3],
+// backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+// borderColor: ["Blue", "Yellow", "Green", "Purple", "Orange", "Red"],
+// borderWidth: 1,
+// }]
+// },
+// options: {
+// scales: {
+// yAxes: [{
+// ticks: {
+// beginAtZero:false
+// }
+// }]
+// },
+// // Container for pan options
+// pan: {
+// // Boolean to enable panning
+// enabled: true,
+
+// // Panning directions. Remove the appropriate direction to disable
+// // Eg. 'y' would only allow panning in the y direction
+// mode: 'xy',
+
+// speed: 10
+// },
+
+// // Container for zoom options
+// zoom: {
+// // Boolean to enable zooming
+// enabled: true,
+// // Zooming directions. Remove the appropriate direction to disable
+// // Eg. 'y' would only allow zooming in the y direction
+// mode: 'x',
+// }
+// }
+// });
+
+
+
+// $('#reset_zoom').click(function(){
+// scatterChart.resetZoom();
+// console.log(scatterChart);
+// });
+
+// $('#disable_zoom').click(function(){
+// scatterChart.ctx.canvas.removeEventListener('wheel', scatterChart._wheelHandler);
+// });
+
+// $('#enable_zoom').click(function(){
+// scatterChart.ctx.canvas.addEventListener('wheel', scatterChart._wheelHandler);
+// });
+
+
+
+
+
+//////////////////////////////////////////
+
+
+
+ }); // this closes the followLink.then ({ .... })
diff --git a/public/js/testzoom.js b/public/js/testzoom.js
new file mode 100644
index 0000000000000000000000000000000000000000..c127c6598d32788b87b249ed7d11cb8d0a27da67
--- /dev/null
+++ b/public/js/testzoom.js
@@ -0,0 +1,54 @@
+var ctx = document.getElementById("myChart");
+var myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+ datasets: [{
+ label: '# of Votes',
+ data: [12, 19, 3, 5, 2, 3]
+ }]
+ },
+ options: {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero:true
+ }
+ }]
+ },
+ // Container for pan options
+ pan: {
+ // Boolean to enable panning
+ enabled: true,
+
+ // Panning directions. Remove the appropriate direction to disable
+ // Eg. 'y' would only allow panning in the y direction
+ mode: 'x',
+
+ speed: 1
+ },
+
+ // Container for zoom options
+ zoom: {
+ // Boolean to enable zooming
+ enabled: true,
+ // Zooming directions. Remove the appropriate direction to disable
+ // Eg. 'y' would only allow zooming in the y direction
+ mode: 'x',
+ }
+ }
+});
+
+$('#reset_zoom').click(function(){
+ myChart.resetZoom();
+ console.log(myChart);
+});
+
+$('#disable_zoom').click(function(){
+ myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);
+});
+
+$('#enable_zoom').click(function(){
+ myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);
+});
+
diff --git a/test.html b/test.html
new file mode 100644
index 0000000000000000000000000000000000000000..8f938180d98bca3ebe1cccbee00e09ae1a5b095a
--- /dev/null
+++ b/test.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+ <!-- chart.js library -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
+ <script src="https://npmcdn.com/Chart.Zoom.js@0.3.0/Chart.Zoom.min.js"></script>
+ <!-- <script defer src="js/testzoom.js"></script> -->
+
+
+
+
+
+ <title>Document</title>
+</head>
+<body>
+ <h1>test</h1>
+<h1>test</h1>
+
+<h1>test</h1>
+
+<div style="max-width: 600px; max-height: 400px;" class="myChartDiv">
+ <canvas id="myChart" width="600" height="400"></canvas>
+</div>
+
+<button id="reset_zoom">
+ Reset zoom
+</button>
+
+<button id="disable_zoom">
+ Disable zoom
+</button>
+
+<button id="enable_zoom">
+ Enable zoom
+</button>
+
+<h1>test</h1>
+
+<script defer src="js/testzoom.js"></script>
+
+</body>
+
+
+</html>
\ No newline at end of file