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
}]
});
};

high charts starting new line from each point

I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)

You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32

You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

Highcharts (JavaScript): Change color of column if condition is met

I want to create a dynamic chart that shows all bars in the same color except for the person, who looks at it (in this case: The person who is represented by Afrika, Amerika, etc. Do you have any idea how to do it (in an easy way)?
Thanks in advance!
Highcharts code from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
});

You can simply set color for the point in data:
Highcharts.chart('container', {
series: [{
type: 'bar',
data: [43934, {
y: 52503,
color: 'red'
}, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
If you want to change the color depending on some condition, you can use update method for point, for example in load event:
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.y > 8) {
p.update({
color: 'red'
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4ucx3skh/
API: https://api.highcharts.com/class-reference/Highcharts.Point#update

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image

The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

I need help using a variable to populate a table to create a Javascript scatter plot

I am trying to use this Javascript to create a scatter plot: http://www.highcharts.com/demo/scatter/gray
Im using it just like it shows there and when i copy the graph with the info from the example it works fine.
I created a function to populate the table to how I want...this is how my code looks
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
var rateValueData = <?php echo json_encode($data);?>;
$(function (scatter) {
$('#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: '#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: THIS IS WHERE I NEED TO USE THE VARIABLE!!!!
}, ]
});
});
</script>
so the function to create the Variable works but then how can i use that variable to populate the data for the graph
This is what the variable displays at when I echo it out:
var rateValueData = [["7.59090","104.2"],["1.58181","101.3636364"],["0.86363","106.5090909"],["0.7","73.86363636"],["2.7","94.38571429"],["2.48333","104.4727273"],["22.45","103"],["4.09090","105.3888889"],["1.91818","102.2909091"],["1.85","94.82727273"],["62.1","102.7666667"],["6.31818","100.7454545"],["2.31818","107.9545455"],["5.8","99.9625"],["1.92727","105.4727273"],["1.1","102.3"],["16.95","99.40909091"],["0.6","96.35"],["81.68","103.7909091"],["11.5818","116.7363636"],["2.64545","104.8111111"],["1.72","105.73"],["1.24545","104.9272727"],["1.35454","101.9363636"],["32.6363","99.05"],["15.5727","102.05"],["0.8","103.6"],["2.37272","109.7818182"],["0.9","99.62727273"],["4.05454","93.06363636"],["1.1","101.2272727"],["2.70909","102.5888889"],["1.35454","106.3363636"],["41.2181","101.3375"],["0.52727","104.4363636"],["14.8818","107.3909091"],["2.18333","98.82727273"],["3.7","66.70909091"],["10.3272","113.5545455"],["2.31428","96.51818182"],["1.14","101.7727273"],["11.9727","102.4272727"],["1.68571","101.3727273"],["1.48181","102.1454545"],["1.3","103.5181818"],["12.3090","100.8545455"],["0.91818","101.9272727"],["6.51","92.75"],["10.7818","98.05"],["21.46","97.95"],["8.35","98.85"],["7.6625","98.53"],["2.79090","106.1909091"],["1.17","107.3090909"],["19.9181","107.6909091"],["0.61666","50.03636364"],["2.68181","104.5818182"],["1.11428","80"],["1.93333","105.0454545"],["0.84545","99.36"],["2.46363","105.8714286"],["1.49090","104.9272727"],["50.4545","106.6636364"],["1.24545","103.9363636"],["1.01818","102.1636364"],["1.12727","104.7090909"],["2.22222","96.01818182"],["7.83636","101.4090909"],["4.5","98.98181818"],["8.99090","116.1571429"],["1.67272","105.1545455"],["6.25","106.5727273"]];
That is the data that I need to plot in the scatter chart.
Can anybody help me out?
Let me know if you need more info

The problem is your array contains string instead of numeric value.
Try with
var rateValueData = [[7.59090,104.2],[1.58181,101.3636364],[0.86363,106.5090909],[0.7,73.86363636],[2.7,94.38571429],[2.48333,104.4727273],[22.45,103],[4.09090,105.3888889],[1.91818,102.2909091],[1.85,94.82727273],[62.1,102.7666667],[6.31818,100.7454545],[2.31818,107.9545455],[5.8,99.9625],[1.92727,105.4727273],[1.1,102.3],[16.95,99.40909091],[0.6,96.35],[81.68,103.7909091],[11.5818,116.7363636],[2.64545,104.8111111],[1.72,105.73],[1.24545,104.9272727],[1.35454,101.9363636],[32.6363,99.05],[15.5727,102.05],[0.8,103.6],[2.37272,109.7818182],[0.9,99.62727273],[4.05454,93.06363636],[1.1,101.2272727],[2.70909,102.5888889],[1.35454,106.3363636],[41.2181,101.3375],[0.52727,104.4363636],[14.8818,107.3909091],[2.18333,98.82727273],[3.7,66.70909091],[10.3272,113.5545455],[2.31428,96.51818182],[1.14,101.7727273],[11.9727,102.4272727],[1.68571,101.3727273],[1.48181,102.1454545],[1.3,103.5181818],[12.3090,100.8545455],[0.91818,101.9272727],[6.51,92.75],[10.7818,98.05],[21.46,97.95],[8.35,98.85],[7.6625,98.53],[2.79090,106.1909091],[1.17,107.3090909],[19.9181,107.6909091],[0.61666,50.03636364],[2.68181,104.5818182],[1.11428,80],[1.93333,105.0454545],[0.84545,99.36],[2.46363,105.8714286],[1.49090,104.9272727],[50.4545,106.6636364],[1.24545,103.9363636],[1.01818,102.1636364],[1.12727,104.7090909],[2.22222,96.01818182],[7.83636,101.4090909],[4.5,98.98181818],[8.99090,116.1571429],[1.67272,105.1545455],[6.25,106.5727273]];
This demo is throwing an error
While this is working