How to draw single line graph using Highchart bullet graph? - javascript

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/

Related

ECharts Apache: Bar chart - add horizontal level line

I use EChart.JS in my project.
I need to add an accent as a horizontal level line for each bar. And also to add a default value.
var myChart = echarts.init(document.getElementById("sleep_graph"), null, { renderer: 'svg' });
var option;
option = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4],
show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
data: [
{
value: #sleepGraph.DeepSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.DeepSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.DeepSleepDurationGraphColor',
fontWeight: 'bold'
},
labelLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'black',
width: 55,
}
}
},
{
value: #sleepGraph.SleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.SleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.SleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.LightSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.LightSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.LightSleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.RemSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.RemSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.RemSleepDurationGraphColor',
fontWeight: 'bold'
}
}
],
type: 'bar',
barWidth: 35,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
I failed to see your image but from your description, I think it's possible to do so with an extra bar series stacking on it. See examples at: https://www.makeapie.com/editor.html?c=xwigwFaytn and https://www.makeapie.com/editor.html?c=xD58D_iJlS .
According to ESChart, there's only chart line has markline property (But it only provide single markline). So there's no way to add horizontal level line to bar chart in ESChart.js
But you can try highcharts, it provides adding marker at the chart.
marker: {
symbol: 'c-rect',
lineColor: 'red',
lineWidth:3,
radius: 10
},
type: 'scatter',
Edit:
ApexChart
It's MIT licence and it support showing markers on chart
https://jsfiddle.net/s3xfqw6p/

Issue with increasing the size of the highlighted area

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/

Highcharts bar format datalabels to percent and add text

I have highcharts bar.
How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ?
In the end, it should turn out like this in a horizontal or vertical solution.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Activity'
},
xAxis: {
categories: ['Activity']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
borderWidth: 0,
stacking: 'normal',
pointWidth: 3,
dataLabels: {
enabled: true,
y: 2,
verticalAlign: 'top',
align: 'left',
color: '#000000',
style: {
textOutline: false
}
}
}
},
series: [{
name: 'One',
data: [10],
color: '#f45b69'
}, {
name: 'Two',
data: [20],
color: '#44bba4'
}, {
name: 'Three',
data: [30],
color: '#ff9f1c'
}]
});
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
To just show the number with a percentage sign behind as well as the series name you can set the dataLabels format like this:
plotOptions: {
series: {
format: '{y} % <br/> {series.name}',
...
}
}
If you want to change how it looks or have more customize-ability you can use formatter instead of format.
Working example: https://jsfiddle.net/ewolden/y5ygdx2a/1/
API on dataLabels.format: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format

How can I style my highcharts solid gauge to have a background behind the percentage?

I need to style it to look like this:
This is the closest I've gotten. The trouble I'm having is achieving that gray background. I tried to do it with CSS but the html generated by highcharts makes that very difficult for me.
http://jsfiddle.net/60x7vkc2/1/
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '95%'],
size: '190%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ddd',
outerRadius: '100%',
innerRadius: '90%',
shape: 'arc',
borderColor: 'transparent',
}
},
tooltip: {
enabled: false
},
title: {
style: {
color: '#666',
fontSize: '16px',
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
}
},
// the value axis
yAxis: {
stops: [
[0.1, '#c62026'], // red
[0.25, '#e77525'], // orange
[0.75, '#70be44'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 0,
tickWidth: 0,
title: {
y: -50
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
innerRadius: '90%',
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
},
}
},
credits: {
enabled: false
},
};
// ON TARGET
$('#ex-gauge').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100
},
title: {
text: 'Title',
},
series: [{
name: 'customers',
data: [63.7],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;' +
'black' + '">{y}%</span>'
}
}]
}));
});
I added the "prc" class to the div and created new css rules.
Fiddle demo
CSS
.prc {
position: relative;
top: 0px;
width: 70px;
height: 35px;
background-color: #ddd;
border-radius: 70px 70px 0 0;
}
.prc span {
position: relative;
top: 12px;
}
Script
series: [{
name: 'customers',
data: [63.7],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-size:14px;' +
'black' + '">{y}%</span>'
}
}]

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

Categories