Skip to content

GitLab

Commit 0c220981 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Edit function: draw scatter plot 

Add parameters to function that hold information about the two series.

Remove hardcoded arrays used for testing.
parent e9ba3745
Hide whitespace changes
Inline Side-by-side
public/js/appChart.js
View file @ 0c220981
......@@ -375,9 +375,9 @@ const drawHeatMapHC = function (
/**
* Convert the observations' phenomenonTime from an ISO 8601 string to Unix epoch
* @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a line chart
* @returns {Array} Array of formatted observations suitable for use in a line chart or scatter plot
*/
const formatSTAResponseForLineChart = function (obsArray) {
const formatSTAResponseForLineChartOrScatterPlot = function (obsArray) {
if (!obsArray) return;
const dataSTAFormatted = obsArray.map((result) => {
......@@ -577,215 +577,12 @@ const observationsPromisesRLArr = datastreamsUrlRLArr.map((obsUrl) =>
// console.log(x)
// );
const drawScatterPlotHC = function () {
// Ruecklauf
const ruecklaufArr = [
[1578193200000, 69.1999969482422],
[1578196800000, 69.1999969482422],
[1578200400000, 69.1999969482422],
[1578204000000, 69.1999969482422],
[1578207600000, 69.1999969482422],
[1578211200000, 69.1999969482422],
[1578214800000, 69.1999969482422],
[1578218400000, 69.1999969482422],
[1578222000000, 69.1999969482422],
[1578225600000, 69.1999969482422],
[1578229200000, 69.1999969482422],
[1578232800000, 69.1999969482422],
[1578236400000, 69.1999969482422],
[1578240000000, 69.1999969482422],
[1578243600000, 69.1999969482422],
[1578247200000, 69.1999969482422],
[1578250800000, 69.1999969482422],
[1578254400000, 69.1999969482422],
[1578258000000, 69.1999969482422],
[1578261600000, 69.1999969482422],
[1578265200000, 69.1999969482422],
[1578268800000, 69.1999969482422],
[1578272400000, 69.1999969482422],
[1578276000000, 69.1999969482422],
[1578279600000, 69.1999969482422],
[1578283200000, 69.1999969482422],
[1578286800000, 69.1999969482422],
[1578290400000, 69.1999969482422],
[1578294000000, 69.1999969482422],
[1578297600000, 69.1999969482422],
[1578301200000, 69.1999969482422],
[1578304800000, 69.1999969482422],
[1578308400000, 69.1999969482422],
[1578312000000, 69.1999969482422],
[1578315600000, 69.1999969482422],
[1578319200000, 69.1999969482422],
[1578322800000, 69.1999969482422],
[1578326400000, 69.1999969482422],
[1578330000000, 69.1999969482422],
[1578333600000, 69.1999969482422],
[1578337200000, 69.1999969482422],
[1578340800000, 69.1999969482422],
[1578344400000, 69.1999969482422],
[1578348000000, 69.1999969482422],
[1578351600000, 70.3556109079997],
[1578355200000, 76.920997634146],
[1578358800000, 79.4292947098697],
[1578362400000, 79.2650916245309],
[1578366000000, 79.6125674172757],
[1578369600000, 79.0597236964905],
[1578373200000, 77.7484098868052],
[1578376800000, 77.1226613864899],
[1578380400000, 76.9194480415149],
[1578384000000, 78.0028471359237],
[1578387600000, 77.1535494270819],
[1578391200000, 75.0470741498029],
[1578394800000, 74.679502580818],
[1578398400000, 73.6077361986314],
[1578402000000, 72.5580677314758],
[1578405600000, 72.3134755830553],
[1578409200000, 73.2778338997311],
[1578412800000, 73.7656394293467],
[1578416400000, 74.4736907299466],
[1578420000000, 74.046935040758],
[1578423600000, 73.4957105572807],
[1578427200000, 73.9627712815163],
[1578430800000, 74.0438044241729],
[1578434400000, 73.3727496036106],
[1578438000000, 73.1666655679279],
[1578441600000, 73.3418058388816],
[1578445200000, 73.6250001589457],
[1578448800000, 73.829112378629],
[1578452400000, 74.564083528116],
[1578456000000, 75.5183061171072],
[1578459600000, 77.3372781058983],
[1578463200000, 78.0196371225993],
[1578466800000, 77.6398578971368],
[1578470400000, 78.5464104081542],
[1578474000000, 78.7977605936686],
[1578477600000, 76.0006624035588],
[1578481200000, 74.818987728345],
[1578484800000, 72.7776491559135],
[1578488400000, 71.1266380795161],
[1578492000000, 71.3866485616896],
[1578495600000, 72.1584558128357],
[1578499200000, 72.7288795283423],
[1578502800000, 73.2401491424669],
[1578506400000, 72.613320930343],
[1578510000000, 71.7903886201647],
[1578513600000, 71.4483344078064],
[1578517200000, 71.8162703686467],
[1578520800000, 71.3690680013303],
[1578524400000, 70.6132688085203],
[1578528000000, 69.9669739277875],
[1578531600000, 69.2502318650422],
[1578535200000, 68.8407318482576],
[1578538800000, 71.4223982252898],
[1578542400000, 68.8941290716666],
[1578546000000, 71.8311421724037],
[1578549600000, 72.5245706435945],
];
// Power
const powerArr = [
[1578193200000, 0],
[1578196800000, 0],
[1578200400000, 0],
[1578204000000, 0],
[1578207600000, 0],
[1578211200000, 0],
[1578214800000, 0],
[1578218400000, 0],
[1578222000000, 0],
[1578225600000, 0],
[1578229200000, 0],
[1578232800000, 0],
[1578236400000, 0],
[1578240000000, 0],
[1578243600000, 0],
[1578247200000, 0],
[1578250800000, 0],
[1578254400000, 0],
[1578258000000, 0],
[1578261600000, 0],
[1578265200000, 0],
[1578268800000, 0],
[1578272400000, 0],
[1578276000000, 0],
[1578279600000, 0],
[1578283200000, 0],
[1578286800000, 0],
[1578290400000, 0],
[1578294000000, 0],
[1578297600000, 0],
[1578301200000, 0],
[1578304800000, 0],
[1578308400000, 0],
[1578312000000, 0],
[1578315600000, 0],
[1578319200000, 0],
[1578322800000, 0],
[1578326400000, 0],
[1578330000000, 0],
[1578333600000, 0],
[1578337200000, 0],
[1578340800000, 0],
[1578344400000, 0],
[1578348000000, 0],
[1578351600000, 0.831280025800069],
[1578355200000, 27.4361266860337],
[1578358800000, 4.02296011930285],
[1578362400000, 5.46578637448993],
[1578366000000, 189.045738115567],
[1578369600000, 262.879154692536],
[1578373200000, 182.996291840137],
[1578376800000, 253.720326864073],
[1578380400000, 266.71791350888],
[1578384000000, 258.650130305165],
[1578387600000, 256.817462126146],
[1578391200000, 251.198874591439],
[1578394800000, 245.782954276794],
[1578398400000, 225.835229413786],
[1578402000000, 191.164833256192],
[1578405600000, 189.317473084174],
[1578409200000, 160.866751228135],
[1578412800000, 165.104705085896],
[1578416400000, 185.380724406267],
[1578420000000, 6.318082232318],
[1578423600000, 22.6244981930396],
[1578427200000, 0.125080846609247],
[1578430800000, 0.858333364129066],
[1578434400000, 3.15562303745482],
[1578438000000, 1.73965485449897],
[1578441600000, 3.73938900530338],
[1578445200000, 0.641666680574417],
[1578448800000, 1.64397225697835],
[1578452400000, 14.7165156847371],
[1578456000000, 6.7406491904815],
[1578459600000, 257.018884414906],
[1578463200000, 282.409075120573],
[1578466800000, 284.999958205159],
[1578470400000, 291.20836768991],
[1578474000000, 285.753944205729],
[1578477600000, 248.43810322171],
[1578481200000, 227.135268204399],
[1578484800000, 182.10778157076],
[1578488400000, 169.076414526325],
[1578492000000, 160.098294117384],
[1578495600000, 149.832191919638],
[1578499200000, 195.966023142751],
[1578502800000, 159.01891281008],
[1578506400000, 3.94323859943668],
[1578510000000, 9.29238140483663],
[1578513600000, 4.09348021179692],
[1578517200000, 0],
[1578520800000, 0],
[1578524400000, 0],
[1578528000000, 0],
[1578531600000, 0],
[1578535200000, 0],
[1578538800000, 154.315364068476],
[1578542400000, 193.405831769548],
[1578546000000, 136.484141248209],
[1578549600000, 209.041194383494],
];
const drawScatterPlotHC = function (
formattedObsArrayForSeriesOne,
formattedDatastreamMetadataSeriesOne = "",
formattedObsArrayForSeriesTwo,
formattedDatastreamMetadataSeriesTwo = ""
) {
const CHART_TITLE = "Height Versus Weight of 507 Individuals by Gender";
const CHART_SUBTITLE = "Source: Heinz 2003";
......@@ -901,7 +698,7 @@ const drawScatterPlotHC = function () {
{
name: SERIES_1_NAME,
color: SERIES_1_SYMBOL_COLOR,
data: ruecklaufArr,
data: formattedObsArrayForSeriesOne,
tooltip: {
valueSuffix: ` ${SERIES_1_SYMBOL}`,
},
......@@ -909,7 +706,7 @@ const drawScatterPlotHC = function () {
{
name: SERIES_2_NAME,
color: SERIES_2_SYMBOL_COLOR,
data: powerArr,
data: formattedObsArrayForSeriesTwo,
// need this property for the dual y-axes to work
// defines the y-axis that this series refers to
yAxis: 1,
......@@ -921,7 +718,78 @@ const drawScatterPlotHC = function () {
});
};
drawScatterPlotHC();
(async () => {
const DATASTREAM_ID_SERIES_1 = getDatastreamIdFromBuildingNumber(
"weather_station_521",
"outside_temp",
"60min"
);
const URL_DATASTREAM_SERIES_1 = getDatastreamUrl(
BASE_URL,
DATASTREAM_ID_SERIES_1
);
const URL_OBSERVATIONS_SERIES_1 = getObservationsUrl(
BASE_URL,
DATASTREAM_ID_SERIES_1
);
const DATASTREAM_ID_SERIES_2 = getDatastreamIdFromBuildingNumber(
"225",
"vl",
"60min"
);
const URL_DATASTREAM_SERIES_2 = getDatastreamUrl(
BASE_URL,
DATASTREAM_ID_SERIES_2
);
const URL_OBSERVATIONS_SERIES_2 = getObservationsUrl(
BASE_URL,
DATASTREAM_ID_SERIES_2
);
// Create promises
const promiseDatastreamMetadataSeries1 = getDatastreamMetadata(
URL_DATASTREAM_SERIES_1
);
const promiseCombinedObservationsSeries1 =
getCombinedObservationsFromAllNextLinks(
axiosGetRequest(URL_OBSERVATIONS_SERIES_1, QUERY_PARAMS_COMBINED)
);
const promiseDatastreamMetadataSeries2 = getDatastreamMetadata(
URL_DATASTREAM_SERIES_2
);
const promiseCombinedObservationsSeries2 =
getCombinedObservationsFromAllNextLinks(
axiosGetRequest(URL_OBSERVATIONS_SERIES_2, QUERY_PARAMS_COMBINED)
);
// Pass promises to our async function
const metadataPlusObservationsSeries1 =
await getMetadataPlusObservationsForChart([
promiseCombinedObservationsSeries1,
promiseDatastreamMetadataSeries1,
]);
const metadataPlusObservationsSeries2 =
await getMetadataPlusObservationsForChart([
promiseCombinedObservationsSeries2,
promiseDatastreamMetadataSeries2,
]);
// Extract the metadata and the observations from resulting arrays
const combinedObsSeries1 = metadataPlusObservationsSeries1[0];
const datastreamMetadataSeries1 = metadataPlusObservationsSeries1[1];
const combinedObsSeries2 = metadataPlusObservationsSeries2[0];
const datastreamMetadataSeries2 = metadataPlusObservationsSeries2[1];
drawScatterPlotHC(
formatSTAResponseForLineChartOrScatterPlot(combinedObsSeries1),
formatDatastreamMetadataForChart(datastreamMetadataSeries1),
formatSTAResponseForLineChartOrScatterPlot(combinedObsSeries2),
formatDatastreamMetadataForChart(datastreamMetadataSeries2)
);
})();
export {
BASE_URL,
......@@ -935,7 +803,7 @@ export {
formatDatastreamMetadataForChart,
formatSTAResponseForHeatMap,
drawHeatMapHC,
formatSTAResponseForLineChart,
formatSTAResponseForLineChartOrScatterPlot,
drawLineChartHC,
getCombinedObservationsFromAllNextLinks,
getMetadataPlusObservationsForChart,
......
public/js/dropDownList.js
View file @ 0c220981
......@@ -11,7 +11,7 @@ import {
formatDatastreamMetadataForChart,
formatSTAResponseForHeatMap,
drawHeatMapHC,
formatSTAResponseForLineChart,
formatSTAResponseForLineChartOrScatterPlot,
drawLineChartHC,
getCombinedObservationsFromAllNextLinks,
getMetadataPlusObservationsForChart,
......@@ -306,7 +306,7 @@ const selectChartTypeFromDropDown = async function () {
if (selectedChartType === "Line") {
drawLineChartHC(
formatSTAResponseForLineChart(combinedObs),
formatSTAResponseForLineChartOrScatterPlot(combinedObs),
formatDatastreamMetadataForChart(datastreamMetadata)
);
} else if (selectedChartType === "Heatmap") {
......
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