Develop Reference

Highchart add a text under single bar in bar chart

I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar
Code
var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
chart: {
type: 'bar',
backgroundColor: null,
height: 270,
events: {
load: function() {
this.addSeries({
data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
enableMouseTracking: false,
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '<span class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
}}
}, true);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
width: '75px',
'min-width': '75px',
height: '42px',
'min-height': '42px',
align: 'high'
},
useHTML : true,
formatter: function () {
return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
},
}
},
colors: colors,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: ''
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.25,
groupPadding: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
},
colorByPoint: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px"> lorem</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},
series: [{
data: data
}
]
});
Output
Expected Output
How can I add a percentage under only a single bar?
Any help would be highly appreciated

You can use data labels configuration for a single point.
events: {
load: function() {
this.addSeries(..., {
x: 3,
y: 1,
dataLabels: {
useHTML: true,
formatter: function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '...';
}
}
}]
}, true);
}
}
Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/
API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels

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

Stuck on the final bits of a multi series line chart

I built a multi series Highcharts https://www.highcharts.com/ line chart with irregular time data. It's almost there, but I'm doing something wrong with the data and/or data formatting. Anyone have a hint or two to throw my way?
The date from the database was converted from '02/03/2009' to javascript time in php using
$date = strtotime($data['As of Date'])*1000;
The other value is a dollar amount.
I haven't yet added the filtered data for 3MO, 6MO, 1YR, 5YR, 10YR
Here is the jsfiddle https://jsfiddle.net/madmichael/th41g4yt/
$( document ).ready(function() {
createChart();
});
function createChart(chartingOptions) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
events: {
load: function(event) {
var total = 0; // get total of data
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: $' + Highcharts.numberFormat(total, 0, '.', ','),
this.plotLeft,
this.plotTop + 20
).attr({
zIndex: 5
}).add() // write it to the upper left hand corner
}
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
/* buttons: [[]], */
buttons: [
{
type: 'all',
text: 'All'
}, {
type: 'month',
count: 3,
text: '3MO'
}, {
type: 'month',
count: 6,
text: '6MO'
}, {
type: 'year',
text: '1YR',
count: 1
}, {
type: 'year',
text: '5YR',
count: 5
}, {
type: 'year',
text: '10YR',
count: 10
}],
buttonTheme: {
width: 60
},
selected: 0
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
pointFormat: '$' + '{point.y:,.0f}'
/* formatter: function() {
return Highcharts.dateFormat('%b %d, %Y', point.x) + ': $
{point.y:,.1f}';
} */
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%b-%Y', this.value);
}
}
},
yAxis: {
type: 'linear',
labels: {
formatter: function () {
if(this.value >= 0 ){
return '$' + this.value / 1000+'k';
}else{
return '-$' + this.value / 1000*-1+'k';
}
}
}
},
series: [{name: 'Investment Fund (A)',fundtype: 'Load',data: [[1483164000000,37149],[1451541600000,37247],[1420005600000,37071],[1388469600000,33407],[1356933600000,19881],[1325311200000,14132],[1293775200000,21541],[1262239200000,18343],[1480485600000,36659],[1448863200000,39677],[1417327200000,38070],[1385791200000,32212],[1354255200000,18197],[1322632800000,14132],[1291096800000,20173],[1259560800000,17399],[1477890000000,34171],[1446267600000,39069],[1414731600000,36522],[1383195600000,30429],[1351659600000,18468],[1320037200000,14848],[1288501200000,20250],[1256965200000,15703],[1475211600000,36503],[1443589200000,36071],[1412053200000,34602],[1380517200000,29214],[1348981200000,17752],[1317358800000,13048],[1285822800000,19287],[1254286800000,17861],[1472619600000,35249],[1440997200000,38775],[1409461200000,36542],[1377925200000,27548],[1346389200000,16784],[1314766800000,15642],[1283230800000,16994],[1251694800000,16821],[1469941200000,32741],[1438318800000,42537],[1406782800000,34230],[1375246800000,28273],[1343710800000,16203],[1312088400000,17674],[1280552400000,18478],[1249016400000,14335],[1467262800000,29782],[1435640400000,40245],[1404104400000,36150],[1372568400000,26157],[1341032400000,16861],[1309410000000,19707],[1277874000000,17013],[1246338000000,13083],[1496206800000,41636],[1464670800000,33015],[1433048400000,40656],[1401512400000,34720],[1369976400000,26850],[1338440400000,16010],[1306818000000,20963],[1275282000000,19441],[1243746000000,12563],[1493528400000,40010],[1461992400000,32603],[1430370000000,39814],[1398834000000,33779],[1367298000000,25205],[1335762000000,17229],[1304139600000,21233],[1272603600000,21426],[1241067600000,10732],[1490936400000,39794],[1459400400000,33054],[1427778000000,39304],[1396242000000,34798],[1364706000000,24063],[1333170000000,17771],[1301547600000,21021],[1270011600000,20983],[1238475600000,8940],[1456725600000,30977],[1330495200000,17307],[1488261600000,40696],[1425103200000,39285],[1393567200000,34955],[1362031200000,22011],[1298872800000,21233],[1267336800000,19268],[1235800800000,7534],[1233640800000,9422],[1485842400000,37149],[1454220000000,30233],[1422684000000,35856],[1391148000000,33603],[1359612000000,22108],[1327989600000,15990],[1296453600000,21021],[1264917600000,18459]]},{name: 'Investment Fund (A)',fundtype: 'No Load',data: [[1483164000000,39428],[1451541600000,39532],[1420005600000,39345],[1388469600000,35456],[1356933600000,21101],[1325311200000,14999],[1293775200000,22863],[1262239200000,19468],[1480485600000,38908],[1448863200000,42111],[1417327200000,40406],[1385791200000,34188],[1354255200000,19314],[1322632800000,14999],[1291096800000,21411],[1259560800000,18466],[1477890000000,36267],[1446267600000,41466],[1414731600000,38763],[1383195600000,32295],[1351659600000,19601],[1320037200000,15759],[1288501200000,21493],[1256965200000,16667],[1475211600000,38742],[1443589200000,38284],[1412053200000,36725],[1380517200000,31006],[1348981200000,18841],[1317358800000,13848],[1285822800000,20470],[1254286800000,18957],[1472619600000,37411],[1440997200000,41154],[1409461200000,38784],[1377925200000,29238],[1346389200000,17814],[1314766800000,16601],[1283230800000,18037],[1251694800000,17853],[1469941200000,34749],[1438318800000,45147],[1406782800000,36330],[1375246800000,30008],[1343710800000,17197],[1312088400000,18759],[1280552400000,19611],[1249016400000,15215],[1467262800000,31609],[1435640400000,42714],[1404104400000,38368],[1372568400000,27762],[1341032400000,17896],[1309410000000,20916],[1277874000000,18057],[1246338000000,13885],[1496206800000,44190],[1464670800000,35040],[1433048400000,43151],[1401512400000,36850],[1369976400000,28498],[1338440400000,16992],[1306818000000,22249],[1275282000000,20634],[1243746000000,13333],[1493528400000,42464],[1461992400000,34604],[1430370000000,42256],[1398834000000,35851],[1367298000000,26751],[1335762000000,18286],[1304139600000,22536],[1272603600000,22740],[1241067600000,11391],[1490936400000,42236],[1459400400000,35082],[1427778000000,41716],[1396242000000,36933],[1364706000000,25539],[1333170000000,18862],[1301547600000,22311],[1270011600000,22270],[1238475600000,9489],[1456725600000,32878],[1330495200000,18368],[1488261600000,43192],[1425103200000,41695],[1393567200000,37099],[1362031200000,23361],[1298872800000,22536],[1267336800000,20450],[1235800800000,7996],[1233640800000,10000],[1485842400000,39428],[1454220000000,32087],[1422684000000,38056],[1391148000000,35664],[1359612000000,23464],
[1327989600000,16971],[1296453600000,22311],[1264917600000,19591]]},],
plotOptions: {
series: {
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible)
{
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
},
line: {
marker: {
enabled: false
},
/* color: '".$attributes["line_color"]."',
*/ }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
credits: {
enabled: false
},
};
/* options.series[5] = {
name: '5 Yrs',
data: processed_five_years,
visible: false
};
*/
var chart = new Highcharts.stockChart(options);
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
};

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

