Why HighStocks ticks are calculated unevenly? - javascript

The data being passed to HighStocks is:
[[1505433600000,"15000.0"],
[1505692800000,"15000.0"],
[1505779200000,"15002.4785072264849164674"],
[1505865600000,"15004.95789197307424571901"],
[1505952000000,"15007.4381546342814965765"],
[1506038400000,"15009.9192956046704969869"],
[1506297600000,"15012.40131495591828960078"]]
The config for the xAxis is:
{tickWidth: 1, tickLength: 5, gridLineWidth: 0}
Although I don't think it matters.
Finally, the result is:
The issue is: the points are perfectly placed and equally spaced, which is exactly what I want. The ticks, on the other hand, are weirdly uneven with the most notable being the 23/09 tick being much closer than 25/09 than it should.
The ideal here is that the ticks just follow the data points, or even that the ticks are evenly divided. That said, it isn't a matter of 'ordinal', since I don't want dates that weren't present to be displayed (weekends).
I tried messing with options and figuring it out, but I can't pinpoint why this happens. It seems it shouldn't.

You need to use ordinal: false (Link to the doc)
Your CodePen updated to line 29 of the JS part

If you want to display ticks exactly where the points are, use tickPositions array.
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositions
http://api.highcharts.com/highcharts/Highcharts.dateFormat
Example:
http://jsfiddle.net/g4uyo5q7/

Related

Remove weekends from highcharts

Is it possible to remove certain days in highcharts? I have a chart that only get data intervals from Monday to Friday. The problem Is that Saturday and Sunday is auto added to the graph even when there is no data for these days. I cant find anything that helps on api.highcharts.com they usually have solutions to all graph related problems but I cant seem to find anything about my problem. It's probably some easy option in the chart but I cant find anything that works.
You have two options, use highcharts and breaks.
An array defining breaks in the axis, the sections defined will be left out and all the points shifted closer to each other.
Requires that the broken-axis.js module is loaded.
It would look something like this, in a datetime axis:
xAxis: {
tickInterval: 1,
breaks: [{
from: 1537567200000,
to: 1537740000000,
breakSize: 1
}]
}
Working example: http://jsfiddle.net/ewolden/L3ykegzq/
Or switch to highstock where you can have an ordinal axis (ordinal is used by default):
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
Working example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/ordinal-true/

Highcharts heatmap logarithmic colorAxis fails when 0

