I have a Highstock chart here
http://jsfiddle.net/AVhaL/28/
What I want to do is to display the "Month, Year" on the x-axis, and show only distinct "Month, Year" labels.
The obvious way is to set the skip interval
tickInterval: 30 * 24 * 3600 * 1000,
But as you can see in the chart, "Mar 11" appears twice. I tried with "31", and even "32", but "Mar 11" doesn't go away.
Try with 35, the problem is solved.
xAxis: {
tickInterval: 35 * 24 * 3600 * 1000,
}
You can update your tickPositioner and return ticks with interval.
Example: http://jsfiddle.net/AVhaL/29/
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = 31 * 24 * 3600 * 1000;
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
return positions;
}
Related
I need to show hours in 24 hrs format on xAxis, following are the codes I am using -
xAxis: {
tickInterval: 3600 * 24,
type: 'datetime',
min: Date.UTC(2020, 7, 1, 0, 0, 0),
max: Date.UTC(2020, 7, 1, 23, 59, 59),
dateTimeLabelFormats: {
day: "%H:%M"
},
//tickInterval: 1,
labels: {
overflow: 'justify',
style:{
color:'#46474a'
}
},
but the interval is not working properly, I need the interval to be 1 hour, currently it is showing hours in 30 mins of interval.
update - I got to know more about time interval with this link -
Highcharts - TickInterval with datetime values
tickInterval: 1000 * 60 * 60 * 24 * 365
// milliseconds * seconds * minutes * hours * days = 1 year
And changed the tickInterval: 1000 * 60 * 60 , hours are showing proper now but the chart is still not plotting.
I tried different tickInterval but it is not working. Please help, thank you!
Change out your dateTimeLabelsFormat for just this
labels: {
format: '{value:%H:%M}'
}
You can try removing tickInterval as well and see if you prefer the automatic style.
I'm using Highchart's stack and grouped column graph.I want to use a dynamic date-time x-range which can be achieved by passing min and max parameter. I did the same but it's not plotting the graph.
If i remove min and max parameter from x axis and use category array data is populating.but i'm not able to make the category array dynamic,so that i can pass the min and max there and my graph will plot.Need Help.Thanks in Advance.
Below is my dynamicDaterange code.
xAxis: {
type:'datetime',
min: startDate ?startDate.getTime() : (Date.now() - 24 * 60 * 60 * 1000),
max: endDate?endDate.getTime() : Date.now(),
}
https://jsfiddle.net/fo3y572b/5/
Below codeline is when i'm using category array
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'April', 'May','June','July','Aug','Sep','Oct','Nov','Dec']
},
I think that a better approach will be using the pointStart and pointInterval features.
Demo: https://jsfiddle.net/BlackLabel/h2yxbkap/
API: https://api.highcharts.com/highcharts/series.pie.pointStart
plotOptions: {
column: {
pointStart: startDate,
pointInterval: 24 * 3600 * 1000, // one day
stacking: 'normal'
}
},
Setting min and max is not enough, it's just set the xAxis range but your data still looks like this [{x: 0, y: 5}, {x: 1, y: 3}, {x:2, y: 4} , ...], which means that x = 0 milliseconds is out of the xAxis range. Or you will need to redefined your data to x as an data.
I have a flotr2 graph that is supposed to display some data in it:
Edit: Chrome users: Please note, this jsfiddle does not seem to work me in chrome, not sure why
http://jsfiddle.net/1jgb2k6r/7/
My problem is that my bars aren't center-aligned over the date they represent.
$(function () {
(function color_gradients(container) {
var myData = [];
myData.push([new Date('1/1/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/8/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/15/2014').getTime(), Math.ceil(Math.random() * 10)]);
myData.push([new Date('1/22/2014').getTime(), Math.ceil(Math.random() * 10)]);
var
bars = {
data: myData,
bars: {
show: true,
barWidth: 0.8,
lineWidth: 20,
}
};
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
mode: 'time',
timeMode: 'local',
min: (new Date('1/1/2014').getTime() - (7 * 24 * 60 * 60 * 1000)),
max: (new Date('1/22/2014').getTime() + (7 * 24 * 60 * 60 * 1000))
}
});
})(document.getElementById("editor-render-0"));
});
Is there a way in flot to realign these bars?
Always in the eleventh hour I post my question, and always in the eleventh hour I find the solution.
http://jsfiddle.net/1jgb2k6r/10/
Basically, the flot line of graphing libraries have an integral bug in their datetime calculations. They all suffer severe floating point rounding errors in relation to time axis on the graph which causes the bars to shimmy over to the left of their intended plot locations.
Here is an example of a getTimeScale function that returns a date as a week number from epoch time (starting at ~2200 from 1/1/2014):
function getTimeScale(date){
return (new Date(date).getTime() / 1000 / 60 / 60 / 24 / 7);
}
This function, applied to date arguments in the data series, returns a normalized number not on the order of the hundreds of thousands:
$(function () {
(function color_gradients(container) {
var myData = [];
myData.push([getTimeScale('1/1/2014'),Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/8/2014'),Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/15/2014'), Math.ceil(Math.random() * 10)]);
myData.push([getTimeScale('1/22/2014'), Math.ceil(Math.random() * 10)]);
var bars = {
data: myData,
bars: {
show: true,
barWidth: 0.8,
lineWidth: 1,
}
};
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
ticks: ticks,
min: (getTimeScale('1/1/2014') - 1),
max: (getTimeScale('1/22/2014') + 1)
}
});
})(document.getElementById("editor-render-0"));
});
In order to display the ticks as a datetime again, you have to specify the ticks explicitly:
var ticks = [];
ticks.push([getTimeScale('1/1/2014'), '1/1/2014']);
ticks.push([getTimeScale('1/8/2014'), '1/8/2014']);
ticks.push([getTimeScale('1/15/2014'), '1/15/2014']);
ticks.push([getTimeScale('1/22/2014'), '1/22/2014']);
graph = Flotr.draw(
container, [bars], {
yaxis: {
min: 0,
max: 11
},
xaxis: {
ticks: ticks,
min: (getTimeScale('1/1/2014') - 1), //gives a little padding room on the graph
max: (getTimeScale('1/22/2014') + 1) //gives a little padding room on the graph
}
});
I have this piece of JavaScript code I got from online and I am trying to modify itto countdown to July 10, 2013.
var currentDate = new Date();
$('div#clock').countdown(45 * 40 * 30 * 30 * 1000 + currentDate.valueOf(), function(event) {
July 10, 2013 is about 100 days from now so I want the days to show 100. I don't understand the format of how the date is being passed,I have tried messing around with it but it still doesn't work properly. I tried passing a new Date object to it but that doesn't work either. This code seems to be coming from this jQuery countdown library.
Instead of "45 * 40 * 30 * 30 * 1000" use "100 * 24 * 60 * 60 * 1000" so:
var currentDate = new Date();
$('div#clock').countdown(45 * 40 * 30 * 30 * 1000 + currentDate.valueOf(), function(event) {
would be the final code. That is 1000 (milliseconds/second) * 60 (seconds/minute) * 60 (minutes/hour) * 24 (hours/day) * 100 (days).
I have a JSfiddle here: http://jsfiddle.net/mW9XD/
I'm struggling to get the amount of hours on the yaxis to actually show as the amount of hours rather than slip into days. The example shows that after 24 hours it slips into being the 2nd of Jan rather than 25 or 26 hours.
my yaxis code looks somewhat like:
yAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M:%S'
},
title: {
text: 'Hours'
},
min: 1000,
startOnTick: false,
showFirstLabel: false
},
How can i get it to display the amount of hours rather than hours/days?
I changed my yAxis to look like this:
yAxis: {
type: 'linear',
labels:{
formatter: function(){
var seconds = (this.value/ 1000) | 0;
this.value -= seconds * 1000;
var minutes = (seconds / 60) | 0;
seconds -= minutes * 60;
var hours = (minutes / 60) | 0;
minutes -= hours * 60;
return hours;
}
},
title: {
text: 'Hours'
},
min: 1000,
startOnTick: false,
showFirstLabel: false
},
Works how i want it to, wish it were a bit more native though.