score:37
Accepted answer
it's possible, just add all drilldown series, then create a connection between point and drilldown. see: https://jsfiddle.net/blacklabel/rpt741xc/
series: [{
name: 'things',
colorbypoint: true,
data: [{
name: 'animals',
y: 5,
drilldown: 'animals'
}]
}],
drilldown: {
series: [{
id: 'animals',
name: 'animals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
}, ['dogs', 2],
['cows', 1],
['sheep', 2],
['pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
score:-1
this.eixox = ["jun/2016","jul/2016","ago/2016","set/2016","out/2016","nov/2016","dez/2016"];
this.eixoy = "reais";
this.class = "divgraficolinhadotempo";
this.titulo = "média de vendas por equipe";
this.subtitulo;
this.valoresbarras =[{
name:"ecleia",
data: [30000, 32000, 54000, 50000, 54000, 50000], //jan, fev, mar, abr, may, jun
vendedores: [{name:"ecleiav1",data:[32000,40005,40005,27002,20002,70001]},{name:"ecleiav2",data:[30000,55000,45000,22000,32000,33001]}]
},{
name:"joana",
data: [43000, 12000, 34000, 4000, 30004, 4000],
vendedores: [{name:"joanav1",data:[72000,55005,70005,90002,70002,50001]},{name:"joanav2",data:[22000,50005,40005,40002,30002,66001]}]
},{
name:"gabriele",
data: [22000, 22000, 34000, 20004, 30004, 4000],
vendedores: [{name:"gabrielev1",data:[11000,30005,60005,40002,30002,30001],vendedores: [{name:"gabrielev1sub1",data:[11000,30005,60005,40002,30002,30001]},{name:"gabrielev1sub2",data:[60000,50005,40005,24502,55502,70001]}]},{name:"gabrielev2",data:[60000,50005,40005,24502,55502,70001]}]
},{
name:"francisco",
data: [54000, 12000, 30004, 4000, 30004, 4000],
vendedores: [{name:"franciscov1",data:[52000,60005,20005,11002,66002,40001]},{name:"franciscov2",data:[50000,56005,40005,25002,30002,38001]}]
}];
this.valoreslinha = [{
name:"média",
data: [54000, 12000, 30004, 4000, 30004, 4000]
}];
//atributos auxiliares
this.nivel;
this.indexmes;
this.indexvendedor;
this.drilldownniveis;
var drilldowntitle = "equipe de ";
///usercoderegionstart:[user functions] (do not remove this comment.)
var _this = this;
//var vetornomesx = [];
var colors = highcharts.getoptions().colors;
$(function () {
highcharts.tick.prototype.drillable = function () {}; //remove links dos labels do eixo x(mes), pois cada mes possui "n" vendedores
var options = {
type:"column",
chart: {
renderto: "container",
events: {
drilldown: function(e) {
//console.log(e.point);
chart.settitle({ text: drilldowntitle + e.point.name });
},
drillup: function(e) {
chart.settitle({ text: _this.titulo });
}
}
},
title: {
text: _this.titulo
},
subtitle: {
text: _this.subtitulo
},
xaxis: {
categories: _this.eixox
},
yaxis: {
labels: {
formatter: function () {
return highcharts.numberformat(this.value,0);
}
},
title: {
text: _this.eixoy
}
},
plotoptions: {
column: {
cursor: "pointer",
point: {
events: {
click: function (e) {
_this.indexmes = e.point.x;
_this.indexvendedor = e.point.series.columnindex;
//lógica para avanço de niveis
if(_this.drilldownniveis){
chart.settitle({ text: drilldowntitle + _this.drilldownniveis[_this.indexvendedor].name });
_this.drilldownniveis = _this.drilldownniveis[_this.indexvendedor].drilldown;
}else{
chart.settitle({ text: drilldowntitle + options.series[_this.indexvendedor].name });
_this.drilldownniveis = options.series[_this.indexvendedor].data[_this.indexmes].drilldown;
if(options.series[_this.indexvendedor].data[_this.indexmes].drilldown.length<=0){ //se drilldown = 0 mesma coisa que não ter (undefined), então seto null!
_this.drilldownniveis = null;
}
}
//setchart de acordo com novas variaveis
if (_this.drilldownniveis) { // drill down
if(_this.drilldownniveis.length<=0){
_this.drilldownniveis = options.series;
}
var media = new array(0,0,0,0,0,0,0); //zera array para poder somar valores
for(var x=0;x<_this.eixox.length;x++){
$(_this.drilldownniveis).each(function(index, el) {
media[x] += el.data[x];
});
}
for(var x=0;x<_this.eixox.length;x++){
media[x] = media[x]/_this.drilldownniveis.length;
}
_this.drilldownniveis.push({
"name": "média",
"type":"spline",
"data": media
});
setchart(null, _this.eixox, _this.drilldownniveis, null, 1);
_this.drilldownniveis.pop();
} else if(!_this.drilldownniveis){ // restore
chart.settitle({ text: _this.titulo });
setchart(null, _this.eixox,options.series, null,2);
}else if(options.series){ // não vai entrar aqui
setchart(null, _this.eixox,options.series, null,2);
}
}
}
}
}
},
legend: {
layout: "horizontal",
align: "right",
verticalalign: "bottom",
floating: false,
borderwidth: 0
},
credits: {
enabled: false
},
series: []
// drilldown: {
// series: drill_down_data
// }
};
function setchart(name, categories, series, color, tipo) {
if(series.length<=0){
}else{
chart.xaxis[0].setcategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < series.length; i++) {
var tipocolumn="column";
var marcador=[];
if(i==series.length-1 ){
tipocolumn="spline";
marcador= {
linewidth: 2,
symbol: "circle",
linecolor: highcharts.getoptions().colors[3],
fillcolor: "white"
};
}
// chart.settitle({ text: _this.titulo });
chart.addseries({
type: tipocolumn,
marker: marcador,
name: series[i].name,
data: series[i].data,
drilldown: series[i].drilldown,
color: colors[i]
});
}
}
}
//inicialização das series do highcharts
$(_this.valoresbarras).each(function(index, el) {
var drilldownseries =[];
var series = {
name: el.name,
type: "column",
data: []
};
for(var count=0;count<_this.eixox.length;count++){
series.data.push({
"name": el.name,
"y": el.data[count],
"colors": colors[index],
"drilldown": drilldownseries
});
}
$(el.vendedores).each(function(index2, vendedor) {
drilldownseries.push({
"name" : vendedor.name,
"data" : vendedor.data,
"drilldown": vendedor.vendedores
});
});
options.series.push(series);
});
$(_this.valoreslinha).each(function(index, el) {
var series = {
type: "spline",
name: "",
data: [],
marker: {
linewidth: 2,
linecolor: highcharts.getoptions().colors[3],
fillcolor: "white",
}
};
series.name = el.name;
series.data = el.data;
options.series.push(series);
});
var chart = new highcharts.chart(options);
/*$("#" + obj).highcharts({
});*/
});
///usercoderegionend: (do not remove this comment.):<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>i create a multi drilldown with multi levels, if anybody needs:
[http://jsfiddle.net/alissondiel/vnfwk/253/][1]
score:0
you have to write a custom code for mutilple drill downs, we can achieve this by storing data series in each columns ( first charts ) and passing this series to next graph and so on
score:1
here is an example that preserves the names on the axis. (drilldown works on "animals" > "mammals")
drilldown options looks like this:
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'mammals',
y: 4,
drilldown: 'mammals'
},
['reptiles', 2],
['vertebrates', 1]
]
}, {
id: 'mammals',
data: [['cats', 3], ['dogs', 2], ['platypus', 1]]
},
...
score:2
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>
<script>
var chartseriesdata = [];
var chartdrilldowndata = [];
$.ajax({
type: 'get',
url: 'abc.json',
success: function(data) {
var agentjson = data;
for (var i = 0;i <agentjson.countryinfo.length; i++)
{
var series_name = agentjson.countryinfo[i].name;
var drill_id = agentjson.countryinfo[i].drilldown;
var series_data = agentjson.countryinfo[i].y;
var drill_data = agentjson.countryinfo[i].data;
chartseriesdata.push({
name: series_name,
y: parsefloat(series_data),
drilldown : drill_id
});
chartdrilldowndata.push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// end for loop
$('#countryinfo').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
backgroundcolor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'human resources'
},
subtitle: {
text: ''
},
plotoptions: {
series: {
cursor: 'pointer',
datalabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontweight: 'bold',
fontsize: '12px',
textshadow: "0px #ffffff"
}
}
}
},
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: 'country',
colorbypoint: true,
data: chartseriesdata
}],
drilldown: {
series: chartdrilldowndata
}
});
}
});
</script>
and your json file look likes:
{"countryinfo":[{"name":"firefox","y":4,"drilldown":"firefox","data":[["desktop",1]]},{"name":"chrome","y":176,"drilldown":"chrome","data":[["desktop",1],["desktop",18]]}]}
score:8
for a mutiple levels pie chart check out http://jsfiddle.net/bge14m3a/1/
$(function () {
// create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'deep drilldown'
},
xaxis: {
type: 'category'
},
legend: {
enabled: false
},
plotoptions: {
series: {
borderwidth: 0,
datalabels: {
enabled: true,
}
}
},
series: [{
name: 'things',
colorbypoint: true,
data: [{
name: 'animals',
y: 5,
drilldown: 'animals'
},{
name: 'food',
y: 4,
drilldown: 'food'
}]
}],
drilldown: {
series: [{
id: 'food',
name: 'food',
data: [{
name: 'apple',
y: 1.5,
drilldown: 'apple'
},
['banana', 1],
['peer', 0.5],
['pineapple', 1]
]
}, {
id: 'apple',
data: [['1/6' ,1],
['1/3' , 2],
['1/2' , 3]]
},{
id: 'animals',
name: 'animals',
data: [{
name: 'cats',
y: 5,
drilldown: 'cats'
}, ['dogs', 2],
['cows', 1],
['sheep', 1],
['pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
})
});
Source: stackoverflow.com
Related Query
- Drilldown multiple levels Highchart
- Drilldown multiple levels and multiple type Highchart
- Is multiple level Highchart Drilldown possible in adjacent charts?
- Highchart Drilldown Multiple Layers
- Column based Highchart drilldown series assign color code to each column
- Highchart drilldown to simultaneous multiple series and y-axis
- How to drilldown multi-series spline charts multiple levels in HighCharts
- How to drilldown a pie highchart into multiple containers using renderTo or redraw method?
- Highchart multiple level drilldown click event get drilldown series data
- Manage multiple highchart charts in a single webpage
- Background color for multiple Highchart panes, in Vue app
- Optimize JavaScript DrillDown code
- Highchart axis max with multiple axes
- Highcharts - Hide child labels in a multiple levels and multiple layouts treemap
- Single series drilldown to multiple series Highcharts
- Highcharts multiple series drilldown to multiple series
- Highchart (basic line chart) which can have multiple values vs x axis?
- Showing multiple data with same x and y in highchart
- Highchart multiple axes - sync axes on multiple charts
- Fire click event on a highchart column drilldown chart on clicking x axis for drill down reports
- Highcharts multiple column chart with drilldown, correct formatting of drilldown axes
- Export multiple Highchart as Zip file to my project directory
- HighChart : plot line click event for multiple chart
- Problem with multiple labels in Highchart
- Highchart drilldown subtitle change
- Drilldown in two steps, multiple choice in Highcharts
- 3d High Charts Multiple Series inside of Drilldown
- Pan one of multiple Y axis for highchart
- Highchart multiple bar charts in a single webpage
- How to make 3 levels drilldown plot in R highcharter (possible other packages)
More Query from same tag
- Obtaining highcharts image URL from PHP
- Template helper not ready even though it should be
- How to Make a Dashed Bar Chart Border in Highcharts
- Wrong flags arrangement after dynamically set the data on function afterSetExtremes
- Highcharts: Bar chart: Label width : nowrap
- Highchart not showing on mobile
- Highcharts Angular date on x-axis is different
- Android highcharts library chart loading completed listener event
- Updating fontsize with highcharts using zoomtype
- Highchart: Flags goes out of stock chart on set extreme
- How to highlight items in scatter plot in highcharts
- Show label for each bar in highcharts
- How to get index of clicked point in scatter plot
- Easy way to gather all the common properties of a chart, to not write them all the time?
- High Charts Multiple Line Chart not displaying tooltip for multiple lines
- Highcharts numberFormat returns minus zero
- highcharts type bubble with static Y-axis list
- How to check if the column is empty or not in csv , if column is not empty than print data else print something
- Using a plot line comparator in Highcharts
- Why is Highcharts x axis not respecting my categories in stacked area chart
- Highcharts: Control show/hide of a div by clicking pie chart slices
- How to extend X axis datetime in Highchart
- Combine multiple Yaxis in one
- Highcharts: Handling ng-click on tooltips
- HighCharts Custom SVG Marker Symbol
- Highcharts Pie Chart Specify Pie Slice Gradient Color
- Toggle specific highcharts when checking/unchecking checkboxes
- ReferenceError: Highcharts is not defined(React JS)
- How can i load external json data in highcharts to show the bar chart
- Highcharts datalabel 'callout' shape not working for donut chart
