Add gridline on dynamic marker highchart

Add gridline on dynamic marker highchart - javascript

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

Related

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

How to cover the whole pie chart with selected portion

I have a piechart which is plotting with dynamic values . So if my dataset contains 2 rows then only two slice will be there in piechart if dataset contains 3 rows then 3 slice will get plot and so on.. My question is how to covered the all piechart with the selected slice color without using drilldown.js
Here is the code
init: $(function () {
Highcharts.setOptions({
colors: ['#3f51b5', '#03a9f4', '#0caf50', '#f9ce1d', '#ff9800', '#007bc1'],
});
$(document).ready(function () {
if ($("#GridContainer").find(':only-child:last').html() == "No Data Found") {
$("#InvestorListFilter").hide()
}
else
{
$("#InvestorListFilter").show()
}
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-25',
backgroundColor:'#f7f7f7',
events: {
load: function () {
requestDataforGeoDispersion(1);
},
}
},
title: {
text: 'Geographical Dispersion',
verticalAlign: 'bottom',
align: 'center',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold',
fontfamily: 'Frutiger Light',
padding:0
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
//align: 'center',
//y: 11,
//x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
},
},
tooltip: {
valueDecimals: 2,
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
innerSize: 50,
borderWidth :0,
depth: 45,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
style: {
padding:0
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
allowOverlap: true,
enabled: true,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'pie',
plotBorderWidth: 0,
backgroundColor: '#f7f7f7',
plotShadow: false,
marginRight: '-30',
events: {
load: requestDataforGeoDispersion(2)
}
},
title: {
text: 'Investment Style',
verticalAlign: 'bottom',
y: -5,
x: 15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td><td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr><tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
depth: 45,
borderWidth :0,
slicedOffset: 0,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
enabled: true,
allowOverlap: true,
connectorWidth: 0,
padding: 0,
connectorPadding: 0,
style: {
fontWeight: 'normal',
fontSize: '10px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{
}]
});
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'pie',
plotBorderWidth: 0,
plotShadow: false,
marginRight: '-30',
backgroundColor: '#f7f7f7',
borderColor: '#FFFFFF',
events: {
load: requestDataforGeoDispersion(3)
}
},
title: {
text: 'Investor Type',
verticalAlign: 'bottom',
fontfamily:'Frutiger Light',
y: -5,
x:15,
style: {
color: '#00539b',
fontWeight: 'bold'
}
},
subtitle: {
text: '<a style="font-size:smaller;text-decoration: underline;cursor: pointer" href="#">VIEW ALL LABELS</a>',
verticalAlign: 'bottom',
align: 'center',
y: 11,
x:19,
style: {
color: '#007bc1',
fontWeight: 'bold',
title: 'Manish'
}
},
tooltip: {
shared: false,
useHTML: true,
formatter: function () {
return '<table width=100%><tr><td style="float:right;text-align:center;"><b>' + this.point.name.toUpperCase() + '</b></td>'+
'<td></td></tr><tr><td><b>SHARES:</b></td><td style="float:right"><b>' + this.point.shareValue + '</b></td></tr>'+
'<tr><td><b>%IC:</b></td><td style="float:right"><b>' + Highcharts.numberFormat(this.y, 2) + '%</b></td></tr>' +
'<tr><td><b>NO. INVESTORS:</b></td><td style="float:right"><b>' + this.point.totalNoOfInvestors + '</b></td></tr></table>'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
innerSize: 50,
slicedOffset: 0,
borderWidth :0,
depth: 45,
shadow: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
states: {
hover: {
enabled: false
},
},
dataLabels: {
color: '#999999',
distance: 10,
connectorWidth: 0,
connectorPadding: 0,
allowOverlap: true,
padding: 0,
enabled:true,
style: {
fontWeight: 'normal',
fontSize: '10px',
//width:'100px'
}
},
},
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: false
},
credits: {
enabled: false
},
series: [{}]
});
var chartData = "";
init: function requestDataforGeoDispersion(flag) {
var multiselectRegion = $("input[id*=HdnRegionMultiple]").val();
var multiselectStyle = $("input[id*=hdnInvestmentStyle]").val();
var multiselectType = $("input[id*=HdnInvestorType]").val();
var activityChart = $('input[name=m$p1$RadioButtonListTrends]:checked').val();
$.ajax({
url: "Investors.aspx/GetPieChartDataForGeoDispersion",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: '{regionID: "' + multiselectRegion + '",styleID: "' + multiselectStyle + '",typeID: "' + multiselectType + '",activityChartValue: "' + activityChart + '" }',
success: function (data) {
chartData = JSON.parse(data.d);
var color="";
var dataArr = [];
if (flag == 1) {
$.each(chartData[0], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.RegionName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorCompanyRegionID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArr.push(jsondata);
}
});
chart1.addSeries({
name: 'GeoDispersion',
colorByPoint: true,
size: 140,
allowOverlap: true,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnRegionMultiple]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArr,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart1.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart1.renderTo.appendChild(menu);
chart1.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart1.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 2)
{
var dataArrStyle = [];
drilldownSeries = [];
$.each(chartData[1], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.StyleName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorStyleID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrStyle.push(jsondata);
}
});
chart2.addSeries({
name: 'InvestmentStyle',
colorByPoint: true,
enabled: true,
allowOverlap: true,
size: 140,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=hdnInvestmentStyle]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
data: dataArrStyle,
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart2.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart2.renderTo.appendChild(menu);
chart2.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart2.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
else if (flag == 3)
{
var dataArrType = [];
$.each(chartData[2], function (index, value) {
var sum = parseFloat((value.Sum * 100).toFixed(2));
if (sum > 0) {
var jsondata = {
name: value.TypeName.toUpperCase(),
y: parseFloat((value.Sum * 100).toFixed(2)),
id: value.InvestorTypeID,
shareValue: commaSeparateNumber(value.ShareValue),
totalNoOfInvestors: value.TotalNoOfInvestors
}
dataArrType.push(jsondata);
}
});
chart3.addSeries({
name: 'InvestorTypes',
colorByPoint: true,
size: 140,
data: dataArrType,
point: {
events: {
click: function (event) {
event.preventDefault();
$("input[id*=HdnInvestorType]").val(this.id);
var chartButtonID = document.getElementsByClassName('chartFilterButton')[0].id;
document.getElementById(chartButtonID).click();
}
}
},
});
const menu = document.createElement('div');
menu.style.cssText = 'left:' + (this.plotLeft + this.plotWidth * 0.5) + 'px; top:' + (this.plotTop + this.plotHeight * 0.1) + 'px; position: absolute; display: none; background-color:white; padding: 20px';
let str = '';
chart3.series[1].data.forEach(point => {
str += '<p><div style="display:inline-block;padding-right: 10px;width:10px;height:10px;background-color:' + point.color + ';background-clip:content-box;"></div>' + point.name + '</p>'
});
str += '';
menu.innerHTML = str;
chart3.renderTo.appendChild(menu);
chart3.subtitle.on('mouseenter', function (e) {
menu.style.display = 'block';
})
chart3.subtitle.on('mouseout', function (e) {
menu.style.display = 'none';
})
}
},
cache: false
});
}
});
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
return val;
}
});

