Is is possible to make Highcharts skip empty date values?
I have a stacked column chart with amounts on the Y axis and dates on the X axis. But the dates are very much spread making the chart extremely wide if all values are to be seen clearly.
See this example: http://jsfiddle.net/8j1ar44L/13/
If all values are in 2016 it looks nice, but to demonstrate the problem I changed the last dataset to 2017. In the real use case, it is actually much worse as we span several years.
Setting ordinal true doesn't work:
xAxis: {
type: "datetime",
tickInterval: 24 * 3600 * 1000,
ordinal: true
},
How can I make Highcharts simply ignore missing dates and thus ignore white space between the columns?
Related
I have a highcharts graph of speed(y axis) and time( x axis), each second posts a new speed, which means in an hour I will have 3600 data point, and that is a lot. I found out about tickInterval and the ability to shorten the amount of time drawn on the x axes, but as soon as I set it the ticks labels disappear and it shows only the first minute label
Here are two graph comparison of how it look like with tickInterval and without
without tickInterval:
With tickInterval:
I would have expected to see a tick label on x axis every minute but instead I see only this ? hmm ?
here is my code with less data points than I have:
http://jsfiddle.net/cyc89zop/1/
How can I fix this problem ?
2 things:
1) You have specified your axis type as "Time" which is not a valid option. What you want is datetime.
2) You have then specified categories for the x axis. categories and datetime axis types are mutually exclusive - you must use only one or the other, not both.
To get the proper dates with a datetime axis type, you specify either
1) an x value for each data point,in millisecond epoch time, or
2) a pointStart and pointInterval property for the series
http://api.highcharts.com/highcharts/plotOptions.series.pointStart
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval
How to specify Highstock xAxis datetime period as it is shown on the picture below (made in a image editor)?
I need to show different line series for specified time period (for example, one week). And there may be cases when size of data period is less than size of the chart period (there are series that starts with a data loss). But Highstock chart is scaled so series starts from chart beginning and the chart has the size of, for example, half of a week, but I need to keep the period the same.
Thank you in advance!
It is caused by ordinal option, see docs. Disable this and set xAxis.min and xAxis.max. Demo for you: http://jsfiddle.net/L3jqL0hw/
Code sample:
xAxis: {
ordinal: false,
min: Date.UTC(2007, 0, 1),
max: Date.UTC(2019, 0, 1)
},
How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted:
as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html
However when i hover over these ticks they are misaligned as shown:
thats where the graph line should be and thats where the hovered tick shows the tooltip.but for some reason i dont get 7 ticks displayed instead gets 10 ticks displayed and all the hovered tooltips get misaligned.I also tried to force nvd3 to have specific # of ticks but didnt work.
chart2.xAxis
.ticks(7)
.tickFormat(function(d) {
return d3.time.format.utc('%b %d')(new Date(d));
});
here is the fiddle: http://jsfiddle.net/86hr7h1s/4/
I should ideally display 7 days and 7 ticks on the graph as oppose to duplicate days and 10 ticks on the graph.
Any ideas whats wrong and how to correct this?
EDIT::::::
I was able to fix my issue for 7 days with the below answer, using the tickValues() instead of ticks(). However, for large values, say display a graph data of 2 months, i'll have 30 data points. I still see that my graph ticks on hover dont align:
As you can see above the hover points still dont align with the vertical ticks. I dont want to force the ticksValues for more than 7 days on the graph.
Ay ideas how this could be achieved?
FYI:
I used this to make nvd3 display 7 values:
var datas = this.graphFunction(data);
chart2.xAxis.tickValues(datas[0].xAxisTickValues);
http://jsfiddle.net/86hr7h1s/5/
Thanks!
If you want to control the ticks precisely, you should use .tickValues() rather than ticks().
API Doc
I understand that the question was asked a long time ago, but I recently faced the same issue and found a good solution for it.
The reason of the issue with inaccurate ticks on the x-axis is the inaccurate internal numeric representation of dates that we want to display on the x-axis. As we can see here
https://nvd3.org/examples/line.html
when values on the x-axis are numbers, all ticks are displayed accurately. When we want to display dates on the x-axis, we also need to convert dates to some numeric representation. Typically dates are converted to the numeric representation via the Date.prototype.getTime() function and then labels are formatted using a code like this
chart.xAxis.tickFormat(d3.time.format('%b %Y')(date))
But the accuracy which the getTime() function provides to us is redundant in most cases. Assume we want to display only months and years on the x-axis and have a sorted list of dates where different items always have different moths but the item with a particular month may have any day and time. So, there may be a situation, where two adjacent list items have though have different months are very close to each other (for example, "Feb 28" and "Mar 1"). When we convert these list items to numeric representation using the getTime() function, the resulting list of big numbers remembers how far adjacent list items stand apart from each other. As the distance between adjacent chart points is always equal in NVD3 charts, NVD3 tries to fine-tune labels display to provide the info that some numbers are close to each other, but others are not. It leads to inaccurately displayed labels or even to duplicated labels if a chart has few points.
The solution is to omit redundant information about date and time when we convert dates to numbers. I needed to display only months and years on the x-axis and this code works great for me.
function getChartData(data) {
var values = data.map(function(val) {
return {
x: val.x.getUTCFullYear() * 12 + val.x.getUTCMonth(),
y: val.y
}
});
return [{
values: values,
key: 'date'
}];
}
function formatDate(numericValue) {
var year = Math.floor(numericValue / 12);
var month = numericValue % 12;
return shortMonthNames[month] + ' ' + year;
}
nv.addGraph(function() {
var data = [
...
{
x: new Date(2020, 2, 15, 15, 12),
y: 90
},
{
x: new Date(2020, 3, 3, 3, 54),
y: 50
},
...
];
var chart2 = nv.models.lineChart()
.showXAxis(true)
.showYAxis(true);
chart2.xAxis.tickFormat(formatDate);
d3.select('svg#svg')
.datum(getChartData(data))
.call(chart2);
return chart2;
});
Here we don't use the .tickValues() NVD3 function and so don't interfere to the default rendering engine, so the NVD3 lib can automatically add or remove axis labels when the viewport width is changed, and ticks and corresponding vertical lines are displayed exactly on the place where they should be.
Here is the full working example
http://jsfiddle.net/AlexLukin/0ra43td5/48/
I have been using FLOT for many great things. Recently, i have needed to use it for time based plots. It worked perfect last month, but this month, i noticed that my last tick was smaller than the others. Also, i noticed that the tick label was not there.
Here is a JSFIDDLE of the issue for you to look at.
Due to the large amount of Javascript, i will keep all the code inside the Fiddle; unless the information is requested.
However, me and a friend thought of a simple workaround :
if(% 2 === 0) {
/*
Check if the data can be divided by 2
Repeat this for 3 as well (return the value and
plug it in the tickSize: [val, 'day'];
*/
}
The only drawback i see here if for months that have 31 days.
How would i fix this issue, or what did i do wrong that is causing this effect?
How about always making the chart 31 days wide (which means 30 days between first and last day and 15 ticks each 2 days wide)? You get that by setting the x axis maximum if your month does not have 31 days by itself:
xaxis: {
mode: "time",
timeformat: "%b %d",
tickSize: [2, 'day'],
max: 1398902400000
},
See this updated fiddle.
I have a HighChart chart which contains a series which is made up of date/value pairs. Each date in the pairs is different. When there are data pairs which have dates which are not within the same week they dates are displayed as they should (mm/dd/yyyy) but when the data set contains only a view pairs which are all within the same week or days right next to each other instead of displaying dates in the (mm/dd/yyyy) format the chart switches to what looks like a time display and shows 00:00, 08:00, 16:00 instead of the full dates.
I already scoured the HighCharts forum and cannot find nor get an answer to this strange behaviour. Maybe someone here can help.
You can see the chart at http://jsfiddle.net/schleichermann/DkgVr/
This is a foible of the auto-scaling algorithm.
Basically, it starts with the smallest unit and stops looking too soon in some cases (like yours)1.
If you know, in advance, the timescale of interest, you can tweak the xAxis settings to compensate.
In this case adding:
day: '%b %e',
hour: '%b %e',
May be adequate. See: jsfiddle.net/DkgVr/4/ .
Or setting tickInterval: 24 * 3600 * 1000 (one day) might be good enough.
See: jsfiddle.net/DkgVr/5/ .
1 It should probably work largest to smallest. Consider making a feature-request or bug report.