From 629f561b8e2f60cae4384dbc5b3821f76340c5c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Thu, 8 Dec 2022 12:01:23 +0100 Subject: [PATCH 1/4] Created a chart, first version of the solution --- .../highcharts/2-polar-rings/index.html | 8 +- .../highcharts/2-polar-rings/main.js | 91 +++++++++++++++++++ 2 files changed, 95 insertions(+), 4 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/index.html b/highcharts-api/highcharts/2-polar-rings/index.html index 6c800fd..7180f55 100644 --- a/highcharts-api/highcharts/2-polar-rings/index.html +++ b/highcharts-api/highcharts/2-polar-rings/index.html @@ -1,5 +1,5 @@ - + @@ -7,11 +7,11 @@ - +
+ - - \ No newline at end of file + diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index e69de29..2d780fd 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -0,0 +1,91 @@ +const getRandomData = (length) => Array.from({ length }, () => Math.floor(Math.random() * 10)); + +const chart = Highcharts.chart('container', { + chart: { + polar: true, + + events: { + load() { + const chart = this, + maxY = chart.yAxis[0].dataMax; + + chart.yAxis[0].update({ + max: maxY * 2, + plotLines: [{ + color: 'green', + value: 1.5 * maxY, + dashStyle: 'dash', + width: 2 + }, { + color: 'red', + value: 1.75 * maxY, + width: 1.5 + }] + }); + }, + + render() { + const chart = this; + + if(chart.circle) { + chart.circle.attr({ + x: chart.chartWidth / 2, + y: chart.plotHeight / 2 + chart.plotTop + }); + } else { + chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, 148).attr({ + fill: 'transparent', + stroke: 'dodgerblue', + 'stroke-width': 2 + }).add(); + } + }, + } + }, + + title: { + text: '' + }, + + yAxis: { + title: { + text: '' + } + }, + + xAxis: { + categories: ['Jan', ' Feb', 'Mar'] + }, + + pane: { + startAngle: 0, + endAngle: 360 + }, + + plotOptions: { + series: { + dataLabels: { + enabled: true, + formatter() { + return this.point.y === this.point.series.yAxis.dataMax ? 'max' : ''; + } + } + } + }, + + series: [{ + type: 'column', + name: 'Tokyo', + data: getRandomData(3) + }, { + type: 'column', + name: 'New York', + data: getRandomData(3) + }, { + type: 'column', + name: 'London', + data: getRandomData(3) + }] + +}); + From 9867af5b3f78054fd3d5e143cc3cfafbeb51783c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 14 Dec 2022 11:11:02 +0100 Subject: [PATCH 2/4] Updated chart radius & fixed small code issues --- highcharts-api/highcharts/2-polar-rings/main.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 2d780fd..4d86f12 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -33,7 +33,7 @@ const chart = Highcharts.chart('container', { y: chart.plotHeight / 2 + chart.plotTop }); } else { - chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, 148).attr({ + chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, chart.plotHeight * 0.4).attr({ fill: 'transparent', stroke: 'dodgerblue', 'stroke-width': 2 @@ -57,11 +57,6 @@ const chart = Highcharts.chart('container', { categories: ['Jan', ' Feb', 'Mar'] }, - pane: { - startAngle: 0, - endAngle: 360 - }, - plotOptions: { series: { dataLabels: { From c09c6ac38fb4c926e7f299f5e4a3368c2cdeb90a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 14 Dec 2022 12:57:43 +0100 Subject: [PATCH 3/4] Resolved issues after first code review --- highcharts-api/highcharts/2-polar-rings/main.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index 4d86f12..f8fa206 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -33,7 +33,7 @@ const chart = Highcharts.chart('container', { y: chart.plotHeight / 2 + chart.plotTop }); } else { - chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, chart.plotHeight * 0.4).attr({ + chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, chart.yAxis[0].toPixels(2 * chart.yAxis[0].dataMax, true) * 2).attr({ fill: 'transparent', stroke: 'dodgerblue', 'stroke-width': 2 @@ -47,12 +47,6 @@ const chart = Highcharts.chart('container', { text: '' }, - yAxis: { - title: { - text: '' - } - }, - xAxis: { categories: ['Jan', ' Feb', 'Mar'] }, From 560dae35e8af731afd17646e9263a6ebe526fd68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 14 Dec 2022 15:34:00 +0100 Subject: [PATCH 4/4] Resolved issues after second code review --- highcharts-api/highcharts/2-polar-rings/main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/highcharts-api/highcharts/2-polar-rings/main.js b/highcharts-api/highcharts/2-polar-rings/main.js index f8fa206..3514c36 100644 --- a/highcharts-api/highcharts/2-polar-rings/main.js +++ b/highcharts-api/highcharts/2-polar-rings/main.js @@ -25,15 +25,17 @@ const chart = Highcharts.chart('container', { }, render() { - const chart = this; + const chart = this, + radius = chart.yAxis[0].toPixels(2 * chart.yAxis[0].dataMax) * 2; if(chart.circle) { chart.circle.attr({ x: chart.chartWidth / 2, - y: chart.plotHeight / 2 + chart.plotTop + y: chart.plotHeight / 2 + chart.plotTop, + radius }); } else { - chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, chart.yAxis[0].toPixels(2 * chart.yAxis[0].dataMax, true) * 2).attr({ + chart.circle = chart.renderer.circle(chart.chartWidth / 2, chart.chartHeight / 2 - 20, radius).attr({ fill: 'transparent', stroke: 'dodgerblue', 'stroke-width': 2