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
Showing
with 275 additions and 65 deletions
+275 -65
index.html
+ 34
- 10
View file @ 37b8232f
......@@ -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">
......
index.js
+ 4
- 0
View file @ 37b8232f
......@@ -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}`);
});
public/js/appChart.js
+ 133
- 55
View file @ 37b8232f
......@@ -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 ({ .... })
public/js/testzoom.js 0 → 100644
+ 54
- 0
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
+ 50
- 0
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
Supports Markdown
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