You can update the points' color on point's click event - see API.
On click event, loop through the points and update its color, when the loop is ended, redraw the chart.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function () {
this.series[0].points.forEach(point => {
point.options.baseColor = point.color;
});
}
}
},
series: [{
name: 'Brands',
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: '40%',
size: '80%',
point: {
events: {
click: function () {
this.series.points.forEach(point => {
point.update({
color: this.options.baseColor,
dataLabels: {
enabled: point === this
}
}, false);
});
this.series.chart.redraw();
}
}
}
}]
});
example: http://jsfiddle.net/jvacqt4j/

HighCharts getting data from database to outside js file

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.

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

The live graph stops when the mouse pointer is put inside the graph area?

The live graph stops when the mouse pointer is put inside the graph area. I need to have a live graph that displays values continuously irrespective of mouse movement.Please help me out.
The code is as follows.Please use " jsfiddle.net "
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JAVASCRIPT :
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'areaspline',
animation: true, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var seriesa = this.series[0];
var seriesb = this.series[1];
setInterval(function() {
var x1 = (new Date()).getTime(); // current time
var y1 = Math.random();
var x2 = (new Date()).getTime();
var y2 = Math.random();
seriesa.addPoint([x1, y1], true, true);
seriesb.addPoint([x2, y2], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
title: {
text: 'Time'
},
tickWidth: 1 ,
// tickWidth: 2,
type: 'datetime',
labels:
{
enabled:false
},
tickColor: '#F00',
},
yAxis: {
title: {
text: 'speed'
},
labels: {
formatter: function()
{
if(this.value < 1000)
{
return this.value +'kbps';
}
else
{
var thisvalue = this.value;
thisvalue = thisvalue/1000;
thisvalue = thisvalue.toFixed(1);
return thisvalue +' mbps';
}
},
style:{
color: '#a6a6a6',
font: '10px Arial'
}
},
plotLines: [{
value: 50,
width: 1,
color: '#808080'
}]
},
tooltip: {//WE need shared tooltip
formatter: function() {
var s = '<br>'+ this.x +'</br>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series[i].name +': '+
point.y +'<m>';
});
return s;
},
shared: true
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'download data',
color: '#037472',
lineWidth:2,
fillOpacity: 1,
fillColor:
{
linearGradient: [0, 0, 0, 180],
stops:
[
[0, 'rgba(123, 195, 194,1)'],
[1, 'rgba(123, 195, 194,0)'],
]
},
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -30; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},
//2nd graph plotting
{
name: 'Upload Speed',
color: '#068cca',
lineWidth:2,
fillOpacity: 1,
fillColor: {
linearGradient: [0, 0, 0, 180],
stops:
[
[0, 'rgba(99, 204, 255,1)'],
[1, 'rgba(99, 204, 255,0)']
]
},
data:(function(){
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -30; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()*3000
});
}
return data;
})()
}
]
}); //containers end highcharts ends
});
});

It doesn't work, because in the tooltip you referr to incorrect object, like point.series[i].name, which doesn't exist.

Develop Reference

JavaScript is the programming language of the Web.

Add gridline on dynamic marker highchart - javascript

Related

Highcharts Column Chart - pointRange causes extra space to the right

How to cover the whole pie chart with selected portion

HighCharts getting data from database to outside js file

HighCharts column chart populated with series data from a function

The live graph stops when the mouse pointer is put inside the graph area?

Categories

Resources