Commit d2eaf353 authored by Sven Schneider's avatar Sven Schneider
Browse files

added line chart using chart.js and added some function to rename keys in json...

added line chart using chart.js and added some function to rename keys in json and vonert data from array[array] to array[json]
parent d3b3169e
......@@ -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" />
......@@ -125,7 +128,36 @@
</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">
......
......@@ -437,7 +437,83 @@ followNextLink(
console.log(err);
})
.then((observationArr) => {
updateLineChartAC(chart1LineTitle, observationArr);
drawHeatMapAC2(observationArr);
// 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,
},
},
},
});
///test
\ No newline at end of file
}); // this closes the followLink.then ({ .... })
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