How to add a third set of data in a Highcharts bar graph
up vote
0
down vote
favorite
I'm making an angular web app, and I'm trying to render a bar graph with 3 different sets. I want to show 2 of the sets on the x-axis and y-axis, and the third one when you hover over each
According to the documentation, that seems to be the tooltip.
The documentation shows how to change each one manually, but I'm calling an API for data, so the tooltip has to be somewhat dynamic and not static.
Angular Component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { BuyerService, BuyerDetail } from '../buyer.service';
import { HttpResponse } from '@angular/common/http';
declare const Highcharts: any;
@Component({
selector: 'app-buyer-details',
templateUrl: './buyer-details.component.html',
styleUrls: ['./buyer-details.component.css']
})
export class DrinkerDetailsComponent implements OnInit {
buyerName: string;
buyerDetails: BuyerDetail;
constructor(
public buyerService: BuyerService,
private route: ActivatedRoute
) {
route.paramMap.subscribe((paramMap) => {
this.buyerName = paramMap.get('buyer');
this.buyerService.getBuyerSpendingDistribution(this.buyerName).subscribe(
data => {
const cars = ;
const years = ;
const counts = ;
data.forEach(buyer => {
cars.push(buyer.car_name);
years.push(buyer.year)
counts.push(buyer.total_per_year);
});
this.renderChart2(cars, years, counts);
}
);
});
}
renderChart2(cars: string, years: string, counts: string){
Highcharts.chart('bargraph2', {
chart: {
type: 'column'
},
title: {
text: 'Distribution of Amount Spent By Drinker By Bar'
},
xAxis: {
categories: years,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Dollars Spent'
}
},
labels: {
overflow: 'justify'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: counts,
}],
tooltip: {
formatter: function() {
// not sure what to put here.
}
}
})
}
}
How do I make it so the cars is the tooltip, where each car shows over it's correct bar on the bar graph?
javascript jquery angular highcharts
asked Nov 18 at 16:52
James Mitchell
74031331
add a comment |
up vote
0
down vote
favorite
I'm making an angular web app, and I'm trying to render a bar graph with 3 different sets. I want to show 2 of the sets on the x-axis and y-axis, and the third one when you hover over each
According to the documentation, that seems to be the tooltip.
The documentation shows how to change each one manually, but I'm calling an API for data, so the tooltip has to be somewhat dynamic and not static.
Angular Component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { BuyerService, BuyerDetail } from '../buyer.service';
import { HttpResponse } from '@angular/common/http';
declare const Highcharts: any;
@Component({
selector: 'app-buyer-details',
templateUrl: './buyer-details.component.html',
styleUrls: ['./buyer-details.component.css']
})
export class DrinkerDetailsComponent implements OnInit {
buyerName: string;
buyerDetails: BuyerDetail;
constructor(
public buyerService: BuyerService,
private route: ActivatedRoute
) {
route.paramMap.subscribe((paramMap) => {
this.buyerName = paramMap.get('buyer');
this.buyerService.getBuyerSpendingDistribution(this.buyerName).subscribe(
data => {
const cars = ;
const years = ;
const counts = ;
data.forEach(buyer => {
cars.push(buyer.car_name);
years.push(buyer.year)
counts.push(buyer.total_per_year);
});
this.renderChart2(cars, years, counts);
}
);
});
}
renderChart2(cars: string, years: string, counts: string){
Highcharts.chart('bargraph2', {
chart: {
type: 'column'
},
title: {
text: 'Distribution of Amount Spent By Drinker By Bar'
},
xAxis: {
categories: years,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Dollars Spent'
}
},
labels: {
overflow: 'justify'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: counts,
}],
tooltip: {
formatter: function() {
// not sure what to put here.
}
}
})
}
}
How do I make it so the cars is the tooltip, where each car shows over it's correct bar on the bar graph?
javascript jquery angular highcharts
asked Nov 18 at 16:52
James Mitchell
74031331
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm making an angular web app, and I'm trying to render a bar graph with 3 different sets. I want to show 2 of the sets on the x-axis and y-axis, and the third one when you hover over each
According to the documentation, that seems to be the tooltip.
The documentation shows how to change each one manually, but I'm calling an API for data, so the tooltip has to be somewhat dynamic and not static.
Angular Component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { BuyerService, BuyerDetail } from '../buyer.service';
import { HttpResponse } from '@angular/common/http';
declare const Highcharts: any;
@Component({
selector: 'app-buyer-details',
templateUrl: './buyer-details.component.html',
styleUrls: ['./buyer-details.component.css']
})
export class DrinkerDetailsComponent implements OnInit {
buyerName: string;
buyerDetails: BuyerDetail;
constructor(
public buyerService: BuyerService,
private route: ActivatedRoute
) {
route.paramMap.subscribe((paramMap) => {
this.buyerName = paramMap.get('buyer');
this.buyerService.getBuyerSpendingDistribution(this.buyerName).subscribe(
data => {
const cars = ;
const years = ;
const counts = ;
data.forEach(buyer => {
cars.push(buyer.car_name);
years.push(buyer.year)
counts.push(buyer.total_per_year);
});
this.renderChart2(cars, years, counts);
}
);
});
}
renderChart2(cars: string, years: string, counts: string){
Highcharts.chart('bargraph2', {
chart: {
type: 'column'
},
title: {
text: 'Distribution of Amount Spent By Drinker By Bar'
},
xAxis: {
categories: years,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Dollars Spent'
}
},
labels: {
overflow: 'justify'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: counts,
}],
tooltip: {
formatter: function() {
// not sure what to put here.
}
}
})
}
}
How do I make it so the cars is the tooltip, where each car shows over it's correct bar on the bar graph?
javascript jquery angular highcharts
asked Nov 18 at 16:52
James Mitchell
74031331
I'm making an angular web app, and I'm trying to render a bar graph with 3 different sets. I want to show 2 of the sets on the x-axis and y-axis, and the third one when you hover over each
According to the documentation, that seems to be the tooltip.
The documentation shows how to change each one manually, but I'm calling an API for data, so the tooltip has to be somewhat dynamic and not static.
Angular Component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { BuyerService, BuyerDetail } from '../buyer.service';
import { HttpResponse } from '@angular/common/http';
declare const Highcharts: any;
@Component({
selector: 'app-buyer-details',
templateUrl: './buyer-details.component.html',
styleUrls: ['./buyer-details.component.css']
})
export class DrinkerDetailsComponent implements OnInit {
buyerName: string;
buyerDetails: BuyerDetail;
constructor(
public buyerService: BuyerService,
private route: ActivatedRoute
) {
route.paramMap.subscribe((paramMap) => {
this.buyerName = paramMap.get('buyer');
this.buyerService.getBuyerSpendingDistribution(this.buyerName).subscribe(
data => {
const cars = ;
const years = ;
const counts = ;
data.forEach(buyer => {
cars.push(buyer.car_name);
years.push(buyer.year)
counts.push(buyer.total_per_year);
});
this.renderChart2(cars, years, counts);
}
);
});
}
renderChart2(cars: string, years: string, counts: string){
Highcharts.chart('bargraph2', {
chart: {
type: 'column'
},
title: {
text: 'Distribution of Amount Spent By Drinker By Bar'
},
xAxis: {
categories: years,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Dollars Spent'
}
},
labels: {
overflow: 'justify'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: counts,
}],
tooltip: {
formatter: function() {
// not sure what to put here.
}
}
})
}
}
How do I make it so the cars is the tooltip, where each car shows over it's correct bar on the bar graph?
javascript jquery angular highcharts
javascript jquery angular highcharts
asked Nov 18 at 16:52
James Mitchell
74031331
asked Nov 18 at 16:52
James Mitchell
74031331
asked Nov 18 at 16:52
James Mitchell
74031331
asked Nov 18 at 16:52
James Mitchell
74031331
asked Nov 18 at 16:52
James Mitchell
74031331
74031331
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59
add a comment |
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53363278%2fhow-to-add-a-third-set-of-data-in-a-highcharts-bar-graph%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
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 at 10:59