We Keep Coding

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}}, ...}

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?
I know it is possible if you are using only 1 series per category. But I was wondering if this is possible as well, when using multiple series.
What i have now:
$(function () {
var cats = ['1', '2', '3', '4', '5'];
var width = 375;
var height = cats.length * 100;
var value = 0;
var maxScore = 2453 + 50;
var chart = $('.highchart').highcharts({
chart: {
backgroundColor:'#fff',
type: 'bar',
width:width,
height:height,
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
}
},
min:0,
},
yAxis: {
/* stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x];
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},*/
allowDecimals: false,
min: 0,
max: maxScore,
gridLineWidth: 0,
title: {
text: '',
rotation:0,
margin:0
},
labels: {
formatter: function () {
return '';
},
},
},
tooltip: {
enabled:false,
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: { bar:{borderWidth:0, dataLabels:{align:'right'}},series: { pointWidth: 25, pointPadding: 0, groupPadding: 0.24} },
series: [{
name: 'score1',
data: [800, 1312, 833, 944, 432],
stack: 'you',
color: 'blue',
dataLabels: {
enabled: true,
color: 'blue',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}, {
name: 'score2',
data: [2208, 800, 1375, 1531, 971],
stack: 'academy',
color: 'red',
dataLabels: {
enabled: true,
color: 'red',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}],
});
$hc = $('.highchart');
});
http://jsfiddle.net/jbw8ou5g/
The idea is to have the 1,2,3,4,5 left from the bars, but above the corresponding bars.

Try this mate.Replace your x-axis properties with the below
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
},
x:350,
},
min:0,
},
Fiddle

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.

highcharts- php/mysql data fetch

i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :
[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]
my code for highchart is :
var chartOptions = {
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'line',
backgroundColor: null,
plotBackgroundColor: null,
borderRadius:20,
plotShadow: false,
events: {
load: function() {
// event.exporting.buttons.infoButton.symbolX=5;
// event.exporting.buttons.infoButton.symbolY=2;
// info_img=0;
// this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add();
}
},
style: {
zIndex: 1
},
marginRight:30
},
title: {
text: 'hello',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
xAxis: {
type:'datetime',
title: {
text: null
}
},
yAxis: {
title: {
text: 'nothing is coming',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
min: 0.0,
},
credits: {
enabled: true,
position: {
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: -3
},
href: "http://www.interscapetech.com",
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '9px'
},
text: "(c)1997- Interscape Technologies Inc. All rights reserved."
},
/*labels:{
items: [{
html: "TM",
style: {
fontSize:'8px',
left: '330px',
top: '140px'
}
}],
style: {
color: 'grey'
}
},*/
lang:{
downloadButtonTitle:'Download Chart',
printButtonTitle :'Print Chart',
infoButtonTitle:'Chart Information',
switchButtonTitle:'Click to Enlarge'
// switchButtonTitle:'Switch to Bar Chart'
},
navigation:{
buttonOptions:{
align:'right',
verticalAlign:'middle',
height:15,
symbolFill: '#4572A7',
hoverSymbolFill: '#768F3E',
hoverBorderColor:'#92A8CD',
borderColor:'#3D96AE',
backgroundColor:'white',
borderRadius:5,
borderWidth:2,
width:20,
symbolX:10,
symbolY:8,
symbolSize:10
}
},
subtitle: {
text: '',
align:'left',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none',
color: 'white'
},
x:3, //-165 if center
y:12
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
zindex:1
},
series:[{
zindex:1
}]
}
,
tooltip: {
formatter: function() {
var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
var s = '<b>'+ ctime +'</b>';
$.each(this.points, function(i, point) {
var result=Math.round(point.y*10)/10;
s += '<br/>'+ point.series.name +': '+result;
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
legend: {
itemStyle: {
fontFamily: 'Arial',
fontSize: '12px',
textShadow: 'none'
},
enabled: true
// symbolPadding: 10
},
series: []
};
$(document).ready(function()
{
var url='highchars_test2.php';
alert('helo');
$.getJSON(url, function(seriesData){
$(seriesData).each(function(i, pdata){
console.log();
if(i==(seriesData.length-1) || i==(seriesData.length-2))
{}
else
{
alert(pdata['data']);
chartOptions.series.push(pdata);
}
});
chart = new Highcharts.Chart(chartOptions);
});
});
cannot create the chart.. plz help..

in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/

Seems like in series a, the opening square bracket is missing before the data array.