HighCharts getting data from database to outside js file - javascript

I'm trying to populate a HighCharts with results from SQL Server in Classic ASP.
As long as the js is in the asp file the code is working, assume n11=2 ie.
<script>
$(function () {
var N = '<% = n11 %>'
var brcolor = []
var tl = []
var frcolor = []
var rd = []
var inrd = []
var otrd = []
var gg = []
var zeva = []
var ovi = []
brcolor[1] = '#666666'
brcolor[2] = '#666666'
tl[1] = 'name1'
tl[2] = 'name2'
frcolor[1] = '#666666'
frcolor[2] = '#666666'
rd[1] = '109%'
rd[2] = '96%'
inrd[1] = '112%'
inrd[2] = '106%'
otrd[1] = '99%'
otrd[2] = '93%'
gg[1] = 80
gg[2] = 65
zeva[1] = '#eeeeee'
zeva[2] = '#eeeeee'
zeva[3] = '#ffffff'
ovi[1] = 1
ovi[2] = 1
ovi[3] = 0
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'rgba(255,255,255,0.002)'
},
colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],
tooltip: {
style: {
color: '#a0a0a0'
}
}
});
}
Highcharts.chart('11', {
chart: {
type: 'solidgauge',
margin: [0, 0, 0, 0]
},
title: {
text: '',
style: {
fontSize: '12px'
}
},
tooltip: {
borderWidth: 1,
backgroundColor: 'white',
shadow: false,
useHTML: true,
style: {
fontSize: '14px',
fontFamily: 'arial',
direction: 'rtl'
},
pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
// positioner: function (labelWidth, labelHeight) {
// return {
// x: 120 - labelWidth / 2,
// y: 20
// };
// }
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '112%',
innerRadius: '106%',
backgroundColor: zeva[1],
borderWidth: ovi[1]
}, {
outerRadius: '99%',
innerRadius: '93%',
backgroundColor: zeva[2],
borderWidth: ovi[2]
}, {
outerRadius: '86%',
innerRadius: '80%',
backgroundColor: zeva[3],
borderWidth: ovi[3]
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
borderWidth: '6px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: []
});
var newSeries = []
for (var i = 1; i <= N; i++) {
var newData = [];
var seria = {};
var datai = {};
datai['color'] = frcolor[i];
datai['radius'] = rd[i];
datai['innerRadius'] = rd[i];
datai['y'] = gg[i];
seria['borderColor'] = brcolor[i];
seria['name'] = tl[i];
seria['data'] = [datai];
newSeries.push(seria);
}
var chart = $('#11').highcharts();
$.each(newSeries, function (i, ns) {
chart.addSeries(ns, false);
});
chart.redraw();
});
</script>
But when I have a separate js file (11.js) and includ it in the file head it does not work.
The head line
<script type=text/javascript src=charts/11.js></script>
The js is:
$(function () {
var N = '<% = n11 %>'
var brcolor = []
var tl = []
var frcolor = []
var rd = []
var inrd = []
var otrd = []
var gg = []
var zeva = []
var ovi = []
brcolor[1] = '#666666'
brcolor[2] = '#666666'
tl[1] = 'name1'
tl[2] = 'name2'
frcolor[1] = '#666666'
frcolor[2] = '#666666'
rd[1] = '109%'
rd[2] = '96%'
inrd[1] = '112%'
inrd[2] = '106%'
otrd[1] = '99%'
otrd[2] = '93%'
gg[1] = 80
gg[2] = 65
zeva[1] = '#eeeeee'
zeva[2] = '#eeeeee'
zeva[3] = '#ffffff'
ovi[1] = 1
ovi[2] = 1
ovi[3] = 0
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'rgba(255,255,255,0.002)'
},
colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],
tooltip: {
style: {
color: '#a0a0a0'
}
}
});
}
Highcharts.chart('11', {
chart: {
type: 'solidgauge',
margin: [0, 0, 0, 0]
},
title: {
text: '',
style: {
fontSize: '12px'
}
},
tooltip: {
borderWidth: 1,
backgroundColor: 'white',
shadow: false,
useHTML: true,
style: {
fontSize: '14px',
fontFamily: 'arial',
direction: 'rtl'
},
pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
// positioner: function (labelWidth, labelHeight) {
// return {
// x: 120 - labelWidth / 2,
// y: 20
// };
// }
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '112%',
innerRadius: '106%',
backgroundColor: zeva[1],
borderWidth: ovi[1]
}, {
outerRadius: '99%',
innerRadius: '93%',
backgroundColor: zeva[2],
borderWidth: ovi[2]
}, {
outerRadius: '86%',
innerRadius: '80%',
backgroundColor: zeva[3],
borderWidth: ovi[3]
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
borderWidth: '6px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: []
});
var newSeries = []
for (var i = 1; i <= N; i++) {
var newData = [];
var seria = {};
var datai = {};
datai['color'] = frcolor[i];
datai['radius'] = rd[i];
datai['innerRadius'] = rd[i];
datai['y'] = gg[i];
seria['borderColor'] = brcolor[i];
seria['name'] = tl[i];
seria['data'] = [datai];
newSeries.push(seria);
}
var chart = $('#11').highcharts();
$.each(newSeries, function (i, ns) {
chart.addSeries(ns, false);
});
chart.redraw();
});
If I'm doing the same but putting a number instead of '<% = n11 %>' it is Ok too.
What am I doing wrong?


If I understand you correctly, you want to know how to access your data from an external JavaScript file.
Here is a plnkr using requirejs to achieve this.
Additionally, you mentioned that when you change <% = n11 %> to a number then it's also ok. The reason for this is that you are accessing N in a loop, and then evaluating N against i. But <% = n11 %> doesn't evaluate to a number, so the loop doesn't work unless you change it to a number, then it will loop that many times.
In the demo I've changed it to 2, because that's the average length of your data arrays.
Also, since you want to create gauges, and they typically don't have multiple sets of data, I thought maybe you wanted multiple gauges, so I modified the demo provided in the solidgauge api documentation on highcharts.

Related

Create star rating guage chart using jquery

I want to create chart as above. I ahve tried multiple ways to do but couldn't get any correct one.
Some sample code i'm showing below:
HTML code:
<canvas class='chartjs-gauge'></canvas>
JS CODE:
var config6 = {
type:"doughnut",
data: {
labels : ["Positive","Negative"],
datasets: [{
label: "Gauge",
data : [190, 10],
backgroundColor: [ "green","red" ]
}]
},
options: {
circumference: Math.PI,
rotation : Math.PI,
cutoutPercentage : 40, // precent
plugins: {
datalabels: {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#ffffff',
color: function(context) {
return context.dataset.backgroundColor;
},
font: function(context) {
var w = context.chart.width;
return {
size: w < 512 ? 18 : 20
}
},
align: 'start',
anchor: 'start',
offset: 10,
borderRadius: 4,
borderWidth: 1,
formatter: function(value, context) {
var i = context.dataIndex;
var len = context.dataset.data.length - 1;
if(i == len){
return null;
}
return value+' mph';
}
}
},
legend: {
display: true
},
tooltips: {
enabled: true
}
}
};
But it is only showing chart as below:
Anybody know how to do it?

Highcharts Column Chart - pointRange causes extra space to the right

