From cc9eaedb01e39fbea24b841efe4e83fc6fa8dadf Mon Sep 17 00:00:00 2001 From: dqmrf Date: Thu, 2 Jul 2026 14:31:01 +0200 Subject: [PATCH 1/2] G02: Add gantt chart with Journeys Visualization --- .../02-journeys-visualization/index.html | 13 +- .../02-journeys-visualization/main.js | 132 +++++++++++++++--- 2 files changed, 120 insertions(+), 25 deletions(-) diff --git a/highcharts-api/highcharts-gantt/02-journeys-visualization/index.html b/highcharts-api/highcharts-gantt/02-journeys-visualization/index.html index d7cc960..f7a17cb 100644 --- a/highcharts-api/highcharts-gantt/02-journeys-visualization/index.html +++ b/highcharts-api/highcharts-gantt/02-journeys-visualization/index.html @@ -2,16 +2,19 @@ - - - + + + - + + + + -
+
diff --git a/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js b/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js index 301beae..8973713 100644 --- a/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js +++ b/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js @@ -1,22 +1,114 @@ -Highcharts.ganttChart('container', { - - title: { - text: 'Journeys (visualization)' - }, +const day = 1000 * 60 * 60 * 24; +const dateMin = Date.UTC(2024, 0, 1), + dateMax = Date.UTC(2024, 0, 8); - series: [{ - name: 'Journeys', - data: [{ - name: 'Cruises', - id: 'cruises', - start: Date.UTC(2024, 0, 1), - end: Date.UTC(2024, 0, 4) - }, { - name: 'Flights', - id: 'flights', - start: Date.UTC(2024, 0, 3), - end: Date.UTC(2024, 0, 7) - }] - }] - +Highcharts.ganttChart('container', { + title: { + text: 'Journeys (visualization)' + }, + chart: { + events: { + load() { + // Navigator doesn't display all data on start by default... + this.series.forEach(s => s.update({}, false)); + } + } + }, + xAxis: { + units: [['day']], + labels: { + formatter: function () { + return `Day ${Math.floor((this.value - dateMin) / day) + 1}`; + } + } + }, + navigator: { + enabled: true, + liveRedraw: false + }, + plotOptions: { + series: { + dataLabels: { + enabled: true, + format: `{point.options.label}` + }, + dragDrop: { + draggableX: true, + liveRedraw: false, + dragPrecisionX: day, + dragMinX: dateMin, + dragMaxX: dateMax, + } + } + }, + series: [{ + name: 'Journeys', + data: [{ + name: 'Cruises', + id: 'cruises', + start: Date.UTC(2024, 0, 1), + end: Date.UTC(2024, 0, 4) + }, { + name: 'Norway - England', + id: 'norway-england-cruise', + parent: 'cruises', + dependency: 'cruises', + start: Date.UTC(2024, 0, 2), + end: Date.UTC(2024, 0, 3) + }, { + name: 'Flights', + id: 'flights', + start: Date.UTC(2024, 0, 3), + end: Date.UTC(2024, 0, 7) + }, { + name: 'Domestic flights', + id: 'domestic-flights', + parent: 'flights', + start: Date.UTC(2024, 0, 4), + end: Date.UTC(2024, 0, 6) + }, { + name: 'Beijing - Hong Kong', + id: 'beijing-hongkong-flight', + parent: 'domestic-flights', + dependency: ['flights', 'domestic-flights'], + start: Date.UTC(2024, 0, 4), + end: Date.UTC(2024, 0, 5) + }, { + name: 'International flights', + id: 'international-flights', + parent: 'flights', + start: Date.UTC(2024, 0, 4), + end: Date.UTC(2024, 0, 7) + }, { + name: 'Norway - Brazil', + id: 'norway-brazil-flight', + label: 'Show full adventure', + drilldown: 'norway-brazil-flight-full', + parent: 'international-flights', + dependency: ['flights', 'international-flights'], + color: 'orange', + start: Date.UTC(2024, 0, 5), + end: Date.UTC(2024, 0, 8) + }] + }], + drilldown: { + series: [{ + showInNavigator: true, + name: 'Norway - Brazil full', + id: 'norway-brazil-flight-full', + data: [{ + name: 'Norway - Spain', + id: 'norway-spain-flight', + color: 'orange', + start: Date.UTC(2024, 0, 5), + end: Date.UTC(2024, 0, 6) + }, { + name: 'Spain - Brazil', + id: 'spain-brazil-flight', + color: 'orange', + start: Date.UTC(2024, 0, 6), + end: Date.UTC(2024, 0, 8) + }] + }] + } }); From e7b2e75930046748f150fa4386763108da5e58bf Mon Sep 17 00:00:00 2001 From: dqmrf Date: Wed, 8 Jul 2026 08:49:04 +0200 Subject: [PATCH 2/2] G02: Minor code changes & improvements --- .../02-journeys-visualization/main.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js b/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js index 8973713..76d7e16 100644 --- a/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js +++ b/highcharts-api/highcharts-gantt/02-journeys-visualization/main.js @@ -16,15 +16,12 @@ Highcharts.ganttChart('container', { }, xAxis: { units: [['day']], - labels: { - formatter: function () { - return `Day ${Math.floor((this.value - dateMin) / day) + 1}`; - } + dateTimeLabelFormats: { + day: 'Day %e' } }, navigator: { - enabled: true, - liveRedraw: false + enabled: true }, plotOptions: { series: { @@ -86,7 +83,10 @@ Highcharts.ganttChart('container', { drilldown: 'norway-brazil-flight-full', parent: 'international-flights', dependency: ['flights', 'international-flights'], - color: 'orange', + dragDrop: { + draggableX: false + }, + color: '#f5deb2', start: Date.UTC(2024, 0, 5), end: Date.UTC(2024, 0, 8) }] @@ -99,13 +99,13 @@ Highcharts.ganttChart('container', { data: [{ name: 'Norway - Spain', id: 'norway-spain-flight', - color: 'orange', + color: '#f5deb2', start: Date.UTC(2024, 0, 5), end: Date.UTC(2024, 0, 6) }, { name: 'Spain - Brazil', id: 'spain-brazil-flight', - color: 'orange', + color: '#f5deb2', start: Date.UTC(2024, 0, 6), end: Date.UTC(2024, 0, 8) }]