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/
Related
I have a multiaxis chart that represent the historic statistic of positions for mexican soccer teams during the whole existance of the Mexican league itself.
Some of those teams either disappear, change identity or have bad results and are downgraded to 2nd League.
However, Multilinear Axis chart seems to represent only constant lines, thus I cannot nullify a period or epoch in the chart for some teams.
Example:
http://eliezer.rocks/ligamx/historico.php
Note: since only 20 positions exist in the league, and in the chart, I assign a obviously off-the-limits for teams whom disappeared. Such as position 25, but this is not the best. Maybe we should be able to represent periods on the charts.
Went through documentation, tried myself to understand the code and add the feature but failed.
http://eliezer.rocks/ligamx/historico.php
It's all unencoded, unencrypted.
As a Chart.js user
I would like to be able to nullify periods for a line in multi axis chart,
So I can represent use case of a line with epochs or periods.
Oh deer, you just need to put null values in the json to make lines disappear for an occurrence.
{
label: 'CELAYA',
borderColor: window.chartColors.Color2,
backgroundColor: window.chartColors.Color2,
fill: false,
data: [
null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-17,null,-16,-16,-18,-16,-15,-14,-11,-8,-11,-17,-16,-17,null,null,null,null,null,null,null,null,null,null, ],
yAxisID: 'y-axis-42',
},
I am having an issue with the gap between separated series of highcharts.
For example, I have a chart with two series. One starts from (1st March 2004) and the other starts from (1st March 2009). They do not overlap each others. When showing on the chart, the barchart automatically zips the time between two chart (skipping the year 2005, 2006...2008) and display 2 time series closing to each others.
Please refer to this for more detail:
https://jsfiddle.net/quangvinh910/6vr6dg15/2/
pointStart: Date.UTC(2004, 3, 1),
pointStart: Date.UTC(2009, 3, 1)
How can I show show the full time range between that on the x-axis?
Highstock automatically will try and strip out the gaps in the data so that there is not lots of "dead" space. This is done with the option xAxis.ordinal:
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 for nights or weekends will not take up space in the
chart. Defaults to true.
It is true by default. Try setting it to false. Demo.
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)
I've made a custom data source selector for the Google Chart Editor which has worked out wonderfully, but I'm running into an annoying little problem with the way the dates are represented on the continuous major axis of type date. For some reason, giving a date at the end of the year (e.g. new Date(2014,11,31,0,0,0)) gets labelled as the next year.
Here's a JSFiddle that describes the issue. I know I could just use a discrete axis and pass a string representation of the year, but my data source selector allows selecting a different interval (i.e. daily, monthly, weekly yearly) and a continuous axis is best for this.
Does anyone know why this happens, and is there a way to adjust how the API chooses labels for a continuous date axis?
It's interesting how phrasing a question for others can make one think of an answer. I decided to try specifying the options.hAxis.ticks and although I pass the same dates, it does change the hAxis labels to what I expect.
See the JSFiddle
It's not the best solution, since I would rather have the hAxis ticks match the nearest data point, but it is functional.
Here are the options that I specified:
var options = {
title: 'Total Sales Value Per Year',
hAxis: {
title: 'Year End',
ticks: [
new Date(2010,11,31,0,0,0),
new Date(2011,11,31,0,0,0),
new Date(2012,11,31,0,0,0),
new Date(2013,11,31,0,0,0),
new Date(2014,11,31,0,0,0)
]
}
};
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},