Skip to content

GitLab

Commit 37b8232f authored by Sven Schneider's avatar Sven Schneider
Browse files

made zoom available but now date is not shown as i had to revert back to an... 

made zoom available but now date is not shown as i had to revert back to an older verison of the zoom chart.js. There seems to be a newer version vor 3.0+ so need to implement this
parent d2eaf353
Hide whitespace changes
Inline Side-by-side
index.html
View file @ 37b8232f
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
<meta name="author" content="" /> <meta name="author" content="" />
<title>Dashboard - iCity Bosch</title> <title>Dashboard - iCity Bosch</title>
<link href="css/styles.css" rel="stylesheet" /> <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 <link
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel="stylesheet" rel="stylesheet"
...@@ -30,7 +32,7 @@ ...@@ -30,7 +32,7 @@
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script> <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<!-- chart.js library --> <!-- 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 --> <!-- Apexcharts lib -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
...@@ -54,8 +56,19 @@ ...@@ -54,8 +56,19 @@
<script defer src="js/thirdparty/scripts.js"></script> <script defer src="js/thirdparty/scripts.js"></script>
<!-- <!--
Custom JS --> 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/appCesium.js"></script>
<script defer src="js/appChart.js"></script> <script defer src="js/appChart.js"></script>
<!-- <script defer src="js/testzoom.js"></script> -->
</head> </head>
<body class="sb-nav-fixed"> <body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark"> <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
...@@ -127,8 +140,8 @@ ...@@ -127,8 +140,8 @@
<div id="chart-apex-heatmap" width="100%" height="40"></div> <div id="chart-apex-heatmap" width="100%" height="40"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
...@@ -137,27 +150,38 @@ ...@@ -137,27 +150,38 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<canvas id="lineChart" width="400" height="400"></canvas> <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> </div>
<div class="col-xl-6"> <!-- <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<i class="fas fa-chart-area mr-1"></i> <i class="fas fa-chart-area mr-1"></i>
Test Scatter Chart.js Test Scatter Chart.js
</div> </div>
<div class="card-body"> <div class="card-body" >
<canvas id="scatterChart" width="400" height="400"></canvas> <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> </div>
</main> </main>
<footer class="py-4 bg-light mt-auto"> <footer class="py-4 bg-light mt-auto">
......
index.js
View file @ 37b8232f
...@@ -13,6 +13,10 @@ app.get("/index.html", (req, res) => { ...@@ -13,6 +13,10 @@ app.get("/index.html", (req, res) => {
res.redirect("/"); res.redirect("/");
}); });
app.get("/test", (req, res) => {
res.sendFile(__dirname + "/test.html");
});
app.listen(port, () => { app.listen(port, () => {
console.log(`App listening at localhost:${port}`); console.log(`App listening at localhost:${port}`);
}); });
public/js/appChart.js
View file @ 37b8232f
...@@ -442,6 +442,28 @@ followNextLink( ...@@ -442,6 +442,28 @@ followNextLink(
///////////// use chart.js for line chart ///////////// 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 ctx = document.getElementById("lineChart").getContext("2d");
var lineChart = new Chart(ctx, { var lineChart = new Chart(ctx, {
type: "line", type: "line",
...@@ -449,71 +471,127 @@ followNextLink( ...@@ -449,71 +471,127 @@ followNextLink(
datasets: [ datasets: [
{ {
label: "Inflow (Vorlauf)", 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)"], borderColor: ["rgba(255, 99, 132, 0.2)"],
fill: false fill: false,
}, },
], ],
}, },
options: { options: {
scales: { scales: {
y: { 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){ $('#reset_zoom_line').click(function(){
var arrayToString = JSON.stringify(Object.assign({}, arr)); // convert array to string lineChart.resetZoom();
var stringToJsonObject = JSON.parse(arrayToString); // convert string to json object console.log(lineChart);
return stringToJsonObject; });
}
$('#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' ) );
// var ctx_scatterChart = document.getElementById("scatterChart");
// arr = JSON.parse(observationArr_upd1); // var scatterChart = new Chart(ctx_scatterChart, {
// arr.forEach( obj => renameKey( obj, '1', 'y' ) ); // type: 'bar',
// const observationArr_upd2 = JSON.stringify( arr ); // data: {
// labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
///////////// use chart.js for line chart // datasets: [{
// label: '# of Votes',
var ctx_scatter = document.getElementById("scatterChart").getContext("2d"); // data: [12, 19, 3, 5, 2, 3],
var scatterChart = new Chart(ctx_scatter, { // backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
type: "scatter", // borderColor: ["Blue", "Yellow", "Green", "Purple", "Orange", "Red"],
data: { // borderWidth: 1,
datasets: [ // }]
{ // },
label: "Inflow (Vorlauf)", // options: {
data: jsonFromArr2, // [12, 19, 3, 5, 2, 3] // scales: {
borderColor: ["rgba(255, 99, 132, 0.2)"], // yAxes: [{
fill: false // ticks: {
}, // beginAtZero:false
], // }
}, // }]
options: { // },
scales: { // // Container for pan options
y: { // pan: {
beginAtZero: true, // // 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
}); // this closes the followLink.then ({ .... }) // },
// // 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 ({ .... })
public/js/testzoom.js 0 → 100644
View file @ 37b8232f
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);
});
test.html 0 → 100644
View file @ 37b8232f
<!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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal