We Keep Coding

how to update highstock indicators on dynamically updated chart

Indicators do draw only for 'historical' part of the chart but do not update when new points appear. http://jsfiddle.net/yp6ocybe/
series: [{
id: 'rand',
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
type: 'sma',
linkedTo: 'rand',
name: 'SMA (14)'
}, {
type: 'sma',
linkedTo: 'rand',
name: 'SMA (50)',
params: {
period: 50
}
}]
});

The best solution I found is to manually call update on SMA series when the main series is updated.
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
//call update by passing the old options and redraw = true
series1.update(series1.options, true);
series2.update(series2.options, true);
}, 1000);
}
It stops animating smoothly though, at least on my machine.
http://jsfiddle.net/yp6ocybe/3/
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
series1.update(series1.options,true);
series2.update(series2.options,true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
id: 'rand',
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
type: 'sma',
linkedTo: 'rand',
name: 'SMA (14)'
}, {
type: 'sma',
linkedTo: 'rand',
name: 'SMA (50)',
params: {
period: 50
}
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

Want to take difference between single series data and show them on chart in highcharts/highstock

I am working on asp.net MVC 5
Referring to my question i want to take difference between each two points like this 2-1 3-2 4-3 5-4 and so on and then put them into my series data in chart
Bellow is my controller code
//Getting data from DB to view in charts
SqlCommand Device_Id_command = new SqlCommand("Select Device_ID, Energy_kWh,Power_kW,Voltage_Phase_1,Data_Datetime,Voltage_Phase_2,Voltage_Phase_3,Current_Phase_1,Current_Phase_2,Current_Phase_3 from [ADS_Device_Data] where Device_Serial_Number=#serial_number AND Data_Datetime between'" + time.ToString(format) + "'AND'" + time2.ToString(format) + "'", con);
Device_Id_command.Parameters.AddWithValue("#serial_number", serial_number);
con.Open();
SqlDataReader reader = Device_Id_command.ExecuteReader();
//SqlDataReader reader_events = event_command.ExecuteReader();
while (reader.Read())
{
energy_kwh.Add(Convert.ToDouble(reader["Energy_kWh"]));
power_kw.Add(Convert.ToDouble(reader["Power_kW"]));
voltage_1.Add(Convert.ToDouble(reader["Voltage_Phase_1"]));
voltage_2.Add(Convert.ToDouble(reader["Voltage_Phase_2"]));
voltage_3.Add(Convert.ToDouble(reader["Voltage_Phase_3"]));
current_1.Add(Convert.ToDouble(reader["Current_Phase_1"]));
current_2.Add(Convert.ToDouble(reader["Current_Phase_2"]));
current_3.Add(Convert.ToDouble(reader["Current_Phase_3"]));
Meter_datetime.Add(sample_con.ConvertToUnixTimestamp(Convert.ToDateTime(reader["Data_Datetime"])));
device_id = Convert.ToInt32(reader["Device_ID"]);
}
con.Close();
After that i have put all the data coming from reader into ViewData
ViewData["energy_kwh"] = energy_kwh;
ViewData["Meter_datetime"] = Meter_datetime;
ViewData["power_kw"] = power_kw;
ViewData["voltage_1"] = voltage_1;
ViewData["voltage_2"] = voltage_2;
ViewData["voltage_3"] = voltage_3;
ViewData["current_1"] = current_1;
ViewData["current_2"] = current_2;
ViewData["current_3"] = current_3;
In my razor i have done the following
// **************** Data arranging coming from controller *************
var myArrayX_kwh = [];
var myArrayY_kwh = [];
var myArrayY_power = [];
var myArrayY_voltage_1 = [];
var myArrayY_voltage_2 = [];
var myArrayY_voltage_3 = [];
var myArrayY_current_1 = [];
var myArrayY_current_2 = [];
var myArrayY_current_3 = [];
//var myArrayY_getData = [];
var arry_kwh = [];
var arry_power = [];
var arry_voltage_1 = [];
var arry_voltage_2 = [];
var arry_voltage_3 = [];
var arry_current_1 = [];
var arry_current_2 = [];
var arry_current_3 = [];
After that i have added 2 loops which push the values of x and y axis
#foreach (var st in ViewData["Meter_datetime"] as List<double?>)
{
#:myArrayX_kwh.push(#st);
}
#foreach (var st in ViewData["energy_kwh"] as List<double?>)
{
#:myArrayY_kwh.push(#st);
}
#foreach (var st in ViewData["power_kw"] as List<double?>)
{
#:myArrayY_power.push(#st);
}
#foreach (var st in ViewData["voltage_1"] as List<double?>)
{
#:myArrayY_voltage_1.push(#st);
}
#foreach (var st in ViewData["voltage_2"] as List<double?>)
{
#:myArrayY_voltage_2.push(#st);
}
#foreach (var st in ViewData["voltage_3"] as List<double?>)
{
#:myArrayY_voltage_3.push(#st);
}
#foreach (var st in ViewData["current_1"] as List<double?>)
{
#:myArrayY_current_1.push(#st);
}
#foreach (var st in ViewData["current_2"] as List<double?>)
{
#:myArrayY_current_2.push(#st);
}
#foreach (var st in ViewData["current_3"] as List<double?>)
{
#:myArrayY_current_3.push(#st);
}
for (var i = 0; i < myArrayX_kwh.length; i++) {
arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
arry_power.push({ x: myArrayX_kwh[i], y: myArrayY_power[i], });
arry_voltage_1.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_1[i], });
arry_voltage_2.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_2[i], });
arry_voltage_3.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_3[i], });
arry_current_1.push({ x: myArrayX_kwh[i], y: myArrayY_current_1[i], });
arry_current_2.push({ x: myArrayX_kwh[i], y: myArrayY_current_2[i], });
arry_current_3.push({ x: myArrayX_kwh[i], y: myArrayY_current_3[i], });
//getData.push({y: myArrayY_getData[i] });
}
After that i have initialized my chart
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
//type: 'column',
//zoomType: 'xy',
//panning: true,
//pankey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {
//xAxis: {
// tickWidth: 0,
// lineWidth: 0,
// gridLineWidth: 1,
// tickPixelInterval: 200,
// labels: {
// align: 'left',
// style: {
// color: '#888'
// },
// x: 3,
// y: -4
// }
//},
//yAxis: {
// gridLineWidth: 0,
// startOnTick: false,
// endOnTick: false,
// minPadding: 0.1,
// maxPadding: 0.1,
// labels: {
// enabled: false
// },
// title: {
// text: null
// },
// tickWidth: 0
//},
//series: {
// //data: arry_kwh_2,
// type: 'column',
// color: '#4572A7',
// fillOpacity: 0.05,
// dataGrouping: {
// smoothed: true
// },
// lineWidth: 1,
// marker: {
// enabled: true
// }
//},
enabled: true,
height: 30,
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
enabled: true,
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
plotOptions: {
column: {
turboThreshold: 500000
}
},
title: {
text: 'Energy vs Date & Time',
style: {
fontWeight: 'bold',
}
},
xAxis: {
type: 'datetime',
//min: 0,
//max: 100000
},
yAxis:
{
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}
},
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}
],
});
Note
I am viewing 4 different charts in my single view
I only want to take difference for arry_kwh only not for all charts
Update
I have added this piece of code after that i have put this value of array into a separate series
var arry_kwh_diff = [];
for (var j = 0; j < arry_kwh.length - 1; j++)
{
arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh[j + 1].y - arry_kwh[j].y };
}
arry_kwh_diff[j] = { x: arry_kwh.x, y: arry_kwh.y };
Adding the array in my chart code
series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
},
{
type: 'spline',
name: 'Difference',
data: arry_kwh_diff
}
],
It's showing me bellow image
It's not showing me correct values also no spline is there
After changing
var arry_kwh_diff = [];
for (var j = 0; j < arry_kwh.length - 1; j++)
{
arry_kwh_diff.push({ x: arry_kwh[j].x, y: arry_kwh[j + 1].y - arry_kwh[j].y });
}
arry_kwh_diff[j] = { x: arry_kwh[j].x, y: arry_kwh[j].y };
Now it's showing me an empty view
Any help would be highly appreciated

You could prepare your data, before adding it to highcharts. For instance, do something like this:
var arry_kwh = [ {x: Date.now(), y: 100},
{x: Date.now()+1000, y: 120 },
{x: Date.now()+2000, y: 140 },
{x: Date.now()+3000, y: 165 }];
var arry_kwh_diff = [];
var i=0;
for(; i < arry_kwh.length - 1; i++) {
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};
}
arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i].y};
And then use arry_kwh_diff to graph the difference.
A fiddle demo can be found here:
http://jsfiddle.net/8fjyLhy1/1/

do not remove previous point in spline highchart

in splin highchart when draw new live point,it remove first point from left.
how can i disable this work in highchart
my chart must be in fix datetime range,and live splin chart must begin in min datetime and finish in max datetime.and do not remove any point.
when recieve to max datetime the point must be clear.
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#LineChart').highcharts({
chart: {
type: 'spline',
zoomType: 'x',
resetZoomButton: {
position: {
x: 0,
y: -30
}
},
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var seri = new Array();
seri = this.series;
setInterval(function () {
var result = ReadAlarmTypes();
var j = 0;
$.each(result, function (index, AlarmTypes) {
var AlarmName = AlarmTypes.AlarmName;
var AlarmTypeId = AlarmTypes.AlarmTypeId;
//Read Last Device's Log Value
var signals = ReadLatestLogs(AlarmTypeId);
if (signals != null) {
$.each(signals, function (index, signal) {
var series1 = seri[j];
var x = (new Date(signal.DateTime)).getTime(), // current time
y = signal.Value;
series1.addPoint([x, y], true, true);
});
}
j++;
});
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
//min: (new Date(GetShiftTime())).getTime()
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: getSeri('Online')
});
});
});

Check your condition to remove from left or not, if you need to remove call :
series1.addPoint([x, y], true, true);
else call:
series1.addPoint([x, y], true, false);

Chart Is not displaying Created Using HighCahrts and Google Analytics

I am using HighCharts to view data of Google Analytics. To get the data dynamically I use JSON. I have no doubts in that section. To do that I'm using the following JavaScript function.
function Load(responseJson){
//----------------------------------------------- Rohan
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
console.log("Row Data " + rowData)
console.log("RowData is " + typeof rowData );
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 0; i < inData.columnHeaders.length; i++) {
headers[i] = inData.columnHeaders[i].name;
}
var dates = new Array();
var pageViews = new Array();
var uniqueViews = new Array();
for (var key in inData.rows) {
dates[key] = inData.rows[key][0];
pageViews[key] = parseInt(inData.rows[key][1]);
uniqueViews[key] = parseInt(inData.rows[key][2]);
}
$('#container_2').highcharts({
chart: {
type: 'areaspline', zoomType: 'x'
},
title: {
text: 'Pageviews and Bounces'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ffffff'
},
xAxis: {
categories: dates,
type: 'datetime',
dateTimeLabelFormats: {
month: '%d %b',
},
tickInterval: 10,
plotBands: [{ // visualize the weekend
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Visits'
}
},
tooltip: {
shared: true,
valueSuffix: ' '
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Page Views',
data: pageViews,
/***01***/colors: ['#CCFF99']
}, {
name: 'Bounces',
data: uniqueViews
}]
});
}
In this JavaScript fnction I managed to get the data from Google Analytics and pass to the chart that I have created using HighCharts. The chart does not displaying but when I put the mouse pointer on it shows the values. So I have tried to add some color to the series as in 01. But it did not change the appearance. Only the 2 Axis and the legend is showing but the colors are showing in the legend only. I can't figure it out what I have done wrong.
Could you someone please help me to solve this matter?
Thanks and regards,
Chiranthaka
Cleaned Source Code
function retStartDate(){
var strStartDate = document.getElementById("from_date").value;
return strStartDate;
}
function retEndDate(){
var strEndDate = document.getElementById("to_date").value;
return strEndDate;
}
function setJsonSer() {
var strWsUrl = 'https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A76546294&dimensions='+ 'ga%3Asource&metrics=ga%3Ausers&sort=-ga%3Ausers&start-date='+retStartDate()+'&end-date='+retEndDate()+'&max-results=10';
/*var strWsUrl = 'https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A76546294&dimensions=ga%3Asource&metrics=ga%3Ausers&filters=ga%3Asource!%3D(direct)&start-date='+retStartDate()+'&end-date='+retEndDate()+'&max-results=5';*/
formData = {
'Email': 'clientlink#client.com',
'Password': 'password',
'URL': strWsUrl
};
$.ajax({
url: "/APIWebService.asmx/AnalyticsDataShowWithPost",
type: 'POST',
data: formData,
complete: function(data) {
var responseText = data.responseText;
var responseJson = JSON.parse(responseText.match(/[{].*.[}]/));
console.log(responseJson);
Load(JSON.stringify(responseJson));
}
});
console.log("JSON The return is OK! ");
}
function BarChart(inData) {
var labels = new Array();
var values = new Array();
for (var key in inData.rows) {
var dt = new Array();
dt[0] = parseInt(inData.rows[key][1]);
var jsRow = { name: inData.rows[key][0], data: dt };
labels[key] = jsRow;
}
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Which Source brought more users?'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
categories: ['Source'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Users',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: null
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: labels
});
});
}
google.load('visualization', '1', { packages: ['table'] });
google.load("visualization", "1", { packages: ["corechart"] });
function Load(responseJson){
//----------------------------------------------- Rohan
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
console.log("Row Data " + rowData)
console.log("RowData is " + typeof rowData );
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 0; i < inData.columnHeaders.length; i++) {
headers[i] = inData.columnHeaders[i].name;
}
var dates = new Array();
var pageViews = new Array();
var uniqueViews = new Array();
for (var key in inData.rows) {
dates[key] = inData.rows[key][0];
pageViews[key] = parseInt(inData.rows[key][1]);
uniqueViews[key] = parseInt(inData.rows[key][2]);
}
$('#container_2').highcharts({
chart: {
type: 'areaspline', zoomType: 'x'
},
title: {
text: 'Pageviews and Bounces'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: dates,
type: 'datetime',
dateTimeLabelFormats: {
month: '%d %b',
},
tickInterval: 10,
plotBands: [{ // visualize the weekend
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Visits'
}
},
tooltip: {
shared: true,
valueSuffix: ' '
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Page Views',
data: pageViews,
color: '#ff0000'
}, {
name: 'Bounces',
data: uniqueViews,
color: '#ccff99'
}]
});
//----------------------------------------------- Rohan
//----------------------------------------------- Faahika
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 1; i < inData.columnHeaders.length;i++) {
headers[i - 1] = inData.columnHeaders[i].name;
}
for (var key in inData.rows) {
var dt = new Array();
dt[0] = parseInt(inData.rows[key][1]);
dt[1] = parseInt(inData.rows[key][2]);
dt[2] = parseInt(inData.rows[key][3]);
arrayOfArray[count] = dt;
catogories[count] = inData.rows[key][0];
count++
}
var dynamicArray = new Array();
for (var i = 0; i < headers.length; i++) {
var temp = new Array();
for (var c = 0; c < arrayOfArray.length; c++) {
temp[c] = arrayOfArray[c][i];
}
dynamicArray[i] = temp;
}
var jsonCollection = new Array();
for (var c = 0; c < headers.length; c++) {
var json = { name: headers[c], data: dynamicArray[c] };
jsonCollection[c] = json;
}
console.log(jsonCollection);
$(function () {
$('#container_3').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Channels for Nurture Activities'
},
xAxis: {
categories: catogories
},
yAxis: {
min: 0,
title: {
text: null
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series:
jsonCollection
});
});
BarChart(inData);
DrawGoogleTable(NurtureActivities,[0,1,2,3,4],'table_div4',false);
DrawGoogleTable(ChannelNurtureActivities,[1,2],'table_div5',false);
DrawGoogleTable(TopSiteReferrers,[0,1],'table_div6',false);
DrawGoogleTable(TopCampaigns,[0,1],'table_div7',false);
DrawGoogleTable(TopKeywords,[0,1],'table_div8',false);
DrawGoogleTable(WebPages,[0,1],'table_div9',true);
DrawGoogleTable(ResearchDocuments,[0,1],'table_div11',false);
DrawGoogleTable(SocialNetworks,[0,1],'table_div10',false);
DrawGoogleTable(TopVideos,[0,1],'table_div12',false);
}
I have cleaned the code and deleted unwanted snippets. I have the problem in #container_2. But I passed data to #container_3 chart and it draw it perfectly. So could you someone look into the #container_2 chart? Thanks

