From 1a8e15bbf75f904f2f728176cd6cdd32220a53e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Thu, 8 Dec 2022 14:40:05 +0100 Subject: [PATCH 1/2] Created chart (first attempt) --- .../highcharts/3-stacked-bar/index.html | 6 + .../highcharts/3-stacked-bar/main.js | 130 ++++++++++++++++++ 2 files changed, 136 insertions(+) diff --git a/highcharts-api/highcharts/3-stacked-bar/index.html b/highcharts-api/highcharts/3-stacked-bar/index.html index 6c800fd..22c7be5 100644 --- a/highcharts-api/highcharts/3-stacked-bar/index.html +++ b/highcharts-api/highcharts/3-stacked-bar/index.html @@ -8,6 +8,12 @@ + diff --git a/highcharts-api/highcharts/3-stacked-bar/main.js b/highcharts-api/highcharts/3-stacked-bar/main.js index e69de29..7937291 100644 --- a/highcharts-api/highcharts/3-stacked-bar/main.js +++ b/highcharts-api/highcharts/3-stacked-bar/main.js @@ -0,0 +1,130 @@ +Highcharts.chart('container', { + chart: { + type: 'bar', + marginTop: 50, + + events: { + load() { + const chart = this; + + //Rendering additional texts + chart.renderer.text('Issue', 65, 35).add(); + chart.renderer.text('Record count', chart.plotLeft + 15, 35).add(); + + chart.actionsText = chart.renderer.text('Actions', chart.plotWidth, 35).add(); + + //Rendering 'How to fix buttons' + const axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); + + chart.buttons = Array.from({ length: chart.yAxis[0].series.length }, () => 0); + chart.yAxis[0].series.forEach((_, ind) => { + chart.buttons[ind] = chart.renderer.button('How to fix', chart.plotWidth, chart.plotTop + axisHeight * (ind * 4 + 1) / 4, + () => console.log('Button clicked!')).add(); + }); + + //Creating space for buttons + chart.yAxis[0].update({ + max: chart.yAxis[0].dataMax * 1.75 + }); + + //Calculating sums for each category in xAxis + let sumTable = Array.from({ length: chart.yAxis[0].series.length }, () => 0); + chart.yAxis[0].series.forEach(serie => { + serie.yData.forEach((value, index) => sumTable[index] += value); + }); + + //Adding dataLabels based on sumTable + chart.xAxis[0].series[0].data.forEach((serie, index) => serie.update({ + dataLabels: [{ + inside: 'false', + align: 'right', + x: 50, + format: `${Math.floor(sumTable[index] / 1000)} K` + }] + })); + }, + + render() { + const chart = this; + + const axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); + + if(chart.actionsText) { + chart.actionsText.attr({ + x: chart.plotWidth + }); + } + + chart.yAxis[0].series.forEach((_, ind) => { + if(chart.buttons[ind]) { + chart.buttons[ind].attr({ + x: chart.plotWidth, + y: chart.plotTop + axisHeight * (ind * 4 + 1) / 4 + }); + } + }); + } + } + }, + + title: { + text: '' + }, + + xAxis: { + categories: ['Data', 'Emails', 'Duplicates', 'Support'], + + tickWidth: 1, + tickLength: 100, + tickColor: 'gray', + gridLineColor: 'gray', + gridLineWidth: 1, + + lineWidth: 0, + lineColor: 'transparent' + }, + + yAxis: { + title: { + text: '' + }, + + labels: { + formatter() { + return this.value / 1000; + } + }, + + gridLineWidth: 0, + }, + + legend: { + enabled: false, + }, + + plotOptions: { + series: { + stacking: 'normal', + dataLabels: { + enabled: 'true', + formatter() { + return typeof this === 'object' ? '' : this; + } + } + }, + }, + + series: [{ + name: 'Tokyo', + data: [4000, 4590, 6580, 15000], + }, { + name: 'Warsaw', + data: [5325, 3421, 12321, 6321] + }, { + name: 'Budapest', + data: [5555, 1555, 8900, 5321] + }, { + name: 'London', + data: [3355, 15321, 8321, 9321] + }] +}); \ No newline at end of file From a498919be1e2433e30f6ab9d5fe871a823b6fd45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Szumi=C5=84ski?= Date: Wed, 14 Dec 2022 10:43:13 +0100 Subject: [PATCH 2/2] Resolved code issues --- .../highcharts/3-stacked-bar/index.html | 6 -- .../highcharts/3-stacked-bar/main.js | 72 +++++++------------ 2 files changed, 25 insertions(+), 53 deletions(-) diff --git a/highcharts-api/highcharts/3-stacked-bar/index.html b/highcharts-api/highcharts/3-stacked-bar/index.html index 22c7be5..6c800fd 100644 --- a/highcharts-api/highcharts/3-stacked-bar/index.html +++ b/highcharts-api/highcharts/3-stacked-bar/index.html @@ -8,12 +8,6 @@ - diff --git a/highcharts-api/highcharts/3-stacked-bar/main.js b/highcharts-api/highcharts/3-stacked-bar/main.js index 7937291..c6a08ae 100644 --- a/highcharts-api/highcharts/3-stacked-bar/main.js +++ b/highcharts-api/highcharts/3-stacked-bar/main.js @@ -5,7 +5,8 @@ Highcharts.chart('container', { events: { load() { - const chart = this; + const chart = this, + axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); //Rendering additional texts chart.renderer.text('Issue', 65, 35).add(); @@ -14,55 +15,30 @@ Highcharts.chart('container', { chart.actionsText = chart.renderer.text('Actions', chart.plotWidth, 35).add(); //Rendering 'How to fix buttons' - const axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); - - chart.buttons = Array.from({ length: chart.yAxis[0].series.length }, () => 0); + chart.buttons = []; chart.yAxis[0].series.forEach((_, ind) => { - chart.buttons[ind] = chart.renderer.button('How to fix', chart.plotWidth, chart.plotTop + axisHeight * (ind * 4 + 1) / 4, - () => console.log('Button clicked!')).add(); + chart.buttons.push(chart.renderer.button('How to fix', chart.plotWidth, chart.plotTop + axisHeight * (ind * 4 + 1) / 4, + () => console.log('Button clicked!'), { stroke: 'blue', 'stroke-width': 2 }).add()); }); //Creating space for buttons chart.yAxis[0].update({ max: chart.yAxis[0].dataMax * 1.75 }); - - //Calculating sums for each category in xAxis - let sumTable = Array.from({ length: chart.yAxis[0].series.length }, () => 0); - chart.yAxis[0].series.forEach(serie => { - serie.yData.forEach((value, index) => sumTable[index] += value); - }); - - //Adding dataLabels based on sumTable - chart.xAxis[0].series[0].data.forEach((serie, index) => serie.update({ - dataLabels: [{ - inside: 'false', - align: 'right', - x: 50, - format: `${Math.floor(sumTable[index] / 1000)} K` - }] - })); }, render() { - const chart = this; - - const axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); + const chart = this, + axisHeight = chart.xAxis[0].toPixels(1) - chart.xAxis[0].toPixels(0); - if(chart.actionsText) { - chart.actionsText.attr({ - x: chart.plotWidth - }); - } - - chart.yAxis[0].series.forEach((_, ind) => { - if(chart.buttons[ind]) { - chart.buttons[ind].attr({ - x: chart.plotWidth, - y: chart.plotTop + axisHeight * (ind * 4 + 1) / 4 - }); - } + chart.actionsText.attr({ + x: chart.plotWidth }); + + chart.buttons.forEach((button, ind) => button.attr({ + x: chart.plotWidth, + y: chart.plotTop + axisHeight * (ind * 4 + 1) / 4 + })); } } }, @@ -94,26 +70,28 @@ Highcharts.chart('container', { return this.value / 1000; } }, + + stackLabels: { + enabled: true, + formatter() { + return Math.floor(this.total / 1000) + ' K'; + } + }, gridLineWidth: 0, }, - legend: { - enabled: false, - }, plotOptions: { series: { stacking: 'normal', - dataLabels: { - enabled: 'true', - formatter() { - return typeof this === 'object' ? '' : this; - } - } }, }, + legend: { + enabled: false + }, + series: [{ name: 'Tokyo', data: [4000, 4590, 6580, 15000],