I'm trying to implement a heatmap in highcharts with a logarithmic colorAxis, however, I keep getting highcharts error #10 (can't plot zero or subzero values on a logarithmic axis).
As I'm trying to apply the logarithmic property to the color axis and not the actual axis themselves, I believe my problem is caused by some of my bins having a frequency of zero (A heatmap colors by the frequency in each bin).
How can I get around this? Can I create a default function so that when a frequency is zero it assigns that bin a default color? I can't find any solutions in the docs.
Currently, my colorAxis object looks like this
colorAxis: {
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
}
My solution was to iterate through my data and change all the zeros to an extremely small number then set a min property on the colorAxis so the extremely small numbers would not interfere with the color scheme. This is obviously not the best solution because if the third dimension was measuring something other than frequency and this other thing could be a fraction less than 1 then the extremely small value could overlay with actual data and throw off the color scheme. Hopefully someone comes along and provides a better solution, but for now this is all the insight I have to give.
Logarithm doesn't have any value in 0 so your solution seems pretty neat. You need to apply some offset to the values that equal 0 - there's no other way.
If you want to be more consistent you can apply the offset to all the values. Then apply formatters(tooltip, data labels, color axis' labels) so that the user sees the value without the offset.
Live demo: http://jsfiddle.net/kkulig/jdf5wrdL/

NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis

I am currently working with NVD3 using Angular Directive (angular-nvd3). I have a very simple line chart with very simple data.
The problem I have encountered now is that my data is wrongly aligned with the Axis. Example plunker available here: http://plnkr.co/edit/jWEYt6?p=preview ,
I am using dates on my xAxis, which are parsed using d3 library:
tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}
Description:
I would expect the xAxis labels to be correspondent to the grid.
In the example you can clearly notice that the xAxis is not evenly devided (values: 06/11, 08/11, 11/11, 13/11). So usually 2 days and sometimes 3 days :)
What is worse - the peaks are not matching the grid. Example: 06/11 tick is really not even close to the grid's line where I guess it is supposed to be.
I have also tried this on master's code from repo and it happens there too. There is a link in the HTML head section.
Is there a problem with my data, proper date formatting or something else? Thanks!
This bugged me for a while and I could not find an answer here. I even have opened a bug on GitHub: https://github.com/novus/nvd3/issues/1382#issuecomment-160694559 and I was clued in on the answer.
The problem:
The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.
The version showing this misconception is here: http://plnkr.co/edit/2iMHOp?p=preview
Solution:
So now, when I know what I could do, I managed to substitute the ticks by using tickValues parameter in nvd3 / angular wrapper.
The version with the solution is here:
http://plnkr.co/edit/23n3ll?p=preview
Yet another bug :)
Funny thing is that since the labels are too long to be displayed, I had to rotate them so they could fit. Another bug occurs here (I think). As you can see 2nd and last but one tick label is missing. First I tried using the solution mentioned here: NVD3 Line Chart X Axis Ticks Are Missing using the showMaxMin parameter but it does not work correctly. But if you rotate the labels to ~ -70 degrees the labels are displayed OK.
I guess this is not the end with my NVD3 journey ;)
Since the problem is, according to Atais:
The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.
I managed to pass the x's values as integer values (ex: 20160211) instead of formatted dates (ex: 2016-02-11 or similars) to nvd3, and then on tickFormatformat them to display properly.
I wrote another plunker with the problem and the commented solution (used momentjs):
Plunker with the simulated error: http://plnkr.co/edit/fXDQ0f?p=preview
Data is provided in format x: milliseconds, y: int, like {x: 1446418800000, y: 20}, and it is being formated with tickFormat:
xAxis: {
tickFormat: function(d) {
return moment(d).format('YYYY-MM-DD');
}
}
Plunker with the solution: http://plnkr.co/edit/KpALzo?p=preview
Data is provided in format x: int, y: int, like {x: 20160211, y: 20}, and it is being formated with tickFormat:
xAxis: {
tickFormat: function(d) {
moment(d, 'YYYYMMDD').format('YYYY-MM-DD');
}
}
Note that you can do it with time too, just by appending to the 'numeric date'.
As stated from #ajaybc, will not work well with dates from different months, since d3 will interpolate X axis with invalid filling dates (days 32, 33, 34 and so on)

flot is it possible to set just the begining of the x axis?

I am working on flot jquery library, and I used to use this code in order to tell flot to inference the x-axis itself
xaxis: {
},
now i have a case in which I need to show the values starting from zero in x-axis, i don't care about last value, so I need flot to calculate it dinamically. it is possible to set just the begining ?
what I tried
I couldn't find such an option using google so I calculated the max value my self and I set the x-axis manually between zero and that max value. that approaches works in some cases, but i do need to handle all the senarios so i thought let me ask here first to see if there is a built-in option for that
You can set the minimum or maximum extent of the axes like this:
xaxis: {min: 0, max: 999}
See https://github.com/flot/flot/blob/master/API.md#customizing-the-axes

NVD3 - configuring ticks on axis

I have a nvd3 line chart which displays a time series and can't get the ticks on the x axis right.
For longer time spans, it works as expected. But for shorter time spans (here: 12/31/05 to 01/01/06), the same date is displayed for multiple ticks:
Please have a look at the code for this chart on JSFiddle
I want the chart to only display ticks at data points, and not in between. Is that possible with a line chart? From my understanding, it is possible with d3, but I can't figure out if this functionality is exposed by nvd3.
I've tried explicitly setting the number of ticks with chart.xAxis.ticks() without success. The only thing that has any effect is explicitly setting the tick values with chart.xAxis.tickValues([...]), but I would prefer not having to calculate them myself.
The way to solve this in general is with custom multi-scale time formats. Note that this example itself will not work with NVD3 because it uses an older version of D3, the examples below will though.
The problem in your case is that the ticks aren't "clean" divisions of time and if you apply a multi-scale format, you get something like this. It always shows the more fine-grained format because anything else would involve a loss of precision.
You can however use a simple heuristic to show the date instead of the time if the hour is less than 3, which works reasonably well in your case. See here for an example. The proper way to do this would be to make your ticks clean divisions.
Which brings us to your actual question. There's no other way than to explicitly set .tickValues() for what you want to do, but you can compute the x positions in your data quite easily:
var xvalues = [],
tmp = data.map(function(e) {
return e.values.map(function(d) { return d[0]; });
});
xvalues.concat.apply(xvalues, tmp);
The code is not the prettiest because it's a nested structure, but fairly straightforward. Using this, you can set your tick values explicitly, full example here.

Categories