We Keep Coding

Chart is displayed but i get ReferenceError: chart is not defined in console (highcharts)

In my console window I get ReferenceError: chart is not defined.
Chart is displayed correct, so it can't be some major issue.
If I remove code written below, error disappear and of course also the chart.
I'm using highcharts.
Any advice?
JS
getShownTab();
chart.series[0].update({ });
function getShownTab(){
$('#chartZoneDisplay').highcharts({
xAxis: {
categories: ['1.', '2.', '3.', '4.'],
title: {
text: 'Opravljene meritve'
},
},
yAxis: {
plotLines: [{
value: 0,
width: 1
}],
title: {
text: 'Kilogrami'
},
gridLineColor: "#222",
labels: {
padding: 0,
},
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
itemStyle: {
color: '#ccc'
},
itemHoverStyle: {
color: "#fab700"
}
},
series: [{
name: 'Telesna',
//data: [145, 122.9, 100.5, 105.5],
data: [<?php echo $parametri_telesna; ?>],
color: "#D1E24D",
dataLabels: {
enabled: true,
style: {
fontWeight: '300',
textOutline: '0px',
color: '#ccc'
}
}
}, {
name: 'Pusta',
data: [<?php echo $parametri_pusta; ?>],
color: "#F99A3B",
dataLabels: {
enabled: true,
style: {
fontWeight: '300',
textOutline: '0px',
color: '#ccc'
}
}
}],
chart: {
backgroundColor: '#000'
},
title: {
text: 'Gibanje teže',
align: 'left',
style: {
color: '#fab700'
}
},
});
}

Highcharts clickable column to open another page on same site

I am working on a script that produces a chart (Highcharts). This work fine but I would like to add a "click" function which when clicked opens another scropt on the same site. After reading about clickable columns I am not sure how to make it work.
How would I made a column clickable to say google.com
The code I have is:
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/imaint_audit_water_temp_cold_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Count")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Failed cold water temperatures',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: true,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#0066CC',
'#FF2F2F',
],
plotOptions: {
series: {
point: {
events: {
click: function() {
}
}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
y: 0, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false
},
series: data2
});
});
});
});
Many thanks in advance for your time.

Here is explained: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could accomplish this with custom url in each bar:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url;
}
}
}
}
},
series: [{
data: [{
y: 29.9,
url: 'http://bing.com/search?q=foo'
}, {
y: 71.5,
url: 'http://bing.com/search?q=bar'
}, {
y: 106.4,
url: 'http://bing.com/search?q=foo+bar'
}]
}]
working fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
or all the same URL:
point: {
events: {
click: function () {
location.href = "http://stackoverflow.com";
}
}
}
Hope it helps!
UPDATE
If is in a frame, you could try using:
window.top.location.href='URLGoesHere';
"_top" loads content in the top-level frameset (in effect, the whole
browser window), no matter how many nested levels down the current
frame is located

Highchart Combochart Rendered Wrong

