Skip to content
GitLab
An error occurred while fetching the assigned milestone of the selected merge_request.

Add bare bones scatter plot chart

Merged Pithon Kabiro requested to merge wip_scatter-plot-1 into master
Compare
and
2 files
+ 371
- 0
publ‎ic/js‎
appCh‎art.js‎ +346 -0
index‎.html‎ +25 -0
public/js/appChart.js
+ 346
- 0
@@ -573,6 +573,352 @@ 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 CHART_TITLE = "Height Versus Weight of 507 Individuals by Gender";
const CHART_SUBTITLE = "Source: Heinz 2003";
const X_AXIS_TITLE = "Height (cm)";
const SERIES_1_NAME = "Rücklauftemp";
const SERIES_1_SYMBOL_COLOR = "rgba(119, 152, 191, .5)";
const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color for a more "intense" color
const SERIES_1_SYMBOL = "°C";
const SERIES_2_NAME = "Power";
const SERIES_2_SYMBOL_COLOR = "rgba(223, 83, 83, .5)";
const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color for a more "intense" color
const SERIES_2_SYMBOL = "kW";
Highcharts.chart("chart-scatter-plot", {
chart: {
type: "scatter",
zoomType: "xy",
},
title: {
text: CHART_TITLE,
},
subtitle: {
text: CHART_SUBTITLE,
},
xAxis: {
title: {
enabled: true,
text: X_AXIS_TITLE,
},
type: "datetime",
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: [
{
// Primary yAxis
labels: {
format: `{value} ${SERIES_1_SYMBOL}`,
style: {
color: SERIES_1_TEXT_COLOR,
},
},
title: {
text: SERIES_1_NAME,
style: {
color: SERIES_1_TEXT_COLOR,
},
},
},
{
// Secondary yAxis
title: {
text: SERIES_2_NAME,
style: {
color: SERIES_2_TEXT_COLOR,
},
},
labels: {
format: `{value} ${SERIES_2_SYMBOL}`,
style: {
color: SERIES_2_TEXT_COLOR,
},
},
opposite: true,
},
],
legend: {
layout: "vertical",
align: "left",
verticalAlign: "top",
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1,
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: "rgb(100,100,100)",
},
},
},
states: {
hover: {
marker: {
enabled: false,
},
},
},
tooltip: {
headerFormat: "{point.x:%e %b, %Y %H:%M:%S}: <b>{point.y}</b>",
pointFormat: "{point.x} cm, {point.y} kg",
valueDecimals: 2,
},
},
},
series: [
{
name: SERIES_1_NAME,
color: SERIES_1_SYMBOL_COLOR,
data: ruecklaufArr,
tooltip: {
valueSuffix: ` ${SERIES_1_SYMBOL}`,
},
},
{
name: SERIES_2_NAME,
color: SERIES_2_SYMBOL_COLOR,
data: powerArr,
// need this property for the dual y-axes to work
// defines the y-axis that this series refers to
yAxis: 1,
tooltip: {
valueSuffix: ` ${SERIES_2_SYMBOL}`,
},
},
],
});
};
drawScatterPlotHC();
export {
BASE_URL,
QUERY_PARAMS_COMBINED,
index.html
+ 25
- 0
@@ -210,6 +210,31 @@
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<!-- No free scatter plot icon available; use this instead -->
<i class="fas fa-braille mr-1"></i>
Scatter Plot Example
</div>
<div class="card-body">
<div id="chart-scatter-plot" width="100%" height="40"></div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="card mb-4">
<div class="card-header">
<i class="far fa-chart-bar mr-1"></i>
Bar Chart Example
</div>
<div class="card-body">
<div id="chart-bar" width="100%" height="40"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal