I have been facing this issue for a while and had found a fix too, but apparently this same issue has popped up again
So my visualization has a few drop downs and a chart (highcharts.js) which keeps changing dynamically depending on drop down selections
Xaxis - date and yaxis - Metric value and YOY value (column and line charts)
There is one dropdown namely "Daily" and "Hourly" which is in sync with my backend
For daily - data is for 14 days, and for hourly it's for 14*24 hours
So, with my codes used here, Xaxis comes correctly for the daily part showing 14 days(bars) there
But for Hourly, xaxis gets messed up and it counts each hour as a day and therefore shows me days for 14*24 like in the image below
So, I had already solved this problem by adding the following code in another tab :
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()),
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e %b',
week : '%e',
month : '%b',
year : '%e'
},
plotOptions: {
series: {
pointStart: Date.UTC(new Date(processed_json[0][0]).getYear(),new Date(processed_json[0][0]).getMonth(),new Date(processed_json[0][0]).getDate()),
pointInterval : 3600 * 1000, // 3600*1000 for hourly
tickInterval : 3600 * 1000,
}
},
The "min","max" and "pointstart" take care that the graph comes like this as follows :
But, now I am using the same code in a new tab and getting Wrong graph again even after using - min, max and pointstart same as above.
I really am unable to understand this, if everything (processed_json, others etc) are exactly same, why am I getting this issue again?
Can someone suggest another method or tell me what I am doing wrong.
EDIT :
Also, I would like to add this functionality that when it zooms in the correct graph (2nd one), then it should show each hour in the xaxis. Is this feasible? If yes, how?
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
I will try to explain better, starting with this image, that should make you understand better what i want to display in the graph. (the data will be taken from a database, but that's not important)
For every single day (and this graph represents a single day) I would like to see on the chart all the users (at most are 5-6) who have made at least one "action". These "actions" have a start time and an end time.
In this case, users are the series.And every series is a list of intervals (of time) of all actions made by the user on that day.
Example of series of a user who has made three actions on this day (yes, the time stamp will be multiplied by 1000)
[["1430362800","1430366400"],["1430391600","1430398800"],["1430424000","1430425800"]]
To view on the x-axis the interval 00:00 - 24:00 i will do
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000
}
Each horizontal line must be a user. To do that I should set the maximum and minimum of the y-axis. And , for example , if the users are 3 i'll do something like that (i will add only one axis, and the value (y) of each user must be 1,2,3...).
chart.addAxis({
min: 1,
max : 3,
ceiling:1,
tickInterval: 1,
labels: {
formatter: function() {
if (this.value <= 3){
return "";
}else{
return null;
}
}
}
});
The problem is that i don't know which type of chart used to display this type of data. Thanks
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 chart where I have on the x-axis a datetime and on the y-axis a value in seconds, like 10, 200 or 4500. This works fine.
What I need is something like the behavior of the datetime, that when you have a date range it shows the days between that range, but if the range is really small, it displays the hours between that range. My request is that I would like to do the same but having a number in seconds, and if the range is huge, like maybe between 100 and 2500, it should be converted to minutes, what I have now is the following:
yAxis: {
title: {
text: 'Minutes',
margin: 10
},
min: 0,
tickInterval: 60,
labels:{
formatter: function(){
var minutes = ""
if (this.value > 59){
minutes = Highcharts.numberFormat((this.value/60), 0)
}
return minutes;
}
}
}
which is great for range between 60 and 500, but when the range is longer, it draws a lot of lines to display the minutes.
Any ideas? Can I change the tickInterval depending on some value?
I already have seen this reply Plotting seconds, minutes and hours on the yAxis with Highcharts, but I don't want to handle a datetime object on that axis.
I would really recommend using the inbuilt datetime axis type if you can. It takes away a lot of hassle with things like the issue you are asking about.
Failing that, you are on the right track in looking at the tickInterval. You could try not specifying a tickInterval at all, and let highcharts decide for you. It will usually find something sensible.
If that doesn't work well for you, then you will have to look at your data range and choose a sensible tickInterval yourself. One algorithm you could use is:
if (range < 500)
tickInterval = 60
else
tickInterval = 120
Obviously, if your range can go even bigger, you may need to have another case which switches the tickInterval to 300 or higher.
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.