We Keep Coding

Created function for highchart is not taking values and showing properly

Hi I try to create spider chart using high chart but it taking first 4 values(parm1,parm2,parm3,parm4) properly but not the other 4 values (data1,data2,data3,data4)
i am using this code to call these values finalResults.innerHTML += spiderChart (PM,AF,AT,AD,dataPM,dataAF,dataAT,dataAD) + "<br>" values of PM,AF,AT and AD are showing properly in spider chat but for data dataPM,dataAF,dataAT,dataAD it is showing nothing ... i check the function by replacing variable with acctual value and it was working properly... please let me know what is wrong here ?
function spiderChart(parm1,parm2,parm3,parm4,data1,data2,data3,data4) {
$('#container2').highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: '&nbsp',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: [parm1,parm2,parm3,parm4],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true,
showLastLabel: true,
tickPositions: [10, 20, 30, 40, 50, 60, 70 , 80]
},
credits: {
enabled: false
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
y: 30,
layout: 'vertical'
},
series: [{
name: 'Maturity',
data: [data1,data2,data3,data4],
pointPlacement: 'on',
color: 'green',
fillOpacity: 0.2
}]
});
};

Highcharts. Dynamic labels inside donut chart on mouseOver

so this is what I'm trying to acomplish:
Example
What I need is:
Label inside donut chart changing on mouse over
Color depending on data
Styling label to look like the picture
I actually managed to do the mouse over but I can't change the color according to data and place it in the middle
Here is a fiddle: https://jsfiddle.net/9cjxb97a/1/
Here is the code I wrote so far:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
colors: ['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize: '80%'
}],
});
Thanks

Here's your code to display value in between circle.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
exporting:{
enabled:false
},
tooltip: {
enabled:false
},
colors:['red', 'blue', 'green'],
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
},
series: {
point: {
events: {
mouseOver: function () {
var chart = this.series.chart;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
})
.css({
color: 'red',
})
.add();
}
chart.lbl
.show()
.attr({
text: this.y + '%'
});
}
}
},
},
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
headerFormat: '',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '<span style="font-size:40px;color:black; font-weight: bold">{point.y}%</span><br><span>50 Kg</span>{point.custom.customParam}',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: this.chart.plotHeight/2
};
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}],
innerSize:'80%'
}],
});

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,

data label is not shown Highcharts

I'm trying to show datalabels. but DATALABEL the black bar is not shown. why?
http://jsfiddle.net/o4pt855e/
other bars are displayed well. I take this opportunity to ask how I can put a condition ?. if the value is less than 5, the DATALABEL be shown to the left, otherwise the right.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Mi EPS'
},
xAxis: {
//categories: ["number1", "number2", "number3", "number4","number5"],
title: {
text: null
},
labels: {
// align: 'center',
x: -5,
y: -20,
useHTML: true,
format: '<div style="position: absolute; left: 40px"> my labelL is very large ***************************************this in other line! </div> <img style="height: 30px; width: 30px; margin-top: 10px" src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}
},
yAxis: {
title: {
text: 'Resultado',
align: 'right'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
inside: true,
crop: false,
overflow:"none",
formatter: function() {
return this.series.name+ " "+ this.y;
console.log(this.series.name);
},
style:{
width:100
}
}
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
x: -40,
y:40 ,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Mejor Eps',
data: [1000, 950,920,880,850],
color: "#FF0000"
}, {
name: 'Mi Eps',
data: [800,770,750,740,730],
color: "#000000"
}, {
name: 'Peor Eps',
data: [600,540,535,500,0],
color: "#00FF00"
}]
});
});

Defaulty each datalabel has a padding and when overlaps other label then is hidden. So you need to set padding as 0 and allowOverlap option as true.
plotOptions: {
bar: {
dataLabels: {
padding:0,
allowOverlap:true,
enabled: true,
align: 'left',
color: '#FFFFFF',
inside: true,
crop: false,
overflow:"none",
formatter: function() {
return this.series.name+ " "+ this.y;
console.log(this.series.name);
},
style:{
width:100
}
}
}
},
http://jsfiddle.net/vj19ukbc/

how to create scatter dotted graph in php?

i getting issue create dynamic dotted graph in php data fetch data base y-axis data ploat and x-axis date required but getting issue pls give me some hint or google line
i am using this code but x-axis not display date
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[07/07/2004, 51.6], [07/026/2004, 59.0], [08/01/2004, 49.2], [08/26/2004, 63.0]]
}]
}]
}); });