I need to make 3D Pie Chart with Drilldown effect.I can not figure it out how it work.
3D Pie Chart JsFiddle Demo
2D Pie Chart with Drilldown JsFiddle Demo
And here is my attempt JsFiddle Demo
CODE:
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: 'black'
}
}
}
},
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]
]
}]
}
});
The only thing you are missing is drilldown.js. Just include it and it will work
See the working fiddle here
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
Your code is absolutely perfect. There are no issues with it. You have just forgotten to include the javascript file for drilldown.
Just include the script file and your work will be done.
Related
I need to disable the ability to click items in the legend in a HighChart. Normally I would use the following on a point or series as appropriate:
events: {
legendItemClick: function() {
return false;
}
However the page I'm working on requires the entire HighChart to be defined within a JSON object, for example:
{
"chart": { "type":"column"},
"xAxis": { "categories":[a, b, c, d] },
"series": [{
"name": "name",
"data": [0,1,2,3]
}]
}
Obviously I can't put a function within a JSON, so I'm struggling to find a way to disable legendItemClick.
I could override the site templates to build the chart in JS, and then I could solve my problem. But I've been requested to try to make it work within the current system.
I would welcome any suggestions.
EDIT: Added some clarity on why I can't use a function.
Using json data, update your series data as
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive:true, //attribute for legend, true means click will work
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive:false,
}, {
name: 'Firefox',
y: 10.38,
legendActive:false,
}, {
name: 'Safari',
y: 4.77,
legendActive:false,
}, {
name: 'Opera',
y: 0.91,
legendActive:false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive:false,
}]
Use function for legend click
point: {
events: {
legendItemClick: function() {
return this.legendActive; //this is property from series data
}
}
}
$(document).ready(function() {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function() {
return this.legendActive;
}
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive: true,
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive: false,
}, {
name: 'Firefox',
y: 10.38,
legendActive: false,
}, {
name: 'Safari',
y: 4.77,
legendActive: false,
}, {
name: 'Opera',
y: 0.91,
legendActive: false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive: false,
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
I Want to assign my own color for each column for drilldown graph of column based chart. So i have created zones and assigned color codes based on some pre calculation.
My code is as below :
Highcharts.chart('container', {
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: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
14 // Over max set in zone get default color
],
[
'v8.0',
10
],
[
'v6.0',
8
],
[
'v7.0',
4
]
],
zones: [{
color: '#ffcc00'
}, {
color: '#AA7F39'
}, {
color: '#ff8000'
}, {
color: '#FFFF00'
}]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
12,
],
[
'v34',
10
],
[
'v38',
7
],
[
'v33',
4
],
[
'v32',
3
]
],
zones: [{
color: '#FFFF00'
}, {
color: '#FFFF00'
}, {
color: '#ff8000'
}, {
color: '#AA7F39'
}]
}]
}
});
My Fiddle is
https://jsfiddle.net/jqefrrj0/
Now when I click on Microsoft, the drilldown graph has all yellow color columns, whereas I want it to change as per the each color given in zones.
Like first yellow, then mustard, orange, yellow.
How can I achieve the above colors for each column of drilldown series.
You forgot to set the zones.value Documentation
zones: [{
color: '#ffcc00',
value:5
}, {
color: '#AA7F39',
value:12
}, {
color: '#ff8000'
}, {
color: '#FFFF00'
}]
Updadted Fiddle
I'm trying to make drilldown for a column chart in highcharts using below js
// Create the chart
Highcharts.chart('container', {
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: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
[
'v11.0',
24.13
],
[
'v8.0',
17.2
],
[
'v6.0',
1.06
],
[
'v7.0',
0.5
]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
[
'v35',
2.76
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}]
}
});
Is it possible to change only the drilldown column colors based on some different not the x-axis or y-axis value.
Here in below data based on "new_info" i want to change colour according
[{"name":Microsoft Internet Explorer, data :[['v11.0',14, (new_info) 6] , ['v8.0',10, 8(new_info)] , ['v6.0',8, 3 (new_info)]]
If value is between 10 - 8 red, 7-5 amber, 4-3 yellow.
When I click on drilldown it should show me some n column chart few columns in red few in yellow few in orange and so on.
You can use zones like that :
...
zones: [{
value: 4,
color: '#ffcc00'
}, {
value: 7.1,
color: '#AA7F39'
}, {
value:13,
color: '#ff0000'
}]
...
Here a Fiddle
How do I Highlight a slice of pie chart in highcharts on click of a div? More like copying the highlighting functionality of legends but from a differrent div.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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
}]
}]
});
For example in the highchart above I want a different div to do what legends do here. Here is the link to jsfiddle http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/pie-legend/
To do this make the chart a variable and interact with it like a typical javascript Object:
// Build the chart
$(function() {
var chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
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
}]
}]
});
$('#button').click(function() {
var point = chart.series[0].data[3]; //Or any other point
point.select();
chart.tooltip.refresh(point);
});
})
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="button" style="background-color:grey; width:100px;color:white;">Select Safari</div>
edit: words
**edit - I have narrowed it down to this line breaking it - pointFormat: '{series.name}: {point.percentage:.1f}%'
Any ideas why that would happen?
I used highcharts a few years ago and I'm just getting reacquainted. For some reason I can't get anything other than a pie chart working.
Using the basic bar example works fine:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
But when I go to use any other example, like a pie chart:
<script>
$(function () {
var myChart = Highcharts.chart('stats_container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
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
}]
}]
});
});
</script>
I get a http 500 error. I tried a highstock example too, and the same problem happened. Can anyone see where I am going wrong? I can put in the series and other details for the pie chart, but it's when I start putting in the tooltip & plotoptions that it breaks. Thanks
I use smarty templates, and the js wasn't within a {literal} tag. Oooops