I found the answer. The chart that I have used is using 2 data series but the the query string that I have used to draw the chart only consist one data series so the chart does not draw but only the legend and the 2 axis are drawing.
However thanks for everything guys!
Thanks and regards,
Chiranthaka

Highcharts make percentage column chart

How can i make percentage column chart ?
Like this
http://www.highcharts.com/demo/column-basic
Not like this! http://www.highcharts.com/demo/column-stacked-percent
Thanks a lot for your help.

jsfiddle demo
var data = [{
name: 'A',
data: [72, 50, 52]
}, {
name: 'B',
data: [23, 41, 12]
}, {
name: 'C',
data: [18, 9, 11]
}, {
name: 'D',
data: [89, 46, 54]
}];
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Group 1', 'Group 2', 'Group 3']
},
yAxis: {
title: {
text: null
}
},
tooltip: {
shared: true
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
dataLabels: {
enabled: true,
formatter: function () {
var mychart = $('#container').highcharts();
var mytotal = 0;
for (i = 0; i < mychart.series.length; i++) {
if (mychart.series[i].visible) {
mytotal += parseInt(mychart.series[i].yData[0]);
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
title: {
text: 'Example'
},
series: data
});

Use this one:
chart.series[0].update({
dataLabels:{
enabled:true,
formatter:function() {
var mytotal = 0;
for (i = 0; i < chart.series.length; i++) {
if (chart.series[i].visible) {
for (j = 0; j < chart.series[i].yData.length; j++) {
mytotal += parseInt(chart.series[i].yData[j]);
}
console.log("Total : "+ i + " Total : "+ mytotal + " length" + chart.series[i].yData.length);
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
});