Show only two axis values in highcharts - highcharts

I would like to show just the 2GB and the 4GB values (just 2 values) in the y-axis of this chart (see jsFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Size']
},
yAxis: {
min: 0,
max: 4294967296,
labels: {
formatter: function() {
var maxElement = this.axis.max;
var kb = 1024, mb = 1048576, gb = 1073741824;
if (maxElement > gb) {
return (this.value / gb).toFixed(1) + " GB";
} else if (maxElement > mb) {
return (this.value / mb).toFixed(1) + " MB";
} else if (maxElement > kb) {
return (this.value / kb).toFixed(1) + " KB";
} else {
return (this.value) + " B";
}
}
},
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + filesize(this.y);
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Versioned trees',
data: [94371840]
}, {
name: 'Metadata',
data: [115343360]
}, {
name: 'Data',
data: [1395864371.2]
}]
});
});
Is it possible?

You can use the tickPositions property, like this:
tickPositions:[0, 1073741824 * 2, 1073741824 * 4]
It doesn't appear to respect the min:0 if you don't include 0, but you can hide the 0 label by adding:
showFirstLabel: false
Updated Fiddle:
http://jsfiddle.net/jlbriggs/kv684von/2/
Reference:
http://api.highcharts.com/highcharts#yAxis.tickPositions

Related

Highchart - Pie chart negative value when downloadXLS & viewData

