Large Y-axis tickInterval in high charts does not work - highcharts

I have a chart at this JSFiddle to demonstrate a problem where our charts are not respecting the y-axis tick interval for large values:
http://jsfiddle.net/z2cDu/1/
var plots = {"usBytePlots":[[1362009600000,143663192997],[1362096000000,110184848742],[1362182400000,97694974247],[1362268800000,90764690805],[1362355200000,112436517747],[1362441600000,113563368701],[1362528000000,139579327454],[1362614400000,118406594506],[1362700800000,125366899935],[1362787200000,134189435596],[1362873600000,132873135854],[1362960000000,121002328604],[1363046400000,123138222001],[1363132800000,115667785553],[1363219200000,103746172138],[1363305600000,108602633473],[1363392000000,89133998142],[1363478400000,92170701458],[1363564800000,86696922873],[1363651200000,80980159054],[1363737600000,97604615694],[1363824000000,108011666339],[1363910400000,124419138381],[1363996800000,121704988344],[1364083200000,124337959109],[1364169600000,137495512348],[1364256000000,136017103319],[1364342400000,60867510427]],"dsBytePlots":[[1362009600000,1734982247336],[1362096000000,1471928923201],[1362182400000,1453869593201],[1362268800000,1411787942581],[1362355200000,1460252447519],[1362441600000,1595590020177],[1362528000000,1658007074783],[1362614400000,1411941908699],[1362700800000,1447659369450],[1362787200000,1643008799861],[1362873600000,1792357973023],[1362960000000,1575173242169],[1363046400000,1565139003978],[1363132800000,1549211975554],[1363219200000,1438411448469],[1363305600000,1380445413578],[1363392000000,1298319283929],[1363478400000,1194578344720],[1363564800000,1211409679299],[1363651200000,1142416351471],[1363737600000,1223822672626],[1363824000000,1267692136487],[1363910400000,1384335759541],[1363996800000,1577205919828],[1364083200000,1675715948928],[1364169600000,1517593781592],[1364256000000,1562183018457],[1364342400000,681007264598]],"aggregatedTotalBytes":43476367948896,"aggregatedUsBytes":3150320403841,"aggregatedDsBytes":40326047545055,"maxTotalBytes":328186292129,"maxTotalBitsPerSecond":30387619.641574074}
;
$('#container').highcharts({
yAxis: {
tickInterval: 53687091200 // 500 gigabytes. Maximum y-axis value is approx 1.8TB
},
series : [
{
color: 'rgba(80, 180, 77, 0.7)',
type: 'areaspline',
name : 'Downstream',
data : plots.dsBytePlots,
total: plots.aggregatedDsBytes
},
{
color: 'rgba(33, 143, 197, 0.7)',
type: 'areaspline',
name : 'Upstream',
data : plots.usBytePlots,
total: plots.aggregatedUsBytes
}]
});
In this example we are charting bandwidth utilization in bytes. The chart has a maximum value of about 1.8TB. We set the y-axis tick interval to exactly 500GB but the rendered y-axis ticks don't make any sense for the given interval.


You can set max value or use tickPositioner.
Ref:
- http://api.highcharts.com/highcharts#yAxis.max
- http://api.highcharts.com/highcharts#yAxis.tickPositioner

Related

How to increase and decrease the height of the gridlines in advanced accessible highcharts

I am using advanced accessible high charts and I need to be able to increase and decrease the height of gridlines based on the data points for a particular series. If the data points for a particular series is less than 10 I want the height of the gridline to be 30 px else if the data points is between 10 and 15 I want the height to be 50px if the data points are more than 20 i will need the gridline height to be 100px

The only solution that came to my mind is to attach each series into an independent axis which allows setting each axis height (in percentage or pixel value).
xAxis: [{
height: '30%',
}, {
height: '60%',
top: '30%',
offset: 0
}, {
top: '80%',
height: '10%',
offset: 0
}],
series: [{
data: [2, 3, 4],
xAxis: 0
}, {
data: [10, 12],
xAxis: 1
}, {
data: [10, 12],
xAxis: 2
}]
Demo: https://jsfiddle.net/BlackLabel/8pu13s7d/
API: https://api.highcharts.com/highcharts/yAxis.height
API: https://api.highcharts.com/highcharts/yAxis.top

highchart polar chart with length and angle series instead of pointInterval

Currently polar chart in highchart is placing the points in fix interval set by pointInterval. Is it possible to enter coordinates in series by length and angle (or x and y)?
i.e. instead of having:
series: [
{
type: "line",
data: [1,5,3,2,1],
pointInterval: 45,
}
],
I'd like to have:
series: [
{
type: "line",
data: [[0,1],[40,5],[60,3],[150,2],[220,1]]
}
],
Where the first item is the angle and the second item is length.

Highcharts Timeline with xAxis values

