From d2eaf3530308727ff986ea8da308a14c286f41b1 Mon Sep 17 00:00:00 2001
From: Sven Schneider <icedoggy@gmx.de>
Date: Mon, 17 May 2021 22:47:37 +0200
Subject: [PATCH] added line chart using chart.js and added some function to
rename keys in json and vonert data from array[array] to array[json]
---
index.html | 34 +++++++++++++++++-
public/js/appChart.js | 84 ++++++++++++++++++++++++++++++++++++++++---
2 files changed, 113 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 2af58b6..6b55324 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,9 @@
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<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>
<!-- Apexcharts lib -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="css/styles.css" />
@@ -124,8 +127,37 @@
<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">
+ <i class="fas fa-chart-area mr-1"></i>
+ Test Chart.js
+ </div>
+ <div class="card-body">
+ <canvas id="lineChart" width="400" height="400"></canvas>
+ </div>
+ </div>
+ </div>
+
+ <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">
+ <canvas id="scatterChart" width="400" height="400"></canvas>
+ </div>
+ </div>
+ </div>
+
</div>
+
+
+
+
</div>
</main>
<footer class="py-4 bg-light mt-auto">
diff --git a/public/js/appChart.js b/public/js/appChart.js
index 0f7dc3f..b416b0f 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -437,7 +437,83 @@ followNextLink(
console.log(err);
})
.then((observationArr) => {
- updateLineChartAC(chart1LineTitle, observationArr);
- drawHeatMapAC2(observationArr);
- });
-///test
\ No newline at end of file
+ // updateLineChartAC(chart1LineTitle, observationArr);
+ // drawHeatMapAC2(observationArr);
+
+ ///////////// use chart.js for line chart
+
+ var ctx = document.getElementById("lineChart").getContext("2d");
+ var lineChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ datasets: [
+ {
+ label: "Inflow (Vorlauf)",
+ data: observationArr, // [12, 19, 3, 5, 2, 3]
+ borderColor: ["rgba(255, 99, 132, 0.2)"],
+ fill: false
+ },
+ ],
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ },
+ },
+ },
+ });
+
+
+ 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' ) );
+
+ // 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 ({ .... })
--
GitLab