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
}
});
Related
Goodmorning everyone,
I'm trying to implement the "candlestick" graph from the Chartjs library;
I took the example shown in the documentation as a guide and everything works correctly: the 'x' and 'y' axes show the correct values;
The problem is that the actual graph is not displayed, even if the Cartesian axes are present
this is the code used for implement Chart and the result image
var barCount = 5;
var initialDateStr = '01 Apr 2017 00:00 Z';
var barData = getRandomData(initialDateStr, barCount);
//console.log(barData)
//function lineData() { return barData.map(d => { return { x: d.x, y: d.c} }) };
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: barData
}]
}
});
var getRandomInt = function(max) {
return Math.floor(Math.random() * Math.floor(max));
};
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomBar(date, lastClose) {
var open = +randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
var close = +randomNumber(open * 0.95, open * 1.05).toFixed(2);
var high = +randomNumber(Math.max(open, close), Math.max(open, close) * 1.1).toFixed(2);
var low = +randomNumber(Math.min(open, close) * 0.9, Math.min(open, close)).toFixed(2);
return {
x: date.valueOf(),
o: open,
h: high,
l: low,
c: close
};
}
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.
xAxis label sliding when wide or zoom; date_format use 'month', 'week', maybe others.
I want datetime scale month only. How can I do it? I don't like 'Feb, Feb, ...'
$(function () {
var data = [];
var y = 1000;
for (var year = 2014; year <= 2014; year++) {
for (var month = 0; month <= 5; month++) {
var day = Math.floor(Math.random() * 30);
y += Math.floor(Math.random() * 5);
data.push([Date.UTC(year, month, day), y]);
}
}
var dtlf = {
week: '%b(w)',
day: '%b(d)',
month: '%b(m)',
year: '%b(y)'
};
$('#container').highcharts({
chart: {zoomType: 'x', type: 'line', width: 800},
xAxis: {type: 'datetime', gridLineWidth: 1, startOnTick: true, dateTimeLabelFormats: dtlf},
series: [{name: 'series', type: 'line', data: data}]
});
});
You need to set tickInterval: 30 * 24 * 3600 * 1000 - then tick will be displayed every month.
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.