I followed the example given, but whenever I add a new data label it never shows as a slice. Now I added all values and data that I want to show but nothing shows up on the browser.
Can someone please recommend anything?
http://jsfiddle.net/LLExL/2466/
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Risk Mitigation'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Industry Distribution',
data: [
['Retail', 8.8],
['Construction', 8.4],
{
name: 'Technology',
y: 9.7,
sliced: true,
selected: true
},
['Finance', 8.4],
['Automotive', 8.3],
['Restaurant', 8.3]
['Energy', 7.8]
['Medical', 7.0]
['Marketing', 7.0]
['Manufacturing', 6.9]
['Food Distribution', 6.5]
['Gym / Salons', 4.6]
['Home Services', 4.4]
['Travel', 2.5]
['Other Industries', 1.4]
]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
At the beginning I advice to familiar with console errors (developers tools) then you wil notice that your syntax is incorrect. You miss about comma at the end of lines in series->data object. Correct form
series: [{
type: 'pie',
name: 'Industry Distribution',
data: [
['Retail', 8.8],
['Construction', 8.4],
{
name: 'Technology',
y: 9.7,
sliced: true,
selected: true
},
['Finance', 8.4],
['Automotive', 8.3],
['Restaurant', 8.3],
['Energy', 7.8],
['Medical', 7.0],
['Marketing', 7.0],
['Manufacturing', 6.9],
['Food Distribution', 6.5],
['Gym / Salons', 4.6],
['Home Services', 4.4],
['Travel', 2.5],
['Other Industries', 1.4]
]
}]
http://jsfiddle.net/LLExL/2468/
Related
When using the pointPlacement in highcharts when data is more than 1 it works fine, but when get one data from server all bars compress to one bar.
Sorry my English is bad
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
<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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>
you can try my code here
try the normal code
That is a Highcharts bug reported here: https://github.com/highcharts/highcharts/issues/11800
As a workaround you can set pointRange: 1:
plotOptions: {
column: {
pointRange: 1,
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/Lzx3shrn/
API Reference: https://api.highcharts.com/highcharts/series.column.pointRange
Currently i am facing a problem that i need to set Opacity manualy on pie-chart using Highchart. The following solution works fine if you know what color you wish to assign to the slice. But if the color is picked from a palette which is generic, there is no way to give the opacity. It always takes 0. For Can anyone help me with this.
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
fillOpacity: 0.5,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true,
color: 'rgba(150,100,50,0.1)'
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can set opacity by using attr method:
events: {
load: function() {
var points = this.series[0].points;
points[1].graphic.attr({
opacity: 0.4
})
}
}
Live demo: http://jsfiddle.net/BlackLabel/59mye8kn/
API: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I am trying to create a funnel visualization that would visualization the number of guests and also percent of prior visit for 3 categories of consumers: 1 Visit, 2 Visits, 3+ Visits.
Right now I have 2 labels for each category (sticking out to the right hand side) but I want 1 label for each category sticking out on the right hand side stating both the # of Guests and Percent of Prior Visit. I also want a box-shaped label for each block of the funnel so that when you hover over it it looks like:
[CATEGORY]
Percent of Prior Visit: [VALUE]
Guests: [VALUE]
Right now, the box-shaped label when I hover over the block just shows Percent of Prior visit. So I want the box to be fixed and the label to the right hand side to be just 1 per block. I hope this makes sense. How would I do something like this? Thanks in advance.
My code is at: https://jsfiddle.net/ug4rc6pn/150/
Using the style you tried with earlier makes this easier. That is, setting both value and percentage in the same series, like this:
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
...
]
}]
You can then format your datalabel like this:
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
...
}
And your tooltip like this:
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
Which gives you this:
Highcharts.chart('container', {
chart: {
type: 'funnel',
//Only for Pie Charts
options3d: {
enabled: false, // change to true to activate 3D
alpha: 40,
beta: 40,
depth: 100,
},
},
title: {
text: 'Guest Return Funnel'
},
plotOptions: {
funnel: {
depth: 100
},
series: {
events: {
legendItemClick: function() {
$.each(this.chart.series, function(i, serie) {
if (serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
},
shadow: true,
allowPointSelect: true,
borderWidth: 18,
animation: {
duration: 400
},
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true,
crop: false
},
center: ['50%', '50%'],
neckWidth: '40%',
neckHeight: '0%',
width: '65%',
height: '100%',
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
}
},
legend: {
enabled: true
},
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
{
y: 88000,
yPercentage: 25,
name: '2 Visits',
color: "#FFA500",
},
{
y: 42000,
yPercentage: 48,
name: '3+ Visits',
color: "#32CD32"
}
]
}
]
});
/*
series: [{
name: 'Guests',
name2: 'Percent of Prior Visit',
data: [{
y:352000,
name: '1 Visit',
color: "#ff0000",
y2: 100,
name2: 'Percent of Prior Visit'
},
{
y: 88000,
name: '2 Visits',
color: "#FFA500",
y2: 25,
name2: 'Percent of Prior Visit',
},
{
y: 42000,
name: '3+ Visits',
color:"#32CD32",
y2: 48,
name2: 'Percent of Prior Visit'
}
]
}]
});
*/
<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JSFiddle working example: https://jsfiddle.net/ewolden/org6quk9/
I'm trying use two similar javascript in one page, I already differentiate their id name but when I run my app it's always the first declared script that will only work while the second one doesn't.
Example :
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#view2').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
},
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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Persentase',
data: [['Perempuan', 70],
['Laki -Laki', 30]
]
}]
});
});
</script>;
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#view1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Persentasi Jumlah Guru Laki Laki Dan Perempuan'
},
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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Persentas',
data: [['Perempuan', 50],
['Laki -Laki', 50]
]
}]
});
});
</script>
The code above will only execute the first declared script (#view2) while the second one (#view1) doesn't work. I have no idea what is the problem, and if you can help please and thank you.
For more details, I'm trying to call them within the same page like :
<div class="row-fluid">
<div class="span6" onTablet="span6" onDesktop="span6">
<div id="view1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<div class="span6" onTablet="span6" onDesktop="span6">
<div id="view2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div><!--/span-->
Get rid of this code out of the second script:
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
Also, you have ";" after the first closing script tag which will cause it to show up on the page.
Also you can take you #view1 code and put in inside the same script block as #view2 to make it more compact.
When you click on the 'Recycled Materials' section of the pie chart it drops down into more info about that section.
The problem is the back button has the default text 'Back to Brands' in it and I can't find anywhere in my code to change that.
My code is as follows:
Java:
$(function () {
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Green Up Amount Recycled'
},
subtitle: {
text: 'Click the Recycled Materials slice for more information.'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: 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: "Brands",
colorByPoint: true,
data: [{
name: "Landfill - 45,821 lbs",
y: 23.73,
}, {
name: "Recycled Materials - 147,276 lbs",
y: 76.27,
drilldown: "Recycled Materials"
}]
}],
drilldown: {
series: [{
name: "Recycled Materials",
id: "Recycled Materials",
data: [
["Tent Frames and Chairs - 6,400 lbs", 4.35],
["Aluminum Cans - 28,950 lbs", 19.66],
["Plastic PET Bottles - 36,420 lbs", 24.73],
["Glass - 40,950 lbs", 27.8],
["Cardboard - 30,000 lbs", 20.37],
["Solo Cups - 4,556 lbs", 3.09],
]
}]
}
});
});
HTML:
<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/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 500px; max-width: 500px; height: 400px; margin: 0 auto"></div>
Thanks for the help!
Simply change
name: "Brands"
to whatever you have, maybe "Materials", example