I need to display two sets of data on an existing Highcharts column chart in my codebase. The current chart represents a 24 timespan with millisecond units.
For one dataset each value spans an hour while for the other dataset the value spans 6 minutes. I am able to show these values on Highcharts, and even use pointRange to have the data span the proper width of the chart but then there is a gap with no data to the right of the chart. This ruins the formatting in context of the rest of the application.
Is there a way to avoid this extra spacing? If I remove pointRange, the extra spacing is gone on the right but the bars do not fill the area like I want them to.
Here are jsfiddles for each case:
with pointRange: https://jsfiddle.net/eh5fgcw6/62/
const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;
const MS_IN_ONE_DAY = 86400000;
const size = 'LARGE';
const COLORS = {
'black': '#000000',
'gray_1': '#222222',
'gray_2': '#7A7A7A',
'gray_3': '#888888',
'gray_4': '#B2B2B2',
'gray_5': '#CBCBCB',
'gray_6': '#E6E6E6',
'gray_7': '#EEEEEE',
'gray_8': '#F9F9F9',
'gray_9': '#FAFAFA',
'blue_1': '#3397ed',
'blue_2': '#11a9ed',
'blue_3': '#70CAFF',
'blue_4': '#0e334c',
'blue_5': '#b0e1f7',
'blue_6': '#beeffF',
'blue_7': '#0e334c',
'blue_8': '#8CD3FA',
'blue_9': '#73D4FF',
'green_1': '#9AF144',
'green_2': '#76FFE5',
'green_3': '#72ea24',
'green_4': '#50b012',
'green_5': '#B6D56B',
'orange_1': '#E9AE00',
'orange_2': '#FED7A5',
'red_1': '#F02751',
'red_2': '#FF0035'
};
const parseISOUTC = function(value) {
return moment(value).toDate();
}
const mergedSummary = {
startTimeGmt: "2018-07-09T21:00:00.0"
};
const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};
const getEmptyBookends = function() {
return [
[parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
[parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
];
}
const getLowerTimelineData = function() {
const indexes = {};
const data = [];
let x, y, color, dataType;
const chartDataArray = myChartData.monitoringEnvironmentValuesArray;
// Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
});
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display
for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
x = chartDataArray[j][indexes['timestamp']];
y = chartDataArray[j][indexes['reading']];
color = COLORS.gray_9;
dataType = 'stress';
y = -5;
color = COLORS.gray_9;
dataType = 'stress';
data.push({
x: x,
y: y,
color: color,
type: dataType
});
}
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display
return data;
}
const getXAxesConfig = function(size) {
const xAxis = [];
xAxis.push({
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
minRange: MIN_ZOOM_IN_MS
});
xAxis[0].min = 1531170000000;
xAxis[0].max = 1531256400000;
return xAxis;
}
const getYAxesConfig = function(size) {
const yAxis = [];
const maxValue = 710;
yAxis.push({
labels: {
align: 'left',
x: 2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
title: {
text: 'BOTTOM',
margin: 0
},
opposite: true,
allowDecimals: false,
max: maxValue,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
},
}, {
title: {
text: 'TOP',
margin: 0
},
labels: {
align: 'right',
x: -2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
max: 100,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [-5, 25, 50, 75, 100];
},
})
return yAxis;
}
const buildSeries = function() {
const series = [];
const lowerTimelineData = getLowerTimelineData();
const chartData = myChartData.monitoringEnvironmentValuesArray;
const spoChartData = myChartData.valuesArray;
series.push({
name: 'top data',
type: 'column',
yAxis: 1,
data: spoChartData,
tooltip: {
valueSuffix: '%'
},
threshold: Infinity,
zones: [{
value: 70,
color: '#ed7e00'
}, {
value: 80,
color: '#FC9E31'
}, {
value: 90,
color: '#F6E639'
}, {
value: 101,
color: '#54AE25'
}],
pointPadding: 0,
// pointInterval: 3600 * 1000,
groupPadding: 0,
borderWidth: 0,
pointRange: 3600 * 2000,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
showInLegend: false,
pointPlacement: 'between'
}, {
name: 'bottom data',
type: 'column',
yAxis: 0,
zIndex: 1,
data: chartData,
tooltip: {
valueSuffix: 'k'
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
color: '#C7C7C7',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
// pointInterval: 3600 * 200,
pointRange: 3600 * 200,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
// events: {
// legendItemClick: function () {
// return false;
// }
// },
pointPlacement: 'between'
}, {
type: 'column',
data: lowerTimelineData,
color: COLORS.gray_3,
name: 'base data',
showInLegend: false,
yAxis: 0,
zIndex: 1,
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0,
events: {
legendItemClick: function() {
return false;
}
},
pointRange: 3600 * 200,
// pointInterval: 3600 * 200,
pointPlacement: 'between',
threshold: -Infinity
})
if(series.length > 0) {
series.push({
type: 'line',
color: COLORS.blue_7,
name: "hidden_series",
showInLegend: false,
data: getEmptyBookends()
});
}
return series;
}
Highcharts.chart('container', {
backgroundColor: 'transparent',
marginBottom: 95,
marginTop: 50,
marginLeft: 48,
marginRight: 48,
height: 365,
reflow: true,
zoomType: 'x',
resetZoomButton: {
theme: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
legend: {
itemDistance: 22,
borderColor: "transparent",
useHTML: true,
symbolHeight: 10,
y: 20,
labelFormatter: function() {
return this.name;
},
itemStyle: {
fontWeight: 'normal',
lineHeight: '20px'
}
},
series: buildSeries(),
xAxis: getXAxesConfig(size),
yAxis: getYAxesConfig(size)
});
without pointRange: https://jsfiddle.net/eh5fgcw6/60/
const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;
const MS_IN_ONE_DAY = 86400000;
const size = 'LARGE';
const COLORS = {
'black': '#000000',
'gray_1': '#222222',
'gray_2': '#7A7A7A',
'gray_3': '#888888',
'gray_4': '#B2B2B2',
'gray_5': '#CBCBCB',
'gray_6': '#E6E6E6',
'gray_7': '#EEEEEE',
'gray_8': '#F9F9F9',
'gray_9': '#FAFAFA',
'blue_1': '#3397ed',
'blue_2': '#11a9ed',
'blue_3': '#70CAFF',
'blue_4': '#0e334c',
'blue_5': '#b0e1f7',
'blue_6': '#beeffF',
'blue_7': '#0e334c',
'blue_8': '#8CD3FA',
'blue_9': '#73D4FF',
'green_1': '#9AF144',
'green_2': '#76FFE5',
'green_3': '#72ea24',
'green_4': '#50b012',
'green_5': '#B6D56B',
'orange_1': '#E9AE00',
'orange_2': '#FED7A5',
'red_1': '#F02751',
'red_2': '#FF0035'
};
const parseISOUTC = function(value) {
return moment(value).toDate();
}
const mergedSummary = {
startTimeGmt: "2018-07-09T21:00:00.0"
};
const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};
const getEmptyBookends = function() {
return [
[parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
[parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
];
}
const getLowerTimelineData = function() {
const indexes = {};
const data = [];
let x, y, color, dataType;
const chartDataArray = myChartData.monitoringEnvironmentValuesArray;
// Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
});
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display
for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
x = chartDataArray[j][indexes['timestamp']];
y = chartDataArray[j][indexes['reading']];
color = COLORS.gray_9;
dataType = 'stress';
y = -5;
color = COLORS.gray_9;
dataType = 'stress';
data.push({
x: x,
y: y,
color: color,
type: dataType
});
}
data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display
return data;
}
const getXAxesConfig = function(size) {
const xAxis = [];
xAxis.push({
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
minRange: MIN_ZOOM_IN_MS
});
xAxis[0].min = 1531170000000;
xAxis[0].max = 1531256400000;
return xAxis;
}
const getYAxesConfig = function(size) {
const yAxis = [];
const maxValue = 710;
yAxis.push({
labels: {
align: 'left',
x: 2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
title: {
text: 'BOTTOM',
margin: 0
},
opposite: true,
allowDecimals: false,
max: maxValue,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
},
}, {
title: {
text: 'TOP',
margin: 0
},
labels: {
align: 'right',
x: -2,
formatter: function() {
return this.value;
}
},
showFirstLabel: false,
max: 100,
min: 0,
endOnTick: false,
// Manually set the positions of the y axis tick marks
tickPositioner: function() {
return [-5, 25, 50, 75, 100];
},
})
return yAxis;
}
const buildSeries = function() {
const series = [];
const lowerTimelineData = getLowerTimelineData();
const chartData = myChartData.monitoringEnvironmentValuesArray;
const spoChartData = myChartData.valuesArray;
series.push({
name: 'top data',
type: 'column',
yAxis: 1,
data: spoChartData,
tooltip: {
valueSuffix: '%'
},
threshold: Infinity,
zones: [{
value: 70,
color: '#ed7e00'
}, {
value: 80,
color: '#FC9E31'
}, {
value: 90,
color: '#F6E639'
}, {
value: 101,
color: '#54AE25'
}],
pointPadding: 0,
// pointInterval: 3600 * 1000,
groupPadding: 0,
borderWidth: 0,
// pointRange: 3600 * 1000,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
showInLegend: false,
pointPlacement: 'between'
}, {
name: 'bottom data',
type: 'column',
yAxis: 0,
zIndex: 1,
data: chartData,
tooltip: {
valueSuffix: 'k'
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
color: '#C7C7C7',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0,
// pointInterval: 3600 * 200,
// pointRange: 3600 * 200,
// pointWidth: 10,
states: {
hover: {
enabled: false
}
},
// events: {
// legendItemClick: function () {
// return false;
// }
// },
pointPlacement: 'between'
}, {
type: 'column',
data: lowerTimelineData,
color: COLORS.gray_3,
name: 'base data',
showInLegend: false,
yAxis: 0,
zIndex: 1,
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0,
events: {
legendItemClick: function() {
return false;
}
},
// pointRange: 3600 * 200,
// pointInterval: 3600 * 200,
pointPlacement: 'between',
threshold: -Infinity
})
if(series.length > 0) {
series.push({
type: 'line',
color: COLORS.blue_7,
name: "hidden_series",
showInLegend: false,
data: getEmptyBookends()
});
}
return series;
}
Highcharts.chart('container', {
backgroundColor: 'transparent',
marginBottom: 95,
marginTop: 50,
marginLeft: 48,
marginRight: 48,
height: 365,
reflow: true,
zoomType: 'x',
resetZoomButton: {
theme: {
display: 'none'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
legend: {
itemDistance: 22,
borderColor: "transparent",
useHTML: true,
symbolHeight: 10,
y: 20,
labelFormatter: function() {
return this.name;
},
itemStyle: {
fontWeight: 'normal',
lineHeight: '20px'
}
},
series: buildSeries(),
xAxis: getXAxesConfig(size),
yAxis: getYAxesConfig(size)
});

Add gridline on dynamic marker highchart

I have this dynamic chart, Can I ask on how can I add a horizontal gridline that is moving together with the marker ? and also a vertical gridline that is like 60second far from the current marker?
Highcharts.theme = {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
chart: {
backgroundColor: 'transparent',
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
jugalsLib = {
defaults: {
//interval: 24 * 60 * 60 * 1000,
minValue: 0,
maxValue: 10000,
maxDeviationPercentOfRange: 5,
numberOfSeries : 1
},
variables: {
seriesCounter: 0
},
nextValue: function(currValue, options) {
var settings = $.extend({}, jugalsLib.defaults, options || {}),
nextValue,
offset;
currValue=currValue || (settings.maxValue + settings.minValue) / 2;
settings.maxDeviation =
settings.maxDeviation ||
(settings.maxValue - settings.minValue) * settings.maxDeviationPercentOfRange / 100;
while (nextValue === undefined || nextValue < settings.minValue || nextValue > settings.maxValue) {
offset = Math.random() * settings.maxDeviation * 2;
nextValue = currValue - settings.maxDeviation + offset;
}
return nextValue;
},
createSeries: function(options) {
var settings = $.extend({}, jugalsLib.defaults, options || {}),
data = [],
currValue,
i,
time,
valuePair;
time = new Date().getTime();
for (i = 0; i < settings.sampleCount; i++) {
currValue = jugalsLib.nextValue(currValue, settings);
valuePair = [];
time += settings.interval;
valuePair.push(time);
valuePair.push(currValue);
data.push(valuePair);
}
return {
name: 'orvie test data',
data: data
};
}
};
jugalsLib.getBasicChartOptions = function(numberOfSeries,seriesOptions) {
$("#container").mousemove(move);
var options = {
chart: {
renderTo: 'container',
},
title: {
text: 'test'
},
subtitle: {
useHTML: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
gridLineWidth: 1,
maxPadding: 0.5,
navigator: true,
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
plotOptions: {
line: {
marker: {
enabled: false,
radius: 2,
},
states: {
hover: {
radiusPlus: 1,
lineWidthPlus: 0
},
}
},
series: {
lineWidth: 1.5,
dataLabels: {
align: 'center',
enabled: false,
},
showInLegend: false,
hover: {
lineWidthPlus: 0,
animation: { "duration": 1 }
},
states: {
hover: {
halo: {
size: 1,
attributes: {
fill: Highcharts.getOptions().colors[2],
'stroke-width': 7,
stroke: Highcharts.getOptions().colors[4]
}
}
}
},
},
}
};
numberOfSeries = numberOfSeries || jugalsLib.defaults.numberOfSeries;
if(numberOfSeries>0){
var i;
options.series=[];
for(i=0;i<numberOfSeries;i++)
options.series.push(jugalsLib.createSeries(seriesOptions));
}
return options;
};
var interval=1000;
var a=0;
var coor_x;
var coor_y;
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chartingOptions = {
chart: {
renderTo: 'container',
events: {
load: function() {
var series = this.series[0];
var series2 = this.series[1];
len = series.data.length;
this.addSeries({
id: 'end point',
type: 'scatter',
marker: {
enabled:true,
symbol:'circle',
radius:3,
fillColor:'white',
lineWidth:2,
states: {
hover: {
enabled: 'true',
},
},
},
data: [[
series.data[len - 1].x,
series.data[len - 1].y
]]
});
var series3= this.get('end point');
setInterval(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var ix = p.x + interval;
var vv = jugalsLib.nextValue(p.y);
var w = ix + 30000,
z = jugalsLib.nextValue(p.y);
var v;
a = 0;
if (a == 1) {
v = {
y: vv,
x: ix,
};
}
else {
v = {
y: vv,
x: ix,
};
}
series.addPoint(v, true, true);
series3.data[0].setState('hover');
series3.data[0].update(v);
series3.data[0].setState();
series2.addPoint([w,z], true, true);
document.getElementById("coor_y").value = jugalsLib.nextValue(p.y).toFixed(4);
}, interval);
},
}
},
rangeSelector: {
enabled: true,
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 4,
type: 'minute',
text: '4M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0,
},
navigator:{
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'AAPZ',
type: 'area',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -300; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.random() * 10000
]);
}
return data;
}()),
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
enabled: false,
radius: 2,
},
},{
name: 'AAPL',
type: 'area',
enableMouseTracking: false,
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime()+30000,
i;
for (i = -300; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.random() * 10000
]);
}
return data;
}()),
gapSize: 5,
color: 'transparent',
}]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(1, {
sampleCount: 300,
interval: interval
}), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
var x=1;
var count = 0;
$("#btngreen").click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
// document.getElementById("amount"+ id++ +"").value = jugalsLib.nextValue(p.y).toFixed(4);
//document.getElementById("range").value = "up";
var d = document.getElementById('order');
var amount = document.getElementById("coor_y").value;
var range = 'up';
d.innerHTML += "Call&nbsp: <input type='text' maxlength='5' size='5' id='amount"+ x +"' value = "+amount+">&nbsp";
d.innerHTML += "End: <input type='text' maxlength='5' size='5' id='end"+ x +"' value = '--rolling--'>&nbsp";
d.innerHTML += "Range: <input type='text' id='range"+ x +"' value = "+range+" maxlength='4' size='4'><br>";
p.update({
marker: {
symbol: 'Circle',
fillColor: "#02CD0E",
lineColor: "A0F0",
radius: 2,
enabled:true,
},
dataLabels: {
align: 'right',
enabled: true,
shape: 'callout',
padding: 1,
overflow: "none",
backgroundColor: '#02CD0E',
style: {"color": "contrast", "fontSize": "10px" },
formatter: function() {
return document.getElementById("bet").value;
}
}
});
a = 1;
if (x <= 1 ){
countdown();
}
x++;
count++;
document.getElementById("count").value = count;
});
$("#btnred").click(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var d = document.getElementById('order');
var amount = document.getElementById("coor_y").value;
var range = 'down';
d.innerHTML += "Put&nbsp&nbsp: <input type='text' maxlength='5' size='5' id='amount"+ x +"' value = "+amount+">&nbsp";
d.innerHTML += "End: <input type='text' maxlength='5' size='5' id='end"+ x +"' value = '--rolling--'>&nbsp";
d.innerHTML += "Range: <input type='text' id='range"+ x +"' value = "+range+" maxlength='4' size='4'><br>";
p.update({
marker: {
symbol: 'Circle',
fillColor: "#FF0124",
lineColor: "A0F0",
radius: 2,
enabled:true,
},
dataLabels: {
align: 'right',
enabled: true,
shape: 'callout',
padding: 1,
overflow: "none",
backgroundColor: '#FF0124',
style: {"color": "contrast", "fontSize": "10px" },
formatter: function() {
return document.getElementById("bet").value;
}
}
});
a = 1;
if (x <= 1 ){
countdown();
}
x++;
count++;
document.getElementById("count").value = count;
});
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById("counter");
// alert(counter);
seconds--;
counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
clearInterval(counter);
if( seconds < 15 ){
document.getElementById('btngreen').style.visibility = 'hidden';
document.getElementById('btnred').style.visibility = 'hidden';
}
}
else {
var count = document.getElementById("count").value
var i;
for(i = 1; i <= count; i++){
var amountid = "amount" + i;
var rangeid = "range" + i;
var end = "end" + i;
// console.log(amountid);
var current = document.getElementById("coor_y").value;
var amount = document.getElementById(amountid).value;
var range = document.getElementById(rangeid).value;
var endid = "end" + i;
document.getElementById(endid).value = document.getElementById("coor_y").value;
//console.log(amount);
//console.log(range) ;
if (current > amount && range == 'up'){
document.getElementById(amountid).style.color = "#66CD00"
}
else if (current > amount && range == 'down'){
document.getElementById(amountid).style.color = "#FF0000";
}
else if (current < amount && range == 'up'){
document.getElementById(amountid).style.color = "#FF0000";
}
else if (current < amount && range == 'down'){
document.getElementById(amountid).style.color = "#66CD00";
}
}
}
}
tick();
}
function move(event) {
var x = event.pageX,
y = event.pageY,
labelPadding = [0, 0, 0, 0],
path = ['M', chart.plotLeft, y,
'L', chart.plotLeft + chart.plotWidth, y,
'M', x, chart.plotTop,
'L', x, chart.plotTop + chart.plotHeight];
if (chart.crossLines) {
// update lines
if(chart.yAxis[0].toValue(y) > 0){
chart.crossLines.attr({
d: path
}).show();
}
} else {
if(chart.yAxis[0].toValue(y) > 0){
// draw lines
chart.crossLines = chart.renderer.path(path).attr({
'stroke-width': 1,
stroke: 'white',
dashstyle: 'Dash',
zIndex: 10
}).add();
}
}
if (chart.crossLabel) {
// update label
chart.crossLabel.attr({
y: y - 10,
text: chart.yAxis[0].toValue(y).toFixed(2),
zIndex: 9,
right: 0
}).show();
console.log(chart.crossLabel);
} else {
// draw label
chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotBottom, chart.plotTop + chart.plotHeight + 12 + labelPadding[0]).css({
color: 'white'
}).add();
}
}
If my question is confusing please refer to the image I attached.
For your reference, here is a working copy of what I am doing - https://jsfiddle.net/0hhfm32k/

