How to show sum of all visible series' data dynamically
How can I display SUM of all visible series' data in highchart at any given time? For example given this chart:
https://jsfiddle.net/8xmw2nj6/2/
It shows a simple stacked column graph with drilldown. What I want is that by default it should show '14879' value. As visible series/drilldown change, it should update this value. This value can be shown in graph title for instance.
Any idea on how to accomplish this?
Example of why it is important:
Column graph that shows 12 months breakdown (in a given year) of total sales. We can see the sales per month, but it is important to know the total too. Highlight only series of a particular customer - again, we want to know the total value of the series too, not only the breakdown per month.
I know we can set a title of a chart with setTitle:
chart.setTitle(total);
But I have no idea where to include this functionality and how to calculate the total of only visible series.
highcharts
asked Nov 20 '18 at 10:37
emihir0
4731521
add a comment |
How can I display SUM of all visible series' data in highchart at any given time? For example given this chart:
https://jsfiddle.net/8xmw2nj6/2/
It shows a simple stacked column graph with drilldown. What I want is that by default it should show '14879' value. As visible series/drilldown change, it should update this value. This value can be shown in graph title for instance.
Any idea on how to accomplish this?
Example of why it is important:
Column graph that shows 12 months breakdown (in a given year) of total sales. We can see the sales per month, but it is important to know the total too. Highlight only series of a particular customer - again, we want to know the total value of the series too, not only the breakdown per month.
I know we can set a title of a chart with setTitle:
chart.setTitle(total);
But I have no idea where to include this functionality and how to calculate the total of only visible series.
highcharts
asked Nov 20 '18 at 10:37
emihir0
4731521
add a comment |
How can I display SUM of all visible series' data in highchart at any given time? For example given this chart:
https://jsfiddle.net/8xmw2nj6/2/
It shows a simple stacked column graph with drilldown. What I want is that by default it should show '14879' value. As visible series/drilldown change, it should update this value. This value can be shown in graph title for instance.
Any idea on how to accomplish this?
Example of why it is important:
Column graph that shows 12 months breakdown (in a given year) of total sales. We can see the sales per month, but it is important to know the total too. Highlight only series of a particular customer - again, we want to know the total value of the series too, not only the breakdown per month.
I know we can set a title of a chart with setTitle:
chart.setTitle(total);
But I have no idea where to include this functionality and how to calculate the total of only visible series.
highcharts
asked Nov 20 '18 at 10:37
emihir0
4731521
How can I display SUM of all visible series' data in highchart at any given time? For example given this chart:
https://jsfiddle.net/8xmw2nj6/2/
It shows a simple stacked column graph with drilldown. What I want is that by default it should show '14879' value. As visible series/drilldown change, it should update this value. This value can be shown in graph title for instance.
Any idea on how to accomplish this?
Example of why it is important:
Column graph that shows 12 months breakdown (in a given year) of total sales. We can see the sales per month, but it is important to know the total too. Highlight only series of a particular customer - again, we want to know the total value of the series too, not only the breakdown per month.
I know we can set a title of a chart with setTitle:
chart.setTitle(total);
But I have no idea where to include this functionality and how to calculate the total of only visible series.
highcharts
highcharts
asked Nov 20 '18 at 10:37
emihir0
4731521
asked Nov 20 '18 at 10:37
emihir0
4731521
asked Nov 20 '18 at 10:37
emihir0
4731521
asked Nov 20 '18 at 10:37
emihir0
4731521
asked Nov 20 '18 at 10:37
emihir0
4731521
4731521
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can achieve what you are after by using the setTitle function and the render event like this:
chart: {
events: {
render: function() {
let series = this.series
let sum = 0
for(let i = 0; i < series.length; i++) {
if(series[i].visible){
for(let j = 0; j < series[i].data.length; j++) {
sum += series[i].data[j].y
}
}
}
this.setTitle({text: "Production Orders, sum: " + sum}, false, false)
}
}
},
This will calculate the sum of all visible series, at all times.
To format the number in the title you can use Highcharts.numberFormat(number, decimals [, decimalPoint] [, thousandsSep]) which returns a formated number as a string instead of the integer sum.
Working example: https://jsfiddle.net/ewolden/y03qjbhk/1/
API on render event: https://api.highcharts.com/highcharts/chart.events.render
answered Nov 20 '18 at 10:54
ewolden
4,12131125
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (this.setTitle...) bythis.subtitle.update({text: Highcharts.numberFormat(sum, 0)})- this will by default use the Highcharts' set decimalPoint and thousandsSep
– emihir0
Nov 20 '18 at 13:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391130%2fhow-to-show-sum-of-all-visible-series-data-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can achieve what you are after by using the setTitle function and the render event like this:
chart: {
events: {
render: function() {
let series = this.series
let sum = 0
for(let i = 0; i < series.length; i++) {
if(series[i].visible){
for(let j = 0; j < series[i].data.length; j++) {
sum += series[i].data[j].y
}
}
}
this.setTitle({text: "Production Orders, sum: " + sum}, false, false)
}
}
},
This will calculate the sum of all visible series, at all times.
To format the number in the title you can use Highcharts.numberFormat(number, decimals [, decimalPoint] [, thousandsSep]) which returns a formated number as a string instead of the integer sum.
Working example: https://jsfiddle.net/ewolden/y03qjbhk/1/
API on render event: https://api.highcharts.com/highcharts/chart.events.render
answered Nov 20 '18 at 10:54
ewolden
4,12131125
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (this.setTitle...) bythis.subtitle.update({text: Highcharts.numberFormat(sum, 0)})- this will by default use the Highcharts' set decimalPoint and thousandsSep
– emihir0
Nov 20 '18 at 13:12
add a comment |
You can achieve what you are after by using the setTitle function and the render event like this:
chart: {
events: {
render: function() {
let series = this.series
let sum = 0
for(let i = 0; i < series.length; i++) {
if(series[i].visible){
for(let j = 0; j < series[i].data.length; j++) {
sum += series[i].data[j].y
}
}
}
this.setTitle({text: "Production Orders, sum: " + sum}, false, false)
}
}
},
This will calculate the sum of all visible series, at all times.
To format the number in the title you can use Highcharts.numberFormat(number, decimals [, decimalPoint] [, thousandsSep]) which returns a formated number as a string instead of the integer sum.
Working example: https://jsfiddle.net/ewolden/y03qjbhk/1/
API on render event: https://api.highcharts.com/highcharts/chart.events.render
answered Nov 20 '18 at 10:54
ewolden
4,12131125
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (this.setTitle...) bythis.subtitle.update({text: Highcharts.numberFormat(sum, 0)})- this will by default use the Highcharts' set decimalPoint and thousandsSep
– emihir0
Nov 20 '18 at 13:12
add a comment |
You can achieve what you are after by using the setTitle function and the render event like this:
chart: {
events: {
render: function() {
let series = this.series
let sum = 0
for(let i = 0; i < series.length; i++) {
if(series[i].visible){
for(let j = 0; j < series[i].data.length; j++) {
sum += series[i].data[j].y
}
}
}
this.setTitle({text: "Production Orders, sum: " + sum}, false, false)
}
}
},
This will calculate the sum of all visible series, at all times.
To format the number in the title you can use Highcharts.numberFormat(number, decimals [, decimalPoint] [, thousandsSep]) which returns a formated number as a string instead of the integer sum.
Working example: https://jsfiddle.net/ewolden/y03qjbhk/1/
API on render event: https://api.highcharts.com/highcharts/chart.events.render
answered Nov 20 '18 at 10:54
ewolden
4,12131125
You can achieve what you are after by using the setTitle function and the render event like this:
chart: {
events: {
render: function() {
let series = this.series
let sum = 0
for(let i = 0; i < series.length; i++) {
if(series[i].visible){
for(let j = 0; j < series[i].data.length; j++) {
sum += series[i].data[j].y
}
}
}
this.setTitle({text: "Production Orders, sum: " + sum}, false, false)
}
}
},
This will calculate the sum of all visible series, at all times.
To format the number in the title you can use Highcharts.numberFormat(number, decimals [, decimalPoint] [, thousandsSep]) which returns a formated number as a string instead of the integer sum.
Working example: https://jsfiddle.net/ewolden/y03qjbhk/1/
API on render event: https://api.highcharts.com/highcharts/chart.events.render
answered Nov 20 '18 at 10:54
ewolden
4,12131125
edited Nov 20 '18 at 13:09
answered Nov 20 '18 at 10:54
ewolden
4,12131125
answered Nov 20 '18 at 10:54
ewolden
4,12131125
answered Nov 20 '18 at 10:54
ewolden
4,12131125
4,12131125
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (this.setTitle...) bythis.subtitle.update({text: Highcharts.numberFormat(sum, 0)})- this will by default use the Highcharts' set decimalPoint and thousandsSep
– emihir0
Nov 20 '18 at 13:12
add a comment |
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (this.setTitle...) bythis.subtitle.update({text: Highcharts.numberFormat(sum, 0)})- this will by default use the Highcharts' set decimalPoint and thousandsSep
– emihir0
Nov 20 '18 at 13:12
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
Just one question - how would you call a default number format function of HighCharts on the sum? That is, we can specify things like thousandsep and decimalPoint in settings, so I'd like to call the function to format the sum with these parameters in place.
– emihir0
Nov 20 '18 at 13:05
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
I have updated the answer to show how you can properly format the number now.
– ewolden
Nov 20 '18 at 13:10
1
1
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (
this.setTitle...) by this.subtitle.update({text: Highcharts.numberFormat(sum, 0)}) - this will by default use the Highcharts' set decimalPoint and thousandsSep– emihir0
Nov 20 '18 at 13:12
Thanks a lot! I've actually oped out to put the sum in subtitle, as it makes the most sense and looks nice by default. Replacing last line (
this.setTitle...) by this.subtitle.update({text: Highcharts.numberFormat(sum, 0)}) - this will by default use the Highcharts' set decimalPoint and thousandsSep– emihir0
Nov 20 '18 at 13:12
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391130%2fhow-to-show-sum-of-all-visible-series-data-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