I have a combo highchart but this is not rendered correctly, this the code that I am using:
<script type="text/javascript">
$(document).ready(function () {
SCurvechart = new Highcharts.Chart({
chart:
{
events: {
load: function () {
var label = this.renderer.label('Details for Company B')
.css({
width: '450px',
color: '#666666',
fontSize: '16px'
})
.attr({
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 50,
verticalAlign: 'top',
y: 5
}), null, 'spacingBox');
}
},
borderColor: '#BBBBBB',
borderWidth: 1,
plotShadow: true,
renderTo: 'SCurvechart_container',
zoomType: 'xy'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend:
{
align: 'left',
backgroundColor: '#FFFFFF',
floating: true,
layout: 'vertical',
verticalAlign: 'top',
x: 120,
y: 100,
itemStyle: {
color: '#666666',
fontWeight: 'bold',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif'
}
},
title:
{
text: ''
},
tooltip:
{
shared: true
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
events: {
//click: ChartClick
},
showInLegend: false,
stacking: 'normal'
}
},
xAxis:
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
categories: ['25/07/14','29/08/14','26/09/14','31/10/14','28/11/14','26/12/14','30/01/15','27/02/15','27/03/15','24/04/15','29/05/15','26/06/15','31/07/15','28/08/15','25/09/15','30/10/15','27/11/15','25/12/15','29/01/16','26/02/16','25/03/16','29/04/16','27/05/16','24/06/16','29/07/16','26/08/16','30/09/16','28/10/16','25/11/16','30/12/16','27/01/17','24/02/17','31/03/17','28/04/17','26/05/17','30/06/17']
},
yAxis: [
{
min: 0,
labels:
{
formatter: function () { return this.value; }, style: { color: '#4572A7' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
opposite: true,
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Overall Activities'
}
},
{
labels:
{
formatter: function () { return this.value; }, style: { color: '#89A54E' },
style: {font: '9px Trebuchet MS, Verdana, sans-serif'}
},
title:
{
style:
{
font: '10px Trebuchet MS, Verdana, sans-serif'
},
text: 'Weekly Activities'
}
}],
series: [
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,7,3,5,4,1,2,0,0,0,0,0,1,0,1,0,4,0,0,0], name: 'Target', type: 'column', yAxis: 1, color: '#6699CC' },
{ data: [], name: 'Actual', type: 'column', yAxis: 1, color: '#FAC090' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,,,,,,,,,,,,,,,,,], name: 'Actual Acc', type: 'spline', color: '#FF0000' },
{ data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,5,12,15,20,24,25,27,27,27,27,27,27,28,28,29,29,33,,,], name: 'Target Acc', type: 'spline', color: '#376092' }
]
});
});
If you see the compare the chart against the one created in Excel you can see the issue,
https://www.dropbox.com/s/8lrk0vtgwitbdb4/Chart-Screenshot-in-Excel.JPG?dl=0
with the highchart rendered chart:
https://www.dropbox.com/s/c1ga0x3vxa8sbol/Highchart-screenshot.JPG?dl=0
As you can see the line charts are wrong they should be close to each other.
Any help is appreciated.

The problem is that the code setting up the highchart has enabled stacking by setting stacking attribute to 'normal'.
{..., plotOptions: { series: {..., showInLegend: false, stacking: 'normal'}}, ...}
You can disable stacking by removing the stacking attribute. For example...
{..., plotOptions: { series: {..., showInLegend: false}}, ...}
Or you can disable stacking by setting stacking attribute to null. For example...
{..., plotOptions: { series: {..., showInLegend: false, stacking: null}}, ...}

some of dataLabels not showing in stacked column Highchart

I built a stacked column chart using Highcharts, but there is a problem with dataLabels. Some of the data labels cannot be displayed.
I have created a JSFiddle: http://jsfiddle.net/samsularifin/7gf787vL/1/
This my Javascript code:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Need help!

Highcharts thinks that these data labels are too close to show them all.
You can remedy this by allowing overlap, using this code (JSFiddle):
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
// ...
}
}
}
Or making it less likely to occur by reducing the padding (JSFiddle):
plotOptions: {
series: {
dataLabels: {
padding: 0
// ...
}
}
}

Highchart Bar on big range data dont show

I'm currently working on a web project for showing traffic usage in chart mode, and I'm using Highchart Bar for this project.
The problem is, when I run this code it doesn't give error at all
<script type="text/javascript">
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D', ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
3,5,1,1, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
</script>
But when I'm increasing the data categories into A, B, C, D, E, F, and G with each categories values respectively: 2,1,1,17,1,43,6,5, the script doesn't show any graph at all. Any ideas?

I dont think anything is wrong.
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D','E','F','G' ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
2,1,1,17,1,43,6, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
test the fiddle
let me know your comments.

Please start with small data...
Like first try to display A,B,C ..
then A,B,C,D ..if success then add one more E..
Do small steps then check at which point that graph does not show..
On this way may solve you problem.