i try to make negative value show in pie chart , and it success but when i use exporting 'downloadXLS' and 'viewData' the value its always show possitive, i know when use pie chart the data value must be possitive, but there is any method when export to 'downloadXLS' and 'viewData' can edit value data to negative ?
this is jsfiddle when i try to make the chart https://jsfiddle.net/zhpnos50/3/
Highcharts.chart('container', {
chart: {
type: 'pie',
},
title: {
text: 'Chart'
},
credits: {
enabled: false
},
tooltip: {
pointFormatter: function () {
if (this.y === null) {
return this.name + ': 0%';
} else {
return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
}
},
useHTML: true
},
legend: {
itemStyle: {
fontSize: '11px',
},
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',
labelFormatter: function () {
if (this.y === null) {
return this.name + ': 0%';
} else {
return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
}
},
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
formatter() {
let neg = this.point.negative,
value = this.point.negative ? -this.y : this.y,
negativeColor = Highcharts.defaultOptions.colors[0];
return '<b>'+this.point.name+'</b>: '+value+' %'
}
}
},
series: {
cursor: 'pointer',
}
},
series: [{
name: 'Value',
data: [{
name: 'A',
y: 106.733600
}, {
name: 'B',
y: 0.725800
}, {
name: 'C',
y: 0.000000
}, {
name: 'D',
y: 7.530000,
negative: true
}, {
name: 'E',
y: 0.070500
}]
}],
exporting: {
sourceHeight: 800,
sourceWidth: 800,
scale: 1,
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadXLS','viewData']
}
}
}
});
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
You can add the below plugin to modify exported values:
(function(H) {
H.addEvent(H.Chart, 'exportData', function(e) {
const dataRows = e.dataRows;
this.series[0].points.forEach(point => {
if (point.options.negative) {
// +2 to skip title rows
dataRows[point.index + 2][1] = -point.y;
}
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/ert78shL/
Docs: https://api.highcharts.com/highcharts/exporting.csv

How to set a different value on opposite y-axis in bar-negative high charts

I wanted to have different values on the left(negative) side as 1k ,2k,3k etc and different values on the right(positive) side of y-axis like 100,200,300 etc...
I tried different approaches by having conditions in labels formatter function
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'48-51', '51-54', '57-60', '60-63',
'63-66'
],
oppositecategories = [];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Headcount and Hires Age Distribution'
},
subtitle: {
text: 'Lorem Ipsum'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: oppositecategories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: [{
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + 'K';
},
y: 10
}
},
{
title: {
text: null
},
opposite: false,
reversed: false,
labels: {
step: 100,
y: 100
}
}
],
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y * 1000), 0);
}
},
series: [{
name: 'Current HC',
data: [-2.132, -1.387, -1.121, -1.479, -1.239]
}, {
name: 'Hires(4Q)',
data: [
1.17, 1.72, 1.36, 1.03, 1.21
]
}]
});
I expect different values on negative side and different values on positive side
You can create two separate yAxis for the series:
yAxis: [{
max: 0,
offset: 0,
width: '50%'
}, {
min: 0,
offset: 0,
left: '50%',
width: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/Lgqyc4k8/
Using yAxis.labels.formatter you can have this result :
yAxis: [{
title: {
text: null
},
tickInterval:0.1,
labels: {
formatter: function() {
if(this.value < 0 && this.value % 0.5 === 0){ // Negative value only on .5 k
return Math.abs(this.value) + 'K';
} else if(this.value > 0){ // Positive values
return this.value * 1000;
} else if (this.value === 0) {
return 0;
}
},
y: 10
}
},
Fiddle

Highchart hide a category and rescale is messing

I'm trying to draw a chart where categories can be filtered, and it's working pretty nicely, I used this to do it.
Problem is : my last category is the total of the others, and so is taller. I want that when the "total" checkbox is unchecheck the chart resize, but it doesn't and resize only if I also uncheck the "class7" checkbox.
you can try it here : https://jsfiddle.net/4rfdgvum/
var chart=null;
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column',
shadow: true
},
title: {
text: 'My Title'
},
xAxis: {
categories: [{"class":"class1","name":"cat1"},{"class":"class2","name":"cat2"},{"class":"class3","name":"cat3"},{"class":"class4","name":"cat4"},{"class":"class5","name":"cat5"},{"class":"class6","name":"cat6"},{"class":"class7","name":"cat7"},{'class': 'total','name':'total'}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Numbers'
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x.name + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){
return Highcharts.numberFormat(this.percentage,0) + '%';
}
}
}
},
series: [{
name: 'Ok',
color: 'green',
stack: 'a',
data: [
223,174,139,27,17,6,3,589 ]
},
{
name: 'Not Ok',
color: 'red',
stack: 'a',
data: [
21,29,26,14,15,11,11,127 ]
},
{
name: 'Partialy Ok',
color:'orange',
stack: 'a',
data: [
5,11,25,1,1,3,0,46 ]
},
{
name: 'Not usable',
color:'grey',
stack: 'a',
data: [
20,70,67,160,163,170,168,818 ]
},
{
name: 'Not done',
color:'brown',
stack: 'a',
data: [
173,158,185,240,246,252,260,1514 ]
}
]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0,1,2,3,4,5,6,7];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
Thanks
You can use axis.setExtremes() for setting max of the yAxis.
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
}, false, false);
const max = visibleArr.reduce((a, b) => Math.max(chart.yAxis[0].stacks.columna[b].total, a), -Infinity)
chart.yAxis[0].setExtremes(0, max);
}
example: https://jsfiddle.net/mw7euo1a/

show alternate colors while doing datagrouping of area chart in highcharts

