Highcharts, button to redraw stackedcolumn - highcharts

I am bringing in to my chart json objects, indexed two different ways.
I have a button to flip my index, and it works in the sense that my catagories will flip back and forth, but my new data does not...
var $chart_data = data[1];
$button = $('#button');
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
useHTML: true,
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'priority 1',
'priority 2',
'priority 3'
]
},
yAxis: {
min: 0,
max: 60,
title: {
text: 'Total Actual Hours by Type',
style: {
fontSize: '8px',
fontWeight: 'normal'
}
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
style: {
textShadow: '0 0 3px black'
}
}
}
},
exporting: {
enabled: false
},
series: $chart_data
});
$button.click(function() {
if (!flipxAxis) {
console.log('flip to priority x axis');
chart_ops_support_times.xAxis[0].categories = priority_bkts ;
chart_ops_support_times.series[0].update({
dataLabels: {
enabled: true
},
series: data[0]
});
chart_ops_support_times.redraw();
} else {
console.log('flip to time span x axis');
chart_ops_support_times.xAxis[0].categories = time_span_bkts;
chart_ops_support_times.series[0].update({
dataLabels: {
enabled: false
},
series: data[1]
});
chart_ops_support_times.redraw();
}
flipxAxis = !flipxAxis;
});
}
I have put in the swap of datalabels just to test if the update is firing, and it is...

Related

Xaxis should get aligned at (0,0) in highcharts

I want to align xaxis line and axis labels at position (0,0) when data contains negative values.
ex. consider this fiddle example where negative values bar goes down and xaxis is set at (0,0)
http://jsfiddle.net/13d54mp8/2/
var YTD = 'YTD';
var yr1 = 'Year 1';
var yr3 = '*3 Year';
var yr5 = '*5 Year';
var sinceIN = '* Since Inception (5/31/2012)';
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (-1) * (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
},
yAxis: {
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'
},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'
}
],
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Now I want to make work the same use case for inverted column chart where xaxis is on top and yaxis is at right side. check fiddle - http://jsfiddle.net/fa2e80qu/3/
var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
opposite:true
},
yAxis: {
opposite:true,
reversed:true,
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [
{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'}
],
legend: {
enabled:false,
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});
Expected behavior is to have xaxis line and labels aligns properly at position (0,0)
You can use the toPixels method:
chart: {
...,
events: {
load: function() {
var xx = this.yAxis[0].toPixels(0) - this.plotTop;
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/07rej16z/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

Highcharts display column category names on the xaxis

I have an issue displaying the column categories on the xaxis. I can get them to display in the "legend" and the "tooltips".
I have searched for a solution with no result. Can anyone see where I am going wrong.
My code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Detractors','Passives','Promoters','Not used']
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 30,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
},
tooltip: {
formatter: function() {
return 'Guest responses:<br/> '+ this.y +'%<br/>'+ this.series.name +'<br/>';
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
colors: ['#FF0000','#FF6600','#009900','#333333'],
plotOptions: {
column: {
colorByPoint: false
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.1f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'%</b>';
}
}
}
},
credits: {
enabled: false
},
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: []
}
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_SESSION['SectionVar'];?>&From=<?php echo $_SESSION['StartDate'];?>&To=<?php echo $_SESSION['EndDate'];?>", function(json) {
options.xAxis.categories = json[0];
options.series[0] = json[0];
options.series[1] = json[1];
options.series[2] = json[2];
options.series[3] = json[3];
chart = new Highcharts.Chart(options);
});
});
Many thanks in advance for your time.

Align dates on x axis on multiple Highcharts diagrams