Fiddle Demo with your config
it is 6 sec ahead instead of 60 sec when putting 60000 ie 60 sec it is out of display
setInterval(function() {
var l = chart.series[0].points.length;
var p = chart.series[0].points[l - 1];
var ix = p.x + interval;
var vv = jugalsLib.nextValue(p.y);
var w = ix + 30000,
z = jugalsLib.nextValue(p.y);
var v;
a = 0;
if (a == 1) {
v = {
y: vv,
x: ix,
};
} else {
v = {
y: vv,
x: ix,
};
}
series.addPoint(v, true, true);
series3.data[0].setState('hover');
series3.data[0].update(v);
series3.data[0].setState();
series2.addPoint([w, z], true, true);
document.getElementById("coor_y").value = jugalsLib.nextValue(p.y).toFixed(4);
yAxis.removePlotLine('avgLine');
yAxis.addPlotLine({
value: vv,
/*label: {
text: vv.toFixed(2),
verticalAlign: 'middle',
align: 'right',
rotation: 0,
},*/
color: 'red',
width: 4,
dashStyle: 'Dash',
id: 'avgLine'
});
xAxis.removePlotLine('ahLine');
xAxis.addPlotLine({
value: ix + 6000,
/*label: {
text: Highcharts.dateFormat('%I:%M:%S %p', ix+6000) ,
verticalAlign: 'middle',
align: 'right',
rotation: 0,
},*/
color: 'red',
width: 2,
dashStyle: 'Dash',
id: 'ahLine'
});
}, interval);

