Highchart drilldown to simultaneous multiple series and y-axis - javascript

Hello I would like to use HighChart package and make JS figures with drilldown capability that
1. Show multiple series at drilled-down level at the same time.
2. Use multiple (say 2) y-axis to indicate the different units from these series at the drilled-down level.
Based on the starting point of the code:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
categories: ['v11','v8','v9','v10','v7'],
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
});
});
http://jsfiddle.net/h5xjp8h5/2/
with three js source code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
But when i make the drilldown part code like the following:
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
type: 'spline',
data: [
['v11',25],
['v8',17],
['v9',8],
['v10',5],
['v7',3]]
}, {
name: 'Microsoft Internet Explorer Cost',
id: 'Microsoft Internet Explorer',
type: 'spline',
yAxis: 1,
data: [
['v11',50],
['v8',40],
['v9'60],
['v10',65],
['v7',73]]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0',5],
['v41.0',4.32],
['v42.0',3.68]
]
}]
}
With y-axis part:
yAxis: [{
title: {
text: 'Total percent market share'
}
},
{
title: {
text: 'cost'
},
opposite: true
}],
http://jsfiddle.net/h5xjp8h5/3/
It did not work.
Could someone please help me on this: 1) I want drill down on Microsoft Internet Explore into a view with two spline series, one with version usage and the other with version cost. 2) i want those two series in. 3) using two y-axis.
Thank you very much in advance.

You can use drilldown event callback function for add new series as your drilldown:
drilldown: function(e) {
var chart = this,
drilldowns = chart.userOptions.drilldown.series,
series = [];
e.preventDefault();
Highcharts.each(drilldowns, function(p, i) {
if (p.id.includes(e.point.name)) {
chart.addSingleSeriesAsDrilldown(e.point, p);
}
});
chart.applyDrilldown();
}
You can use addSingleSeriesAsDrilldown(), method similar to: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown
But you can add multiple series as drilldown with this method.
Here you can see an example how it can work:
http://jsfiddle.net/h5xjp8h5/10/
Kind regards.

Related

Highcharts - Plot a double donut chart on drilldown level

I plotted a double donut chart using Highcharts library. My requirement is when I drill down from the initial level, I should be able to plot another double donut chart.
For eg: This is the initial level. Now if I click on Email, it should drill down and show another double donut chart
This is the desired result after drill down
Following is the current code to render chart. For each series data, we have drilldown option which can take a string for eg: 'Email'. I need double donut under the drilldown but drilldown series with same id don't work and I end up getting only 1 donut chart.
Highcharts.chart('container', {
chart: {
type: 'pie',
/* backgroundColor: '#000', */
},
title: {
text: '',
},
subtitle: {
text: '',
},
accessibility: {
announceNewData: {
enabled: true,
},
point: {
valueSuffix: '%',
},
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:
'<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>',
},
series: [
{
innerSize: 150,
size: 200,
name: 'Browsers',
colorByPoint: true,
data: [
{
name: 'Email',
y: 62.74,
drilldown: 'Email',
},
{
name: 'Social Media',
y: 10.57,
drilldown: 'Social Media',
},
{
name: 'Shopping',
y: 7.23,
drilldown: 'Shopping',
},
{
name: 'Trading',
y: 5.58,
drilldown: 'Trading',
},
{
name: 'Others',
y: 4.02,
drilldown: 'null',
},
],
},
{
showInLegend: false,
dataLabels: {
enabled: false,
},
innerSize: 100,
size: 150,
name: 'Email',
colorByPoint: true,
data: [
{
name: 'Email',
y: 52.74,
drilldown: null,
},
{
name: 'Social Media',
y: 15.57,
drilldown: null,
},
{
name: 'Shopping',
y: 12.23,
drilldown: null,
},
{
name: 'Trading',
y: 5.58,
drilldown: null,
},
{
name: 'Other',
y: 4.02,
drilldown: null,
},
],
},
],
drilldown: {
series: [
{
innerSize: 150,
size: 200,
name: 'Email',
id: 'Email',
data: [
['Gsuite', 0.1],
['office365', 1.3],
['Yahoo', 53.02],
],
},
{
innerSize: 100,
size: 150,
name: 'Email',
id: 'Email',
data: [
['user1', 0.1],
['user2', 1.3],
['user3', 53.02],
],
},
],
},
});
This is the current result
Here is the jsfiddle which I am currently working on.
Any help on this will be much appreciated.
Thanks

how to change the point format for drill down in pie charts?

I am using a pie chart with drill down, is there any way to change the point format in tool-tip function. I want to display; first pie chart in Percentage(%) format, and then drill down data in Metric Ton (MT)format.
I am getting the data in respective formats from the back end service. Products are coming in metric Tons and remaining-percentage, actual percentage are coming in percentage.
My pie chart code is given below.
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
Thanks in advance.
A way to solve this is to appoint a tooltip: {pointFormatter: } to your first level series. This will override the main tooltip formatter and show you the data you want it to show.
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
The reason why I opted to let the first level override the tooltip is because of the construction of your drilldown, and I figure all of those drilldowns will use the same tooltip format.
Here you can find a working JSFiddle.

Angular : SetData to HighChart widget from an array object

i'm using under my ANgular component a highchart widget :
DEMO OF THE CHART : https://www.highcharts.com/demo/pie-legend
from the documentation , using it is like that :
Highcharts.chart('divChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: this.nb
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
But since am loading dynamically the datat ( chrome , firefox ...) ,
i have now a set fo key/ value data indicationg each browser with its value :
browsers: {[key: string ]: number } = {};
for example my browsers list contains :
chrome (name) -> 60 (value)
firefox -> 30
edge -> 10
....
i wanna inject my browsers list values dynamically to the data of the chart , and not mannually , since my list may contain numerous values.
i think there were some methode called setData , but i don't know if it's usefull.
Ideas ?
Yes there is setData function
http://api.highcharts.com/highcharts/Series.setData
but after you need to update chart http://api.highcharts.com/highcharts/Series.update

Highchart 5: Pie Drilldown labels and back button not visible

I try to get a Highcharts pie drilldown chart working. Seems like in Version 5 of Highcharts, the back button is not visible as well as the data labels as soon as entering level 2:
The code is the exact code from the Highcharts demo page (version 4).
Here is my JS Fiddle
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
});
Any idea?
Thanks a lot.
Like Grzegorz pointed out, this is a bug in the pre-release version of Highcharts 5.

Highcharts access drilldown data from event click

I am trying to display the drilldown series pie chart data on click. I'm able to display the pie chart series name the user clicks on but not the drill down data.
Here is an example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name)
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
});
Instead of alert(event.point.name) I want to access the drilldown series data corresponding to the id the user clicks on.
Using the console.log I thought this would work (this.chart.series[0].data[0]) but it displays the series data and not the drilldown.
You are missing drilldown.js which is needed to drilldown the pie.
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
See the Working fiddle here
This is the answer:
this.chart.options.drilldown.series[0].data[0]

Categories