I am loading around 14 days of data using highcharts js, there is a problem in the X-axis whenever the dataset loaded with respect to dropdowns is having non-continuous data (i.e for day 1, 2, 3 there is data for 4,5,6 no data for 7,8,9 data present and so on )
For this scenario, the output is showing wrong values in x-axis and are correct only in tool tip.
Also like in the example above the data for days 7,8,9 will show on 4,5,6 on x-axis but show 7,8,9 on the tool tip.
Example 2: Data for 15th july(tooltip) shown in 13th july (x-axis)
However, in another tab this does not happen and for non-continuous data also everything is shown properly, for missing data, 0 value is shown there and continued thereafter.
I have checked and rechecked the codes and they are exactly the same. Is this a bug ? I don't understand why this is happening.
Code snippets:
xAxis: {
type : 'datetime',
min : Date.UTC(new Date(processed_json[0][0]).getYear(),new Date(processed_json[0][0]).getMonth(),new Date(processed_json[0][0]).getDate()),
max : Date.UTC(new Date(processed_json[processed_json.length - 1][0]).getYear(),new Date(processed_json[processed_json.length - 1][0]).getMonth(),new Date(processed_json[processed_json.length - 1][0]).getDate())
}
All approaches/suggestions are most welcome
Related
I am using amCharts for displaying stock data. I have 7 zoom levels: 1H, 1D, 1W, 1M, 3M, 1Y, MAX. For 1H, 1D, I am using a dataset which contains minute wise data. For 1W, 1M, I use a different dataset which has hour wise data. And for rest 3 levels, I have another dataset with day wise data. Now here is my problem:
When initially, I load minute wise data at default zoom level 1D, and add a listener "changed" to chart.periodSelector, after clicking on 1W button or any further zoom level button, the difference in minutes between startDate and endDate of generated event: var minsDiff = (event.endDate.getTime() - event.startDate.getTime()) / 60000 is always equal to number of minutes in 1 day (1440) instead of 7 days.
I suppose this may be because the current dataset loaded is minutes dataset with 1440 max number of datapoints. So it may be setting date range for 1 Week equal to that of 1 Day because only that much data is available. But what I want is actual date range of 1 week if I click 1W button because I want to load a different chart with different dataset (hour wise data for 1W).
I tried using listener "zoomed" of chart. But same problem persisted.
Normally out of scope periods are not visible unless you set hideOutOfScopePeriods to false. As you noticed, if a period is greater than the amount of data available then the chart will truncate the zoom to fit the data you have. Checking the predifinedPeriod property in the changed event is a surefire way to see which button was clicked, which will help in this scenario where the data doesn't necessarily encompass the entire period:
listeners: [
{
event: "changed",
method: function(eventObj) {
console.log("clicked " + eventObj.predefinedPeriod);
}
}
]
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 want to display live real data in a highstock chart.
But there is no data during the weekend.
Meaning I have data on Friday evening and Monday morning.
I don't want these points to connect between them.
This is what I have:
http://jsfiddle.net/rov8zu98/1/
[1236902400000,null],
[1237161600000,13.63],
I need a discontinued line, but null - is not ok as it also inserts a point on x axis
The thing is that I want to not display that GAP, so I want to hide it.
here is a mock-up of what I have and what I want to achieve:
As you see - I want Monday to start right after Friday ends.
Again - the image is a mock-up.
Can someone help me?
You could try adding 1 null value at the same timestamp as the first value of Monday. That seems to do what you want.
/* Mar 2009 */
[1237161600000,null], // An extra null value the same time as Monday
[1237161600000,13.63],
http://jsfiddle.net/nicholasduffy/rov8zu98/2/
You can use gapSize option.
plotOptions: {
line: {
gapSize: 1
}
},
I have a data array which consists of timestamp - value pairs.
Basically there are two sets of data; 2014 and 2015 values.
For;
2014.12 : There are 4 values
2015.1 : There are 4 values.
2015.2 : There are 4 values.
2015.3 : There are 4 values.
I want to show them in order, 2014 values first , and so on.
However I end up showing values without time order starting from 1 to 12 on x axis.
Is there any way of setting the x axis in order based on my array data?
Fiddle;
http://jsfiddle.net/shamaleyte/6gL1wzsL/4/
Use the time plugin & mode to show date/time & values pairs.
xaxis: {
mode: 'time'
},
See this updated fiddle and the chapter in the documentation.
I'm creating a chart that has a range [2010 January, 2014 December]. I might have data for each month in between (if no data, it's null) and my idea was to use the grouped-categories plugin in order to create a x axis that shows every month (not the label itself) and group the months in years.
I achieved it using the grouped-categories plugin. I'm using primefaces that calls a Javascript function to display the JSON content as a chart.
[a link] http://jsfiddle.net/TFhd7/161/
The main issue is that in the x-axis I'd like to make it like a ruler:
- decrease the x-axis height (the thicks size)
I tried tickLength but it doesn't work for grouped-categories chart. Any ideas?