Skip to content

GitLab

Commit 4012e285 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Remove line and heatmap chart drawing functions / ApexCharts

parent 25c295c8
Hide whitespace changes
Inline Side-by-side
public/js/appChart.js
View file @ 4012e285
...@@ -18,370 +18,6 @@ const BASE_URL2 = ...@@ -18,370 +18,6 @@ const BASE_URL2 =
const PARAM_FILTER2 = const PARAM_FILTER2 =
"resultTime ge 2020-06-01T00:00:00.000Z and resultTime le 2021-01-01T00:00:00.000Z"; "resultTime ge 2020-06-01T00:00:00.000Z and resultTime le 2021-01-01T00:00:00.000Z";
/**
* Draw an EMPTY chart using Apexcharts library
* @param {HTMLElement} htmlElement - HTML element where chart will be drawn
* @param {String} mainTitle - Main chart title
* @param {String} yAxisTitle - Y-axis title
* @returns {Object} - An empty chart object
*/
const drawEmptyLineChartAC = function (
htmlElement,
mainTitle = "Main Chart Title",
yAxisTitle = "y-axis title"
) {
// Chart constants
const CHART_HTML_ELEMENT = htmlElement;
const TITLE_TEXT = mainTitle;
const Y_AXIS_TITLE = yAxisTitle;
const options = {
series: [],
chart: {
type: "area",
stacked: false,
height: 350,
zoom: {
type: "x",
enabled: true,
autoScaleYaxis: true,
},
toolbar: {
autoSelected: "zoom",
},
},
dataLabels: {
enabled: false,
},
markers: {
size: 0,
},
title: {
text: TITLE_TEXT,
align: "left",
},
noData: {
text: "Loading...",
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90, 100],
},
},
yaxis: {
labels: {
formatter: function (val) {
return val.toFixed(0);
},
forceNiceScale: true,
},
title: {
text: Y_AXIS_TITLE,
},
},
xaxis: {
type: "datetime",
},
tooltip: {
shared: false,
y: {
formatter: function (val) {
return val.toFixed(2);
},
},
},
};
const chart = new ApexCharts(CHART_HTML_ELEMENT, options);
return chart;
};
// Line chart 1 constants
const chart1LineHTML = document.querySelector("#chart-line");
const chart1LineTitle = "Inlet flow (Vorlauf)";
const chart1LineYAxisTitle = "Temperature (°C)";
// Draw an empty line chart
const lineChartApex = drawEmptyLineChartAC(
chart1LineHTML,
chart1LineTitle,
chart1LineYAxisTitle
);
lineChartApex.render();
/**
* Update an empty chart created using Apexcharts library
* @param {String} chartName
* @param {Array} dataArr
* @returns {void}
*/
const updateLineChartAC = function (chartName, dataArr) {
const CHART_NAME = chartName;
// Update the chart
lineChartApex.updateSeries([
{
name: CHART_NAME,
data: dataArr,
},
]);
};
/**
* Draw a heatmap using the ApexCharts library
* ATTEMPT 1
* @param {Array} obsArray - Response from SensorThings API as array
* @returns {void}
*/
const drawHeatMapAC1 = function (obsArray) {
// Chart constants
const CHART_HEATMAP_TITLE = "HeatMap Chart";
const CHART_HEATMAP_NAME_SERIES_1 = "VL-225";
// const CHART_HEATMAP_NAME_SERIES_2 = "W2";
/**
* Convert SensorThings API response (an array) into an object
* @returns {Object} - Chart series object
*/
const generateHeatMapData = function () {
const series = [];
obsArray.forEach(([obsTime, obsValue]) => {
series.push({
x: obsTime.slice(0, -1), // remove trailing "Z" from timestamp
y: obsValue,
});
});
return series;
};
const data = [
{
name: CHART_HEATMAP_NAME_SERIES_1,
data: generateHeatMapData(obsArray),
},
// {
// name: CHART_HEATMAP_NAME_SERIES_2,
// data: generateHeatMapData(obsArray),
// },
];
data.reverse();
const colors = [
"#F3B415",
"#F27036",
"#663F59",
"#6A6E94",
"#4E88B4",
"#00A7C6",
"#18D8D8",
"#A9D794",
"#46AF78",
"#A93F55",
"#8C5E58",
"#2176FF",
"#33A1FD",
"#7A918D",
"#BAFF29",
];
// colors.reverse();
const options = {
series: data,
chart: {
height: 350,
type: "heatmap",
},
dataLabels: {
enabled: false,
},
colors: colors,
title: {
text: CHART_HEATMAP_TITLE,
},
grid: {
padding: {
right: 20,
},
},
xaxis: {
type: "datetime",
},
tooltip: {
shared: false,
x: {
formatter: function (val) {
return new Date(val).toLocaleString();
},
},
y: {
formatter: function (val) {
return val.toFixed(2);
},
},
},
plotOptions: {
heatmap: {
useFillColorAsStroke: true, // we need this option for the chart to be visible
// distributed: true,
// enableShades: false,
},
},
};
const chart = new ApexCharts(
document.querySelector("#chart-apex-heatmap"),
options
);
chart.render();
};
/**
* Draw a heatmap using the ApexCharts library
* ATTEMPT 2
* @param {Array} obsArray - Response from SensorThings API as array
* @returns {void}
*/
const drawHeatMapAC2 = function (obsArray) {
// Chart constants
const CHART_HEATMAP_TITLE = "HeatMap Chart";
const CHART_HEATMAP_NAME_SERIES_1 = "VL-225";
/**
* Convert SensorThings API response (an array) into an object
* @returns {Object} - Chart series object
*/
const generateHeatMapData = function () {
const series = [];
obsArray.forEach(([obsTime, obsValue]) => {
series.push({
x: obsTime.slice(0, -1), // remove trailing "Z" from timestamp
y: obsValue,
});
});
return series;
};
const data = [
{
name: CHART_HEATMAP_NAME_SERIES_1,
data: generateHeatMapData(obsArray),
},
// {
// name: CHART_HEATMAP_NAME_SERIES_2,
// data: generateHeatMapData(obsArray),
// },
];
// Constants for our data range
const LOW_FROM = 65;
const LOW_TO = 70;
const MEDIUM_FROM = 70;
const MEDIUM_TO = 75;
const HIGH_FROM = 75;
const HIGH_TO = 80;
const EXTREME_FROM = 80;
const EXTREME_TO = 85;
const options = {
series: data,
chart: {
height: 450,
type: "heatmap",
},
plotOptions: {
heatmap: {
shadeIntensity: 0.5,
radius: 0,
useFillColorAsStroke: true,
colorScale: {
ranges: [
{
from: null,
to: null,
name: "null",
color: "#525252",
},
{
from: LOW_FROM,
to: LOW_TO,
name: `${LOW_FROM}°C`,
color: "#1a9641",
},
{
from: MEDIUM_FROM,
to: MEDIUM_TO,
name: `${MEDIUM_FROM}°C`,
color: "#a6d96a",
},
{
from: HIGH_FROM,
to: HIGH_TO,
name: `${HIGH_FROM}°C`,
color: "#fdae61",
},
{
from: EXTREME_FROM,
to: EXTREME_TO,
name: `${EXTREME_FROM}°C`,
color: "#d7191c",
},
],
},
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 1,
},
title: {
text: CHART_HEATMAP_TITLE,
},
grid: {
padding: {
right: 20,
},
},
xaxis: {
type: "datetime",
// labels: {
// format: "MMM",
// },
},
tooltip: {
shared: false,
x: {
formatter: function (val) {
return new Date(val).toLocaleString();
},
},
y: {
formatter: function (val) {
if (val) {
return val.toFixed(2);
} else {
return "null";
}
},
},
},
// distributed: true,
};
const chart = new ApexCharts(
document.querySelector("#chart-heatmap"),
options
);
chart.render();
};
/** /**
* Draw a heatmap using Highcharts library * Draw a heatmap using Highcharts library
* @param {*} obsArray - Response from SensorThings API as array * @param {*} obsArray - Response from SensorThings API as array
...@@ -564,7 +200,6 @@ followNextLink( ...@@ -564,7 +200,6 @@ followNextLink(
console.log(err); console.log(err);
}) })
.then((observationArr) => { .then((observationArr) => {
// updateLineChartAC(chart1LineTitle, observationArr);
// drawHeatMapAC2(observationArr); // drawHeatMapAC2(observationArr);
drawHeatMapHC(observationArr); drawHeatMapHC(observationArr);
}); });
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