We Keep Coding

How to draw single line graph using Highchart bullet graph?

I have recently switched to highchart and i am trying to achieve a graph like this with the highchart bullet graph
but failed to customize it like this, Somebody can me define what I'm doing wrong? or is it possible to customize the bullet graph like this or should I move to another graph, Please find the code below.
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: '10%',
color: '#819bc2',
targetOptions: {
width: '10%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
yAxis: {
plotBands: [{
from: 0,
to: 150,
borderRadius: '10%',
color: '#819bc2'
}, {
from: 150,
to: 225,
borderRadius: '10%',
color: '#375e9a'
}, {
from: 225,
to: 9e9,
borderRadius: '10%',
color: '#ccd8e9'
}],
title: null
},
series: [{
data: [{
y: 150,
target: 250
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
#container1 {
max-width: 1000px;
height: 90px;
margin: 1em auto;
border-radius: 20%;
}
.hc-cat-title {
font-size: 13px;
font-weight: bold;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>

Yes - it's possible. Actually the column on your chart is rounded - you can observe that when it's hovered.
You sholud remove plot bands and add two more series instead:
series: [{
data: [{
y: 360,
target: 300
}]
}, {
data: [{
y: 280,
target: 250,
color: '#c0ffee'
}]
}, {
data: [{
y: 150,
target: 250,
color: '#bada55'
}]
}],
grouping has to be disabled to make series overlapped.
Live demo: https://jsfiddle.net/BlackLabel/p2zwf6e8/
API reference: https://api.highcharts.com/highcharts/

Remove the border around the pie chart in high charts

How to remove the border around the pie chart.
I tried the following options but it didn't work :
plotOptions.pie.borderWidth: 0
plotOptions.pie.borderColor: '#f2f2f2' it also didn't work.
Here is the full code :
$('#PreQualifiedChart').highcharts({
chart: {
plotBackgroundColor: '#f2f2f2',
plotBorderWidth: 0,
plotShadow: false,
height: 300,
widht: 250,
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
title: null,
tooltip: {
headerFormat: '',
pointFormat : '{point.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: '#f2f2f2',
textShadow: '0px 1px 2px black'
}
},
center: ['50%', '50%'],
borderWidth: 0,
borderColor: '#f2f2f2'
}
},
series: [{
dataLabels: {
enabled: false,
},
type: 'pie',
name: '',
innerSize: '50%',
data: [
{
name: 'Submitted All Docs',
y: SAD,
color: '#4B99D2',
labels: {
enabled: false
},
},
{
name: 'Submitted Missing Docs',
y: SMD,
color: '#e5a34a',
labels: {
enabled: false
},
},
{
name: 'Not Submitted',
y: NS,
color: '#844b03',
labels: {
enabled: false
},
}
]
}]
});

I think that you can use marginTop, marginBottom etc. in your case. Here you can find information about this parameters in Highcharts API:
http://api.highcharts.com/highcharts#chart.marginTop
http://api.highcharts.com/highcharts#chart.marginBottom
http://api.highcharts.com/highcharts#chart.marginLeft
http://api.highcharts.com/highcharts#chart.marginRight
Here you can find an example how your chart may work with this approach:
chart: {
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
plotBackgroundColor: '#f2f2f2',
plotBorderWidth: 0,
plotShadow: false,
height: 200,
widht: 150,
},
http://jsfiddle.net/pe4csrr7/3/
Another idea is to use backgroundColor instead of plotbackgroundColor, here you can see an example how it may work:
chart: {
backgroundColor:'#f2f2f2',
plotBorderWidth: 0,
plotShadow: false,
height: 200,
widht: 150,
},
http://jsfiddle.net/pe4csrr7/4/
Regards,

Show Highcharts Pie Slice Name onhover

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

How to make a Highcharts semi-circle donut chart using Hightchart-ng

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.

Having trouble to show highchart for each element

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().