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.
Related
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
Currently i am working on a requirement, which user can click on the plotted area of a semi circle chart and increase the size of the hovered portion of the plotted area in semi cycle chart....I have gone through the Highchart API and come up with an solution, but my code snitpet is not working..can any one help me with this please.
this.chart = new Highcharts.Chart('container',
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
height: 400,
plotShadow: false
},
title: {
text: '98',
style: {
"fontSize": "48px"
},
align: 'center',
verticalAlign: 'middle',
y: 50
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
enabled:false
},
colors: ['#FF0000', '#FFA500', '#FFFF00'],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -100,
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
click: function (e) {
alert("Clicked");
}
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series:[
{
data: [
{y: 1, name:"", id:"0"},
{ y: 7, name:"", id:"1"},
{ y: 2, name:"", id:"2"}
],
innerSize: '65%',
type: 'pie',
}
]
}
);
<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: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Set allowPointSelect property to true:
plotOptions: {
pie: {
allowPointSelect: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/h3xskctp/
I'm trying to set a custom tooltip text for this pie chart. I want the labels of each slice showing on the slice, as well as having a way of getting to them in the hover event so I can do an if/then/else to show some custom data for each slice.
<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; max-width: 600px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: '<span style="color: red;">↑↑↑<br>Risk<br> ofInjury</span> ',
align: 'center',
verticalAlign: 'middle',
useHTML:true,
y: -20,
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
}
},
tooltip: {
useHTML: true,
followPointer: false,
formatter: function() {
return this.category + '<br><ul><li>List Item Test</li></ul>';
}
},
series: [{
type: 'pie',
name: 'Factors',
innerSize: '40%',
data: [
['Data 1', 16],
['Data 2',16],
['Data 3',16],
['Data 4', 16],
['Data 5', 16],
['Data 6',16],
]
}]
});
});
http://jsfiddle.net/5bqu7j4e/34/
Use follow code in formatter functin to get labels
formatter: function() {
return '<b>'+ this.point.name +'</b>:<br><ul><li>List Item Test</li></ul>' ;
}
See fiddle Here
I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
I have created a JSFiddle here:
http://jsfiddle.net/mikemahony/hzdewsx8/
What am I missing?
Highcharts-ng directive needs those properties to go under options.
$scope.highchartsNG = {
options:{
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
}
},
In highchartsNGConfig the options property is a standard highcharts options object. e.g. anything you can pass into `new Highcharts.Chart(options); works here.
This options object is watched for changes. When something changes here the whole chart is recreated.
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/