I am new to javascript and so to highcharts. i am stuck in a task for long time.
I have created a highstock chart using highchart API. i am getting data using ajax call and display it in highstock chart. All works fine up till here. My page has option to recreate the chart with showing data in weekly, monthly and quarterly form. For this purpose i used datagrouping on my area chart and here the problem comes up.Now what i want is if user select, say weekly period, then all alternate weekly period areas should have opposite colors, for example, if 1st is dark grey then 2nd should be light grey and then 3rd again dark grey and so on.
2nd thing i want gaps between every group data.
Note that i have multiple series in the chart.
Is there any way to do this. Can any one please help me.
here is my code
function line_chart() {
$.getJSON('http://<?php echo $location; ?>/js/highcharts/server_processing/issuer/tbldailyprice2.php?' + ticker, function (data) {
// Create the chatu b ajanrt
mychart = $('#container2').highcharts('StockChart', {
chart: {
events: {
load: function () {
chart = this;
if (period_name == 'default') {
chart.series[0].update({
dataGrouping: {forced: false,
enabled: false,
approximation: '',
units: [['day', [1]]],
}
});
} else if (period_name == 'Quarterly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {forced: true,
approximation: 'sum',
enabled: true,
units: [['month', [3]]],
},
});
} else
if (period_name == 'Monthly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {
approximation: 'sum',
forced: true,
enabled: true,
units: [['month', [1]]],
}
});
} else
if (period_name == 'Weekly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
approximation: 'sum',
dataGrouping: {forced: true,
enabled: true,
approximation: 'sum',
units: [['week', [1]]],
}
});
}
$.getJSON('http://' + closeperiodsurl, function (newdata) {
chart.series[0].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=buy", function (newdata) {
chart.series[2].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=sell", function (newdata) {
chart.series[3].setData(newdata);
// series.setData(data);
});
}
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
}, tooltip: {
shared: false,
crosshairs: true,
formatter: function () {
var rV = null;
var symbol = '$';
var color;
var company = "?c=<?php echo $_REQUEST["c"] ?>";
var ticker_id = "&t=<?php echo $_REQUEST["t"] ?>";
if (this.series.name == 'Buy' || this.series.name == 'Sell' || this.series.name == 'Periods') {
var date = "&date=" + this.x;
if (this.series.name == 'Buy') {
color = '#0000FF';
} else if (this.series.name == 'Sell') {
color = '#FF0000';
}
$.ajax({
//dataType: "json",
url: '../js/highcharts/server_processing/issuer/trade_summary.php' + company + ticker_id + date,
async: false, // this will stall the tooltip
success: function (ajax) {
rV = ajax;
// converting currency values to symbols
var chek = rV.search("EUR");
var chek1 = rV.search("GBP");
var chek_minus = rV.search("-");
if (chek != -1) {
symbol = '\u00A3';
rV = rV.replace("EUR", "\u00A3");
} else if (chek1 != -1) {
rV = rV.replace("GBP", "\u20AC");
symbol = '\u20AC';
}
var split_text = rV.split('<br/>');
// changing the color of last row of tooltip for +ve and _ve values of net trades
if (chek_minus == -1) {
rV = split_text[0] + '<br/><span style="color:' + color + '">' + split_text[1] + '</span>';
} else {
rV = split_text[0] + '<br/><span style="color:#ff0000">' + split_text[1] + '</span>';
}
}
});
}
if (this.series.name == 'Periods') {
var date = "&date=" + this.x;
var transactions = '';
$.ajax({
//dataType: "json",
url: 'http://' + closeperiodsurl + date + '&action=hover',
async: false, // this will stall the tooltip
success: function (ajax) {
transactions = ajax;
}
});
var period_format = '';
if (period_name == 'Quarterly') {
period_format = period_name;
var s = '';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "1st Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "2nd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "3rd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "4th Quarter"
}
period_format = s + " " + Highcharts.dateFormat('%Y', this.x);
} else if (period_name == 'Monthly') {
period_format = Highcharts.dateFormat('%b %Y', new Date(this.x));
} else if (period_name = 'Weekly') {
var s = '';
if (Highcharts.dateFormat('%e', this.x) >= 1 && Highcharts.dateFormat('%e', this.x) <= 7) {
s = s + "1st Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 8 && Highcharts.dateFormat('%e', this.x) <= 14) {
s = s + "2nd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 15 && Highcharts.dateFormat('%e', this.x) <= 21) {
s = s + "3rd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 22 && Highcharts.dateFormat('%e', this.x) <= 28) {
s = s + "4th Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 29 && Highcharts.dateFormat('%e', this.x) <= 31) {
s = s + "5th Week"
}
period_format = s + " " + Highcharts.dateFormat('%b %Y', this.x);
}
return period_format + "<br/>" + transactions + "<br/>" + symbol + numberWithCommas(this.y) + " Repurchased";
} else
return (Highcharts.dateFormat('%e', new Date(this.x)) == '1') ? Highcharts.dateFormat('%est %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '2') ? Highcharts.dateFormat('%end %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '3') ? Highcharts.dateFormat('%erd %b %Y', new Date(this.x)) : Highcharts.dateFormat('%eth %b %Y', new Date(this.x)))) + '<br/>' +
(this.series.name == 'Buy' || this.series.name == 'Sell' ? rV : '');
},
valueDecimals: 2
},
xAxis: {
lineColor: '#000',
lineWidth: 1,
type: 'datetime',
maxZoom: 3600000 * 24 * 30 * 2, // roughly 2 months
//maxZoom: 28 * 24 * 3600000, // fourteen days
maxPadding: 0.05
},
// Y AXIS - PRIMARY
yAxis: [{
//minorTickInterval: 'auto',
lineColor: '#000',
// max: 1000,
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: ''
}
}, {// Secondary yAxis
title: {
text: 'Close Periods',
max: 0.4,
min: 0.3,
gridLineColor: '#FFFFFF',
gridLineWidth: 0,
},
//labels:false,
opposite: true
}],
navigator: {
// hides the plotted line at bottom of the chart
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
plotOptions: {
series:{ pointPadding:0,
groupPadding:5,
pointWidth:25
}
},
series: [{
// CLOSE PERIOD
name: '',
maxPointWidth: 90,
color: '#c0c0c0',
yAxis: 1,
type: close_period_chart_type,
lineWidth: 1,
shadow: false,
fillOpacity: '0.85',
data: [],
dataGrouping: {
approximation: '',
enabled: false,
forced: false,
units: [['month', [1]]],
},
}, {
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
enabled: true
}
}, {
//BUYS
name: 'Buy',
//unit: '%',
color: '#ffffff',
type: 'scatter',
enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/buy.png)'
},
data: [],
tooltip: {
enabled: true
}
}, {
// SELLS
name: 'Sell',
//unit: '%',
color: '#ffffff',
type: 'scatter',
// enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/sell.png)'
},
data: [],
}],
});
});
}

