We Keep Coding

customized tooltip and linking values to formfields -- highcharts / columnrange

High everyone,
I am trying to get two things to happen. First, I want to create a custom tooltip for a columnrange-type series where the tooltip shows something like HIGH: 'this.point.high' and on a new line "LOW:" 'this.point.low'. Second, I would like these 'low' and 'high' values to populate a form field dynamically. For example, when a user drags the high value for the columnrange entry, I want this to dynamically update a number in the corresponding formfield that collects user input.
Here is a fiddle: https://jsfiddle.net/e9zqmy12/
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
var myChart;
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
// draw chart
myChart = Highcharts.chart('container',
{
chart: {
type: "line",
events: {
click: function (e) {
// find the clicked values and the series
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
},
drag: function (e) {
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
}
}
},
title: {
text: "Forecasting History"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Quarter"
},
plotBands: [{
color: 'rgba(204,153,255,0.2)', // Color value
from: 11.5, // Start of the plot band
to: 12.5, // End of the plot band
label: {
text: 'Forecast'
}
}]
},
yAxis: {
title: {
text: "Inflation (%)"
},
plotLines: [{
value: 0,
width: 2,
color: '#aaa',
zIndex: 10
}]
},
tooltip: {
style: {
color: 'black',
fontWeight: 'bold',
fontSize: 13
},
positioner: function () {
return { x: 80, y:0 };
},
shared: true,
headerFormat: '',
valueDecimals: 2,
shadow: false,
borderWidth: 2,
borderColor: '#000000',
shape: 'rect',
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [
{
name: 'Inflation',
data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Central Bank Forecast',
data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Your Forecast',
showInLegend: false,
data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
marker: {
radius: 2.5,
fillColor: 'red'
},
},{
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
}
}
},
name: 'Forecast Range',
color: 'rgba(255,0,0,.1)',
type: 'columnrange',
data: [[12,1,3]],
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: "+this.point.low + " HIGH:" +this.point.high;
}
},
dragDrop: {
draggableY: true,
groupBy: 'GroupId',
dragMinY: -10,
dragMaxY: 10,
dragPrecisionY: .01,
liveRedraw: false
},
}
],
});

It seems that your code was almost good except this callback pointFormatter callback - notice that this calls for point already, so this.point refers to undefined, it should be:
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: " + this.low + " <br>HIGH:" + this.high;
}
},
Demo: https://jsfiddle.net/BlackLabel/vbo6j9em/

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.chart is not a function?

I am getting the json data but its not showing in jsp page. In console Uncaught TypeError: Cannot read property 'navigator' of undefined exporting.js:9 and export-data.js:10 Uncaught TypeError: Cannot read property 'document' of undefined and highcharts.chart is not a function
I have copy the highchart js file in my local path
<script src="${resourceUrl}/js/highchart/highcharts.js"></script>
<script src="${resourceUrl}/js/highchart/exporting.js"></script>
<script src="${resourceUrl}/js/highchart/export-data.js"></script>
<script>
$(document).ready(function(){
$.getJSON( "http://localhost:8080/mandatoryCheck/generate2", function(data) {
var chart = new Highcharts.chart('cvsMandCheckGraph', {
chart: {
type: 'column'
},
title: {
text: 'Top 5 Mandatory Checks Fail'
},
subtitle: {
text: ''
},
xAxis: {
categories: " ",
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
shadow: true
},*/
series: [{
colorByPoint: true,
data: data
}]
});
});
});
$(document).ready(function(){
$.getJSON( "http://localhost:8080/fieldModification/generate", function(data) {
var chart = new Highcharts.chart('cvsFieldModiChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
legend: {
itemStyle: {
fontSize: '10px'
}
},
subtitle: {
text: 'Top 5 Field Modifications'
},
xAxis: {
categories: []
},
tooltip: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{}</b><br>{point.percentage:.1f} %',
distance: -30,
color: '#fff',
style: {
textOutline: false ,
fontSize: 9,
},
filter: {
property: 'percentage',
operator: '>',
value: 4
}
},
showInLegend: true
}
},
series: [{
name: '',
style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' },
colorByPoint: true,
data: data
}]
});
});
});
</script>

You can make use of below CDN link.It will make sure the Highchart.chart is available.
If you are using jQuery make sure that jQuery CDN link should provide before Highchart Link
console.log(Highcharts.chart)
<script src="http://code.highcharts.com/highcharts.js"></script>

How to Use Column to Background Fill in Highchart

I need to use background fill for column in on my chart. I couldn't put background column over other main used column.
My chart display :
Scripts:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Günlük Endüktif - Kapasitif Ceza Limiti Değerleri'
},
subtitle: {
text: ''
},
xAxis: {
categories: result.DateList
},
yAxis: {
min: 0,
title: {
text: 'Oran (%)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 20,
stacking: 'normal',
animation: true,
grouping: 'false'
},
line: {
marker: {
enabled: false
}
},
series: {
grouping: 'false',
stacking : 'normal'
}
},
series:
[
//{
// name: result.Name,
// data: dynamic_data1,
// type: 'column'
//},
{
name: 'null',
data: [30, 30, 30, 30, 30],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
},
series, {
name: 'Ceza Limiti',
type: 'line',
data: result.Average,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
I need a result as :
So, where is my mistake in script or what is missing?