Highcharts duplicated code

I've created 2 pie charts using Highcharts but I have duplicated the code.
How can just have one based code - calling in a different json file.
var chart1 = {
chart: {
renderTo: 'container1'
},
title: {
text: 'Industry'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function () {
return ' '+ this.y.toFixed(2) +' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function () {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
}
var options = chart1;
$.getJSON(link + "/valuations/industry.json", null, function (items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
console.log(valuations);
$.each(valuations, function (itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options.series.push(series);
chart1 = new Highcharts.Chart(options);
//chart.render();
});
var chart2 = {
chart: {
renderTo: 'container2'
},
title: {
text: 'Geographic'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function () {
return ' '+ this.y.toFixed(2) +' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function () {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
}
var options2 = chart2;
$.getJSON(link + "/valuations/geographic.json", null, function (items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
$.each(valuations, function (itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options2.series.push(series);
chart2 = new Highcharts.Chart(options2);
//chart.render();
});
Highcharts.setOptions({
colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
});
$('#export').click(function() {
Highcharts.exportCharts([chart1, chart2]);
});
});

See code comments:
// Define a default set of chart options
var defaultChart = {
chart: {
renderTo: 'chart'
},
title: {
text: 'Chart'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function() {
return ' ' + this.y.toFixed(2) + ' %';
},
color: 'black',
style: {
font: '100% Arial, Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
legend: {
itemStyle: {
color: '#444',
fontWeight: 'normal',
fontFamily: 'Arial',
fontSize: '100%'
},
verticalAlign: 'bottom',
x: -100,
y: 0,
width: '100%',
itemWidth: 'auto',
floating: false,
labelFormatter: function() {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
};
// Create a function that will fetch the data and create the chart based on passed options
function makeChart( url, chart, options ) {
$.getJSON(link + url, null, function(items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
$.each(valuations, function(itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options.series.push(series);
chart = new Highcharts.Chart(options);
//chart.render();
});
}
//Set up chart1's custom options
var chart1 = {
chart: {
renderTo: 'container1'
},
title: {
text: 'Industry'
}
}
// Call our new function to make the chart
makeChart( "/valuations/industry.json", chart1, $.extend(true, {}, default_chart, chart1) );
// Setup chart2's custom options
var chart2 = {
chart: {
renderTo: 'container2'
},
title: {
text: 'Geographic'
}
}
// Call our new function to make the chart
makeChart( "/valuations/geographic.json", chart2, $.extend(true, {}, default_chart, chart2) );
Highcharts.setOptions({
colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021', '#DC7000', '#336666', '#FF9655', '#999999']
});
$('#export').click(function() {
Highcharts.exportCharts([chart1, chart2]);
});