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.
Related
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 have a high chart that has two sets of data. The numbers on the y-axis for the data are to far apart from each other. I saw a solution for this a while back while looking for something else and can not find it for the life of me. So at the risk of repeating a question, How do I make the 160 in the red close together like in the yellow circle.
If I were to spell it out it looks like this 1 6 0 and I need to to look like this 160. Does anyone know what value controls that?
As requested, here is my code:
$(function() {
$('container').highcharts({
chart: {
zoomType: 'xy',
width: 640
},
xAxis: [{
categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
crosshair: true,
gridLineWidth: 1,
labels: {
style: {
fontSize: '15px'
}
}
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: '',
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Retrun %',
style: {
color: "#000000",
fontSize: '20px'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
fontSize: '20px'
}
}
}, ],
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
itemStyle: {
font: '15pt Helvetica',
},
},
series: [{
name: 'AirTransport',
type: 'column',
yAxis: 1,
data: [22.5, -1.9, -32.6, 22.3, 33.4, -6.1, 19.2, 50.7, 28.1, -8.6],
tooltip: {
valueSuffix: ''
},
pointWidth: 35,
color: "#b3b3b3"
}, {
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
name: 'S&P 500',
type: 'line',
yAxis: 1,
data: [15.8, 5.5, -37.0, 26.5, 25.0, 2.1, 16.0, 32.4, 23.7],
color: "#000000"
}]
});
});
As both wergeld and Halvor Strand pointed out, you need to more clearly define the font attributes for your labels.
Here's a revised set of values for your y-axes:
yAxis: [{ // Primary yAxis
gridLineWidth: 2,
tickInterval: 20,
fontWidth: 100,
title: {
text: 'S&P value',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
opposite: true,
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, { // Secondary yAxis
tickInterval: 20,
title: {
text: 'Total Return %',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
},
labels: {
format: '{value}',
style: {
color: "#000000",
font: '20px Arial, sans-serif'
}
}
}, ],
Note how I removed the fontSize attribute in favor of the font attribute. In my experiences, this is far more useful and versatile.
Here's the result from my changes:
I noticed and corrected a few other items in your code:
You had both of your series set to display on the same yAxis value. I made them distinct.
I added the attribute opposite: true to one of your y-axes so it would appear on the right (see the demo at http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/).
Your declaration $('#container').highcharts({ was missing the # sign. This would prevent your chart from appearing in the <div> element with that ID.
Here's the revised fiddle: http://jsfiddle.net/brightmatrix/pLort0mj/
I hope this solves your problem and has been helpful for you!
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 trying to render a Pie Chart (Semi Circle Donut) with the dynamic data returned by a php file.
data returned by data.php:
echo json_encode($overview)
output: {"Apple":184,"Mango":105,"Oranges":30,"Grapes":17} (This list is dynamic)
Here is what I am doing in the jQuery:
$(document).ready(function(){
$('#show').click(function(){
var chart;
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
}]
}; //var options ends here
$.getJSON("data.php", function(json) {
json = JSON.stringify(json);
options.series[0] = {};
options.series[0].data = json[0]['json'];
chart = new Highcharts.Chart(options);
});
});
});
I have tried to follow various questions on this but with no luck. Please suggest what am I missing.
Your data should be an array not object. As a result you need to achieve this figure:
["Apple":184,"Mango":105,"Oranges":30,"Grapes":17]
You didn't initialize highcharts with options.
$('#container').highcharts(options)
I got fetched user from database, and all of them have review score.
I use while statement to show each user and the review score (using highchart).
The problem is that I'm getting only one chart, instead of getting one for each single user.
Here is the code
PHP:
if (isset($_COOKIE['rev_idx'])) {
$review_id=preg_replace('#[^0-9]#','',$_COOKIE['rev_idx']);
if ($review_id==$get_rev) {
$sql1="SELECT * FROM `user`.`review` WHERE reviewer_id='$review_id'";
$query1=mysqli_query($connect_dude,$sql1);
if (mysqli_num_rows($query1)>0) {
$show_review="";
while($row1=mysqli_fetch_assoc($query1)){
$rid=$row1['rid'];
$reviewer_id=$row1['reviewer_id'];
$reviewee_id=$row1['reviewee_id'];
$review_tit=$row1['review_tit'];
$review=$row1['review'];
$image=$row1['image'];
$point=$row1['points'];
$rev_date=$row1['rev_date'];
$sql2="SELECT * FROM `user`.`user_det` WHERE id='$reviewee_id'";
$query2=mysqli_query($connect_dude,$sql2);
if(mysqli_num_rows($query2)>0){
$row2=mysqli_fetch_assoc($query2);
$image=$row2['img'];
$busi_title=$row2['busi_title'];
$show_review.="<br><div id='indi_rev'><div style='width:600px;border-bottom:1px solid black;'></div><div id='rev_dat'>".$rev_date."</div>
<div style='width:600px;border-bottom:1px solid black;'></div>
<div style='float:left;'><a href='../".$reviewee_id."/index.php'><img src='../account/".$reviewee_id."/".$image."' width='130' height='150'></a><br><a href='../".$reviewee_id."/index.php'><b>".$busi_title."</b></a></div>
<div><br><b>".$review_tit."</b><br>".$review."</div><div id='Scores' style='min-width: 100px; height: 80px;max-width: 500px;'></div></div>";
}
}
} else {
$show_review="<b>You have not written any review yet.</b><br>Share your thought to others by writing review.";
}
} else {
header("location:reviewer.php?usr=".$review_id."");
}
}
Javascript:
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var x="<?php echo $point;?>";
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'Scores',
marginRight: 50,
events: {
//load: loadRed
}
},
title: {
text: '',
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 20
}
},
xAxis: {
categories: ['Review Score'],
title: {
text: null
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 11,
width: 90
}
}
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
valueSuffix: ' /100'
},
plotOptions: {
series: {
stacking: 'percent'
},
bar: {
grouping: false,
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false,
align: 'right',
x: -40,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: false
},
credits: {
enabled: false
},
series: [
{
name: 'null',
data: [x],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'Score',
data: [x],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Score',
data: [x],
color: "green",
borderWidth: 0,
borderRadius: 5
}
]
});
});
</script>
Your help would be greatly appreciated
you should make many instance of highcahrt for many users by adding different id and loop your javascript code too.
change your
<div id='Scores' ....
to
<div id='Scores_".$reviewee_id."' ....
and cut your
< script >
block and paste after
$show_review.="<br><div ......
and change
renderTo: 'Scores',
to
renderTo: 'Scores_<?php echo $reviewee_id>',
The problem is that your x variable is string, but should be an array. So consider to print in php JSON (json_encode()) and then loat this in the javascript by the function $.getJSON().