HighCharts column chart populated with series data from a function

I'm trying to populate a HighCharts dataset with results from SQL Server in Classic ASP. (In the examples obviously there are numbers and names instead of vbscript variables)
The first example is without a function - and works. http://jsfiddle.net/zbpamrhs/
$(function () {
var OnOff = 3
var DivName = []
var DivN = []
var DivTotal = []
var DivColor = []
DivName[0] = 'Div'
DivName[1] = 'Unit A'
DivName[2] = 'Unit B'
DivName[3] = 'Unit C'
DivN[0] = 22
DivN[1] = 10
DivN[2] = 7
DivN[3] = 3
DivTotal[0] = 5.6
DivTotal[1] = 5.8
DivTotal[2] = 5.4
DivTotal[3] = 5.7
DivColor[0] = '#333333'
DivColor[1] = '#c9e7ff'
DivColor[2] = '#4898a4'
DivColor[3] = '#ffd949'
$('#DivCompTotalC').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 180,
useHTML: true,
x: 0,
y: 40,
borderWidth: 0
},
xAxis: {
categories: ['']
},
yAxis: {
max: 7.01,
labels: {
enabled: false
},
gridLineColor: 'transparent',
plotLines: [{
value: DivTotal[0],
color: DivColor[0],
width: 2,
label: {
text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
align: 'right',
y: -5,
x: 0,
style: {
fontSize: '13px'
}
},
zIndex: 2
}],
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.10,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
y: 5,
style: {
fontSize: '14px'
}
},
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: [{
name: DivName[1] + ' [' + DivN[1] + ']',
color: '#c9e7ff',
data: [DivTotal[1]]
}, {
name: DivName[2] + ' [' + DivN[2] + ']',
color: '#ffd949',
data: [DivTotal[2]]
}, {
name: DivName[3] + ' [' + DivN[3] + ']',
color: '#4898a4',
data: [DivTotal[3]]
}]
});
});
I cannot find what's wrong in the second http://jsfiddle.net/bfb6crpv/
$(function () {
var OnOff = 3
var DivName = []
var DivN = []
var DivTotal = []
var DivColor = []
DivName[0] = 'Div'
DivName[1] = 'Unit A'
DivName[2] = 'Unit B'
DivName[3] = 'Unit C'
DivN[0] = 22
DivN[1] = 10
DivN[2] = 7
DivN[3] = 3
DivTotal[0] = 5.66666666666667
DivTotal[1] = 5.81208053691275
DivTotal[2] = 5.41304347826087
DivTotal[3] = 5.74683544303798
DivColor[0] = '#333333'
DivColor[1] = '#c9e7ff'
DivColor[2] = '#4898a4'
DivColor[3] = '#ffd949'
$('#DivCompTotalC').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 180,
useHTML: true,
x: 0,
y: 40,
borderWidth: 0
},
xAxis: {
categories: ['']
},
yAxis: {
max: 7.01,
labels: {
enabled: false
},
gridLineColor: 'transparent',
plotLines: [{
value: DivTotal[0],
color: DivColor[0],
width: 2,
label: {
text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
align: 'right',
y: -5,
x: 0,
style: {
fontSize: '13px'
}
},
zIndex: 2
}],
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.10,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
y: 5,
style: {
fontSize: '14px'
}
},
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: []
});
var newSeries = [];
for (var i = 1; i <= OnOff; i++) {
var newData = [];
var seria = {};
seria['name'] = DivName[i] + ' [' + DivN[i] + ']';
seria['data'] = DivTotal[i];
seria['color'] = DivColor[i];
newSeries.push(seria);
}
//alert(JSON.stringify(newSeries));
var chart = $('#DivCompTotalC').highcharts();
//alert(JSON.stringify(chart));
$.each(newSeries, function (i, ns) {
chart.addSeries(ns);
});
});