I have three diagrams as the picture below. As you can see the dates align on the last two but on the top line chart the dates does not align with the other two. Can i control this in any way?
The code looks like this:
<div id="statisticsBGDiagramLastMonth" style="width:950px; height:250px;"></div>
<div id="statisticsInsulinDiagramLastMonth" style="width:950px; height:200px;">/div>
<div id="statisticsCarbsDiagramLastMonth" style="width:950px; height:200px;">/div>
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsBGDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
title: {
text: 'Blodsocker'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 10,
min: 0,
title: {
text: null
}
},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ' + '%H:%M',
new Date(this.x)) + ' ' + this.series.name +
'<br>' + this.y + ' mmol/l';
return text;
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [{
name: 'BG',
data: #Model.LastMonthPatientBGValuesGraphData,
//zIndex: 1,
type: 'line',
shadow: false,
marker: {
enabled: false,
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
}
}]
});
});
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsInsulinDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
legend: {
enabled: false
},
title: {text: 'Insulin'},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ',
new Date(this.x)) + ': ' + this.series.name +
'<br>' + this.y + 'E';
return text;
}
},
xAxis: {
type: "datetime"
},
yAxis: {
min: 0,
title: {
text: ''
},
tickInterval: 20,
stackLabels: {
enabled: true,
formatter: function(){
var val = this.total;
if (val > 0) {
return val;
}
return '';
},
style: {
fontSize: '9px',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
}
},
plotOptions: {
//line: {dataLabels: {enabled: true, style: {fontSize: '8px'}, style: {textShadow: false}, allowDecimals: true, formatter: function() {return this.y + 'e'}}},
column: {stacking: 'normal', shadow: false, dataLabels: {
formatter:function() {
if(this.y != 0) {
return this.y;
}
},
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black',
fontSize: '8px'
}
}},
//series: {minPointLength: 0}
},
credits: { enabled: false },
series: [{pointWidth: 25, type: 'column', color: '#009ddf', name: 'Insulin Basal', allowDecimals:true, data: #Html.Raw(#Model.LastMonthPatientSortedBasalGraphData) }, {pointWidth: 25, type: 'column', color: '#A7CBED', name: 'Insulin Bolus', allowDecimals:true, data: #Html.Raw(#Model.LastMonthPatientSortedBolusGraphData)}]
});
});
$(function () {
var usersPerClinicDiagram = new Highcharts.Chart({
chart: {
renderTo: 'statisticsCarbsDiagramLastMonth',
backgroundColor:'#F8F8FA'
},
legend: {
enabled: false
},
title: {text: 'Kolhydrater'},
tooltip: {enabled: true, shared: false,
formatter: function() {
var text = Highcharts.dateFormat('%Y-%m-%d ',
this.x) + ': ' + this.series.name +
'<br>' + this.y + ' gram';
return text;
}
},
xAxis: {
title: {text: 'Datum',align: 'high'},
type: "datetime",
allowDecimals: true,
},
yAxis: {
tickInterval: 100,
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
formatter: function(){
var val = this.total;
if (val > 0) {
return val;
}
return '';
},
style: {
fontSize: '9px',
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {stacking: 'normal', shadow: false},
//series: {minPointLength: 0}
},
credits: { enabled: false },
series: [{ pointWidth: 15, type: 'column', color: '#666666', name: 'Carbs', allowDecimals:true, data: #Html.Raw(#Model.LastMonthFoodDataGraphData) }]
});
});
Just had this issue and solved it by setting
plotOptions: {
column: {
pointPlacement: 'on'
}
}

HighCharts - increase bar height and reduce bar gap

Trying to increase bar height to accommodate series name inside bar and trying to reduce default gap between series group. The section "series: []" is, I assume for the JSON return function to populate. Tried many examples from all the generous JSFiddle examples to no avail. I'm a noob so please be patient. Any ideas? So far I have: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'],
title: {
text: 'Cluster Totals',
x: -20 //center
},
subtitle: {
text: 'Dept - Branch',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
align: 'center',
borderWidth: 0
},
plotOptions: {
bar: {
stacking: 'normal',
pointWidth: 20,
pointPadding: 0,
cursor: 'pointer',
point: {
events: {
click: function() {
alert('later drilldown events');
}
}
dataLabels: {
enabled: true,
inside:true,
useHTML: true,
align: 'left',
color: 'white',
style: {
fontWeight: 'bold'
},
verticalAlign: 'middle',
formatter: function () {
if (this.series.name)
return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>';
else return '';
}
}
}
},
series: []
}
$.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, function(json)
{
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
});
I think you options you need are groupPadding and pointWidth. e.g.
groupPadding:0.1,
pointWidth:20,
http://jsfiddle.net/s3t2pL94/

horizontal scroll bar in highcharts

I am trying to get the horizontal scroll bar to work in my highcharts graph. Though the horizontal scroll bar appears, there is no space to scroll. The graph is actually becoming smaller to be able to accommodate all the data.
Here is the jsfiddle code
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ["CCD Oberon Mall","CCD Gold S",
"Barista Coffee Shop Indra Nagar",
"Dominos Pizza Delhi MG Road"],
title: {
enabled: true,
margin: 15
},
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
scrollbar: {
enabled: true
},
yAxis: [{
title: {
text: 'Age Count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}, { // Secondary yAxis
title: {
text: 'Gender Count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
},
opposite: true
}],
legend: {
align: 'center',
//x: -100,
verticalAlign: 'top',
//y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>'; //+
//'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
point: {
events: {
click: function () {
console.log('this.x,y=' + this.x + "," + this.y + " category=" + this.category);
}
}
},
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'column',
name: 'Female',
data: [44,4,10,10],
stack: 'Female'
}, {
type: 'column',
name: 'Male',
data: [30,0,0,10],
stack: 'Male'
}, {
type: 'column',
name: 'Under 18',
data: [0,0,0,0],
yAxis: 1,
stack: 'Under18'
}, {
type: 'column',
name: '18 To 24',
data: [0,0,0,0],
yAxis: 1,
stack: '18To24'
}, {
type: 'column',
name: '25 To 34',
data: [54,4,10,20],
yAxis: 1,
stack: '25To34'
}, {
type: 'column',
name: 'Above 34',
data: [20,0,0,3],
yAxis: 1,
stack: 'Above34'
}]
});
You need to set min/max values, i.e
min:0,
max: 2 // 2 categories on xAxis will be displayed
http://jsfiddle.net/2K8uW/2/

Resources