highcharts scatter 1 second update with user defined lables on x-axis for each point

Here is a simplified version of the live scatter chart http://jsfiddle.net/ashwinp/z6QXW/8/
Now i am getting 0 1 2 etc like this on x-axis.i want user defined name on x axis.X axis labels should be pickup-ed from XLables array.
Same code from jsfiddle i have added here
var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.5356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.3356899');
QResiduals.push('0.1356899');
HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Ellipse Plot
EllipseChartData = new Highcharts.Chart({
chart: {
renderTo: 'EllipseContainer',
type: 'scatter',
marginRight: 10,
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart each second
EllipseSeries = this.series[0];
setInterval(function () {
EllipseShift = EllipseSeries.data.length > 20;
if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]);
var x = HottelingT2[InfluenceCnt], // current time
y = parseFloat(QResiduals[InfluenceCnt]);
InfluenceCnt++;
EllipseSeries.addPoint([x, y], true, EllipseShift);
}
}, 1000);
}
}
},
title: {
text: 'Ellipse Plot'
},
xAxis: {
title: {
text: 'Sample'
},
plotLines: [{
value:2.5,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0.4,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: ''
}
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
Highcharts.numberFormat(this.x, 2) + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Ellipse Plot',
data: []
}]
});
});
});
The option you need is 'categories' on the xAxis. Try this:
xAxis: {
title: {
text: 'Sample'
},
categories:XLables,
http://jsfiddle.net/euVvy/
To fix the tooltip, you just need to refer to 'this.x', which will return the category name:
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>X: ' +
this.x + '<br/> Y: ' +
Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/4aDQ2/
You can use categories or labels formatter which allows to define "displayed label http://api.highcharts.com/highstock#xAxis.labels.formatter

Resources