From 6ef23f979d81f67962e8c9a6b608ecf88afa55ef Mon Sep 17 00:00:00 2001 From: dqmrf Date: Tue, 30 Jun 2026 13:01:26 +0200 Subject: [PATCH 1/3] H17: Create chart with csv data --- .../highcharts/17-data-module/index.html | 13 +- .../highcharts/17-data-module/main.js | 138 +++++++++++++++++- 2 files changed, 145 insertions(+), 6 deletions(-) diff --git a/highcharts-api/highcharts/17-data-module/index.html b/highcharts-api/highcharts/17-data-module/index.html index 7b632bd..6d57cf5 100644 --- a/highcharts-api/highcharts/17-data-module/index.html +++ b/highcharts-api/highcharts/17-data-module/index.html @@ -2,11 +2,14 @@ - - - + + + - + + + + @@ -24,4 +27,4 @@ - \ No newline at end of file + diff --git a/highcharts-api/highcharts/17-data-module/main.js b/highcharts-api/highcharts/17-data-module/main.js index fd5f0a2..2e86091 100644 --- a/highcharts-api/highcharts/17-data-module/main.js +++ b/highcharts-api/highcharts/17-data-module/main.js @@ -1 +1,137 @@ -const data = document.getElementById('csv').innerHTML; \ No newline at end of file +const data = document.getElementById('csv').innerHTML; +const T_UNITS = [ 'C', 'F' ]; +let currentTUnit = 1; + +const toMinutes = value => { + const [h, m] = value.split(':').map(Number); + return h * 60 + m; +}; + +const toTimeStr = minutes => { + const h = Math.floor(minutes / 60), + m = minutes % 60; + const toStr = v => String(v).padStart(2, '0'); + return `${toStr(h)}:${toStr(m)}`; +}; + +const chart = Highcharts.chart('container', { + chart: { + events: { + load() { + const chart = this; + + chart.tUnitSwitchBtn = chart.renderer + .button(T_UNITS[currentTUnit], 0, 0, function() { + const temperatureSeries = []; + chart.series.forEach(s => { + if (s.name === 'tempC') temperatureSeries[0] = s; + if (s.name === 'tempF') temperatureSeries[1] = s; + }); + + temperatureSeries[currentTUnit].hide(); + + currentTUnit ^= 1; + + this.attr({ + text: T_UNITS[currentTUnit] + }); + chart.yAxis[0].axisTitle.attr({ + text: T_UNITS[currentTUnit] + }); + + temperatureSeries[currentTUnit].show(); + }) + .add(); + } + } + }, + title: { + text: 'Temperature' + }, + yAxis: [{ + title: { text: T_UNITS[currentTUnit] }, + height: '45%', + lineWidth: 2, + labels: { + formatter() { + return this.value + '°' + T_UNITS[currentTUnit]; + } + } + }, { + title: { text: 'Rainfall' }, + height: '45%', + top: '55%', + offset: 0, + lineWidth: 2, + max: 24 * 60, + tickInterval: 60, + labels: { + formatter() { + return toTimeStr(this.value); + } + } + }], + legend: { + enabled: false + }, + data: { + csv: data, + firstRowAsNames: true, + itemDelimiter: ',', + parsed(columns) { + columns.forEach(col => { + const colName = col[0]; + if (colName === 'rainStart' || colName === 'rainEnd') { + for (let i = 1; i < col.length; i++) { + col[i] = toMinutes(col[i]); + } + } + }); + }, + complete(options) { + let tempF = { + visible: T_UNITS[currentTUnit] === 'F' + }; + let tempC = { + visible: T_UNITS[currentTUnit] === 'C' + }; + let rainfall = { + yAxis: 1, + type: 'columnrange', + name: 'rainfall', + pointStart: 0, + data: [] + }; + + options.series.forEach(s => { + switch (s.name) { + case 'tempC': + tempC = { ...tempC, ...s }; + break; + + case 'tempF': + tempF = { ...tempF, ...s }; + break; + + case 'rainStart': + rainfall.pointStart = s.pointStart; + s.data.forEach((data, i) => { + rainfall.data[i] ||= []; + rainfall.data[i][0] = data[0]; + rainfall.data[i][1] = data[1]; + }); + break; + + case 'rainEnd': + s.data.forEach((data, i) => { + rainfall.data[i] ||= []; + rainfall.data[i][2] = data[1]; + }); + break; + } + }); + + options.series = [ tempC, tempF, rainfall ]; + } + } +}); From 386602a7e78b218539b793ce8f6580b437dd0702 Mon Sep 17 00:00:00 2001 From: dqmrf Date: Thu, 2 Jul 2026 08:44:50 +0200 Subject: [PATCH 2/3] H17: Fix columnrange tooltip, remove yAxis[1] max and tickInterval --- highcharts-api/highcharts/17-data-module/main.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/highcharts-api/highcharts/17-data-module/main.js b/highcharts-api/highcharts/17-data-module/main.js index 2e86091..515b9e3 100644 --- a/highcharts-api/highcharts/17-data-module/main.js +++ b/highcharts-api/highcharts/17-data-module/main.js @@ -63,8 +63,6 @@ const chart = Highcharts.chart('container', { top: '55%', offset: 0, lineWidth: 2, - max: 24 * 60, - tickInterval: 60, labels: { formatter() { return toTimeStr(this.value); @@ -100,7 +98,15 @@ const chart = Highcharts.chart('container', { type: 'columnrange', name: 'rainfall', pointStart: 0, - data: [] + data: [], + tooltip: { + pointFormatter() { + return ` + ● + ${this.series.name}: ${toTimeStr(this.low)} – ${toTimeStr(this.high)}
+ `; + } + } }; options.series.forEach(s => { From 592f0a65d76d73bbe8fb9b30d21f82c7713bc99b Mon Sep 17 00:00:00 2001 From: dqmrf Date: Sat, 4 Jul 2026 15:46:48 +0200 Subject: [PATCH 3/3] H17: Minor code improvements --- .../highcharts/17-data-module/main.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/highcharts-api/highcharts/17-data-module/main.js b/highcharts-api/highcharts/17-data-module/main.js index 515b9e3..778b9f9 100644 --- a/highcharts-api/highcharts/17-data-module/main.js +++ b/highcharts-api/highcharts/17-data-module/main.js @@ -29,17 +29,19 @@ const chart = Highcharts.chart('container', { }); temperatureSeries[currentTUnit].hide(); - currentTUnit ^= 1; + temperatureSeries[currentTUnit].show(); - this.attr({ - text: T_UNITS[currentTUnit] - }); - chart.yAxis[0].axisTitle.attr({ - text: T_UNITS[currentTUnit] - }); + this.attr({ text: T_UNITS[currentTUnit] }); - temperatureSeries[currentTUnit].show(); + chart.yAxis[0].update({ + title: { + text: T_UNITS[currentTUnit] + }, + labels: { + format: `{value}°${T_UNITS[currentTUnit]}` + } + }); }) .add(); } @@ -53,9 +55,7 @@ const chart = Highcharts.chart('container', { height: '45%', lineWidth: 2, labels: { - formatter() { - return this.value + '°' + T_UNITS[currentTUnit]; - } + format: `{value}°${T_UNITS[currentTUnit]}` } }, { title: { text: 'Rainfall' },