There are multiple issues :
You are trying to addSeries instead of points as compared to the first working fiddle. chart.addSeries(ns);
seria['data'] = DivTotal[i]; data is supposed to be an array as per the working fiddle.
Working fiddle with existing series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/
Working fiddle with no series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/
Docs - http://api.highcharts.com/highcharts#Series.addPoint
Related question : trying to dynamically update Highchart column chart but series undefined

Hide Series on Click with jQuery Flot

I have a Flot graph which I am trying to make it so that when you click a particular legend item it makes that data disappear from the chart.
I am having limited success in getting this to work. I've gotten as far as being able to click a legend item and a series line is removed, but not the points, and it appears to be the wrong line data as well.
Any help on this would be really appreciated :)
var Graphs = function () {
return {
//main function
initCharts: function () {
if (!jQuery.plot) {
return;
}
function showChartTooltip(x, y, xValue, yValue) {
$('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 40,
border: '0px solid #ccc',
padding: '2px 6px',
'background-color': '#fff'
}).appendTo("body").fadeIn(200);
}
if ($('#site_revenue').size() != 0) {
//site revenue
var previousPoint2 = null;
var plot_statistics = null;
var data = [];
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
$('#site_revenue_loading').hide();
$('#site_revenue_content').show();
var data = [{
label: "Gross Revenue",
color: ['#44b5b1'],
points: {
fillColor: "#44b5b1"
},
data: [
['Sep', 264.41],
['Aug', 6653.98],
['Jul', 921.35],
['Jun', 937.00],
['May', 1839.25],
['Apr', 1561.96],
['Mar', 2289.62],
['Feb', 2661.91],
['Jan', 6021.44],
['Dec', 4129.21],
['Nov', 0.00],
['Oct', 2865.28],
],
idx:1
},{
label: "Tax",
color: ['#8fc2ed'],
points: {
fillColor: "#8fc2ed"
},
data: [
['Sep', 0.00],
['Aug', 2865.28],
['Jul', 2661.91],
['Jun', 6653.98],
['May', 6021.44],
['Apr', 0.00],
['Mar', 2289.62],
['Feb', 1561.96],
['Jan', 921.35],
['Dec', 937.00],
['Nov', 1839.25],
['Oct', 4129.21]
],
idx: 2
}];
var plot_statistics = $.plot($("#site_revenue"), data, {
series: {
lines: {
show: true,
fill: 0.2,
lineWidth: 0,
fill: false,
lineWidth: 3
},
shadowSize: 1,
points: {
show: true,
fill: true,
radius: 4,
lineWidth: 2
},
},
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 18,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 14,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1
},
legend: {
show: true,
placement: 'outsideGrid',
container: $('#site_revenue_legend'),
labelFormatter: function(label, series){
return ''+label+'';
}
}
});
$("#site_revenue").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint2 != item.dataIndex) {
previousPoint2 = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]);
}
}
});
$('#site_revenue').bind("mouseleave", function () {
$("#tooltip").remove();
});
}
}
};
}();
jQuery(document).ready(function() {
Graphs.initCharts(); // init index page's custom scripts
});
JSFiddle: http://jsfiddle.net/fxc4vyg3/

You must be tired, you just have an off-by-one error, and you only called the update for the lines, not the points.
togglePlot = function(seriesIdx)
{
var previousPoint2 = plot_statistics.getData();
seriesIdx--; // ***HERE***
previousPoint2[seriesIdx].points.show = // ***AND HERE***
previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show;
plot_statistics.setData(previousPoint2);
plot_statistics.draw();
}
Here's the fixed fiddle: http://jsfiddle.net/it_turns_out/fxc4vyg3/3/

Categories

Resources