I have a pie chart that has a single series with all the data it shows, this data has objects of two types, source and destiny. By default the legends that appear are of each object name, but I need that the legends group the objects by type, source objects between them and destiny objects between them. I saw something similar in this post: Grouping Legends in Highcharts but it does not work for pie charts, I need that same thing but it works with pie charts. I'm using highcharts 4.2.6 .
Here is my pie chart with all its legends, I need show only two legends, one for blue section and the other one for light-blue section.
There is an example of my series object:
{
"id": "Group11App36",
"data": [
{
"name": "apple.com",
"y": 2158959,
"origin": "destiny",
"color": "#195580"
},
{
"name": "machtv.info",
"y": 46442,
"origin": "destiny",
"color": "#195580"
},
{
"name": "10.10.10.151",
"y": 462724,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.213",
"y": 133774,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.120",
"y": 111039,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.13.99",
"y": 69530,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.9",
"y": 66338,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.36",
"y": 64559,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.251",
"y": 57293,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.196",
"y": 53450,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.191",
"y": 44372,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.119",
"y": 43556,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.149",
"y": 36618,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.139",
"y": 35831,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.42",
"y": 35316,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.17",
"y": 34151,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.125",
"y": 33135,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.117",
"y": 32885,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.93",
"y": 31926,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.102",
"y": 31816,
"origin": "source",
"color": "#8fbbda"
}
]
}
Thanks in advance!
Answer
i don't think its possible without a custom legends
here is an example (with custom legends)
var data = [{ "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" }];
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Banyantmaya out'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function () {
return '' + this.point.name + ': ' + this.percentage.toFixed(2) + ' %';
}
},
showInLegend: false
}
},
series: [{
colorByPoint: true,
data: data
}]
}, function(chart) {
$legend = $('#customLegend');
var types = chart.series[0].data.reduce((arr, {origin, color}, i) => {
var obj = arr.find(o => o.origin === origin);
if (obj) obj.indexes.push(i);
else arr.push({ origin, color, indexes: [i] });
return arr;
}, []);
types.forEach(type => {
$legend.append('');
});
$('#customLegend .serieLabel').click(function() {
var indexes = types.find(t => t.origin === this.dataset.name).indexes;
$(this).toggleClass('hide');
indexes.forEach((inx, i) => {
var point = chart.series[0].data[inx];
point.setVisible(!point.visible, i === indexes.length - 1);
});
});
});div#customLegend { background-color: #fff; text-align: center; padding-bottom: 20px; }
.symbol { width: 12px; height: 12px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; }
.name { margin: 0 20px 0 10px; display: inline-block; vertical-align: text-bottom; font-weight: bold; font-size: 14px; }
.serieLabel { cursor: pointer; text-transform: capitalize; }
.serieLabel.hide { opacity: 0.2; }
No comments:
Post a Comment