I need to create a chart with fixed values xaxis although it contains no data to graph like this:
Is importante the min value for yaxis must be (0) but show 1 grid line
(The color does not matter, and I need to show minute by minute interval, eg 18:50, 18:51, 18: 52, 18:53 ... 10 Total ticks)
as it should be the format xaxis?
as it should enter data values?

You can use showEmpty parameter of your xAxis and yAxis to show them without any data. You can also add min and max values for calculating the extremes of your axes.
If you want to have an interval of your ticks equal to 1 min you can set it using tickInterval: http://api.highcharts.com/highcharts/xAxis.tickInterval
Here you can find code that may help you:
$('#container').highcharts({
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 01, 01, 01),
showEmpty: true,
max: Date.UTC(2016, 01, 01, 01, 30),
tickInterval: 1000 * 60, // one minute
},
yAxis: {
min: 0,
max: 10,
showEmpty: true
},
series: [{
}]
});
And here you can find live example how it can work: http://jsfiddle.net/wys1duhq/1/

Controlling Highcharts bar chart look and layout

I have a bar chart where the data is coming from the database, so I don't know how many categories or series it will contain, but I still wish to display the different charts with the same standard look and feel (same bar width, space between bars, space between categories, etc.).
The chart width has to be 600px and each bar has to be 20px wide. The space between the bars has to be 5px and the space between the categories has to be 20px. The height should be calculated based on these values as I think that Highcharts doesnt do this by itself.
I tried to solve this by setting pointWidth to 20px, and then calculating the height. But I am unsure about the pointPadding and groupPadding values. It says that it's value is given in x-axis units. My x-axis only contains categories (i.e. fruits: lemon, orange, apple, etc.). What is the x-axis unit for such a category?
I have made an example fiddle where I am calculating the chart height based on the number of categories, number of series, pointWidth, pointPadding, groupPadding:
var pointWidthInPx = 20,
spaceBetweenBarsInPx = 5,
groupPaddingInPx = 5,
categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
series = [{
name: 'Year 1800',
data: [107, 55, 635, 203, 30]
}, {
name: 'Year 1900',
data: [133, 156, 550, 408, 45]
}, {
name: 'Year 2008',
data: [500, 604, 404, 632, 60]
}];
var totalPointWidthsInPx = pointWidthInPx * categories.length * series.length,
totalSpaceBetweenBarsInPx = spaceBetweenBarsInPx * categories.length * (series.length - 1),
totalGroupPaddingsInPx = (groupPaddingInPx * 2) * categories.length,
calculatedHeightInPx = totalPointWidthsInPx + totalSpaceBetweenBarsInPx + totalGroupPaddingsInPx;
var groupPadding = (groupPaddingInPx * categories.length) / calculatedHeightInPx;
http://jsfiddle.net/VpMtD/
Ufortunately, I can't seem to get the correct pixel value of the groupPadding or the pointPadding correctly.
Any help on how to solve this will be greatly appreciated.

You need to calculate height of the chart according to your needs. For example: http://jsfiddle.net/PhVDV/6/
function genChart(n) {
var pointWidth = 20;
var h = (pointWidth + 10) * 2 * n + 50 + 70;
// + 10- distance between bars
// * 2 - number of series
// +50+70 - margins top + bottom
// n - number of points
if ($('#container').highcharts()) {
$('#container').highcharts().destroy();
}
$('#container').highcharts({
chart: {
type: 'bar',
marginTop: 50,
marginBottom: 70,
height: h
},
plotOptions: {
bar: {
pointWidth: pointWidth,
groupPadding:0,
}
},
series: [{
data: randomData(n)
}, {
data: randomData(n)
}]
});
}
function randomData(n) {
var d = [];
while (n--) {
d.push(Math.random());
}
return d;
}
$("button").click(function () {
genChart(Math.round(Math.random() * 20) + 4);
});

Override tick interval calculation in Highcharts?

Highcharts does a great job figuring out appropriate tick intervals.
However, I have a "duration" series (in ms), which I format e.g. like "3y 6M" or "1d 3h" or "3h 30min" for display. Because Highcharts is optimizing the tick intervals for the ms value (e.g. 10,000,000ms), I end up with awkward values such as [ 2h 46min 40s, 5h 33min 20s, 8h 20min ] rather than [ 3h, 6h, 9h ].
Can I get Highcharts to prefer multiples of certain values (e.g. 1000, 60 * 1000, 60 * 60 * 1000 etc)? I'd rather not have to calculate the exact tick interval myself (depends on chart size etc).

I think you should consider using datetime axis for yAxis. For example: http://jsfiddle.net/jRGvs/
yAxis: {
type: 'datetime'
},
series: [{
type: 'column',
name: 'Column',
data: [Date.UTC(1970, 0, 1, 2, 30),
Date.UTC(1970, 0, 1, 1, 45),
Date.UTC(1970, 0, 1, 4, 10),
Date.UTC(1970, 0, 1, 3, 30)]
}]

you can go with label > formatter for yAxis,
here you can write a routine which will handle the text/value to be displayed beside the grid line. but the thing is you cannot override the tick interval from here.

Resources