I want to create using Flot Charts a 24 hour bar graph that has a value for every hour. From my understanding Flot uses epoch time for hour values. However wen running the following code the chart doesn't show any values and no error.
//Data for 12am and 5pm respectively in epoch time
var data = [[43200000, 20], [61200000, 50]];
var dataset = [
{
label: "amount",
data: data,
color: "#FF0000",
bars: {
show: true,
align: "center",
barWidth: 2 * 60 * 60 * 600,
lineWidth:1
}
}
];
var options = {
yaxis: {},
xaxis: {
mode: "time",
//timeformat: "%H",
tickSize: [1, "hour"], // tick every hour
min: (new Date(0, 0, 0, 00, 00, 00, 00)).getTime(),
max: (new Date(0, 0, 0, 24, 00, 00, 00)).getTime()
}
};
$.plot($("#flot-placeholder"), dataset, options);
How can I populate values on the graph?
Epoch time starts on 1970-1-1 (see here). Change your min/max values to
min: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(),
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime()
and it works with your data. See this fiddle.
But if you only care about hours and not the date, consider using categories mode, see this fiddle.
Related
I have a Highcharts scatter plot with a datetime x-axis. I want to explicitly set the min and max values for the x-axis, regardless of the chart width.
In the example below, I set xAxis.min to be 01/05/2023, but you can see that the plot renders with 01/04/2023 as the minimum value. It seems this minimum value can vary depending on the width of the plot.
Is there any way that I can set specific start/end values for the axis (and use startOnTick/endOnTick), regardless of the plot width?
let start = "05 Jan 2023 00:00:00 GMT"; // x-axis start
let end = "12 Jan 2023 00:00:00 GMT"; // x-axis end
Highcharts.chart("trendPlot", {
accessibility: { enabled: false },
chart: {
type: "scatter",
},
xAxis: {
type: "datetime",
min: Date.parse(start),
max: Date.parse(end),
startOnTick: true,
endOnTick: true,
labels: {
format: "{value:%m/%d/%y}",
enabled: true,
},
},
series: [{
"data": [
[1672894800000, 1]
]
}]
});
#trendPlot {
width: 500px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="trendPlot"></div>
Put a data as a UNIX time format, timestamp or Date.UTC method for preparing data, explained how to working with data-compression in Highcharts.
chart: {
type: "scatter",
},
xAxis: {
type: "datetime",
tickInterval: 24 * 3600 * 1000, // one day
minTickInterval: 24 * 3600 * 1000, // one day
labels: {
format: "{value:%m/%d/%y}",
enabled: true,
},
min: Date.UTC(2019, 5, 18),
max: Date.UTC(2019, 5, 20),
},
series: [{
pointStart: Date.UTC(2019, 5, 18),
data: [
[Date.UTC(2019, 5, 18), 1],
[Date.UTC(2019, 5, 18), 3],
[Date.UTC(2019, 5, 20), 5],
[Date.UTC(2019, 5, 21), 1]
]
}]
Demo: https://jsfiddle.net/BlackLabel/oq9Luxey/
I'm looking to format the X-axis in a kind of bespoke way, see attached image. The format should be in time, in 24 hour but displayed as in the image - 9, 10, 11, 12, etc.
The Y Axis values are variable, which makes things tricky. For example, they could be alphabetical, numbers or other categories that don't have any relationship with time. Am I better off using the datetime or just using integers for this?
So far it looks like this but it's not working as expected:
const chartOptions = {
title: {
text: ""
},
xAxis: {
type: "datetime",
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%H'
}
},
yAxis: {},
series: [
{
data: [
[Date.UTC(2012, 10, 10, 0, 5, 0), 1.09],
[Date.UTC(2012, 10, 10, 0, 10, 0), 1.09]
],
type: "line"
}
]
};
What I want to achieve:
https://snipboard.io/RO4NLw.jpg
You can use both datetime and linear type of xAxis. To have only hours in a datetime axis set:
xAxis: {
type: "datetime",
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
hour: '%k'
}
}
Live demo: http://jsfiddle.net/BlackLabel/okeujzmh/
API Reference: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
Using Flot I am trying to develop a chart where the x-axis displays dates in %M%D format. However when running the following code it just shows up as the epoch time instead.
http://jsfiddle.net/unwo728s/1/
JavaScript code:
var data = [ [gd(2016, 12, 3), 1000], [gd(2016, 12, 4), 200], [gd(2016, 12, 5), 3000], [gd(2016, 12, 6), 1000], [gd(2016, 12, 7), 1000], [gd(2016, 12, 8), 1000]];
var dataset = [
{
label: "Daily Amount",
data: data,
color: "#FFFFFF",
points: { fillColor: "#FFFFFF", show: true },
lines: { show: true }
}
];
var options = {
xaxes: {
mode: "time",
timeformat: "%m/%d",
tickSize: [3, "day"],
color: "black",
axisLabel: "Date",
}
};
$.plot($("#flot-placeholder"), dataset, options);
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
How can I change the x-axis to be properly formatted?
It should be
var options = {
xaxis: {
Also you need to subtract one from your `month´ parameter (month is zero-based in JS).
See this updated fiddle.
I'm using jQDateRangeSlider in my project to enable users to choose flight dates.
Here is an example: jsfiddle.net. There are two types of bounds:
Total bounds
bounds: {
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31, 12, 59, 59)
}
default selected range
defaultValues: {
min: new Date(2012, 1, 10),
max: new Date(2012, 4, 22)
}
Let's say I want to represent full year as total range(Jan - Dec). Users can select flight date(left label) and back date(right label) throughout the year. How can I set min for right slider lable no less than value in left label? Back flight date shouldn't be less than 1st date. Or in another words: how to disable all dates which is less than 1st selected date? According to documentation there is no standart solution to do it. Any suggestions?
Try
$("#slider").dateRangeSlider({
range: {min: new Date(2012, 0, 1)}, //use minimum range
bounds: {
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31, 12, 59, 59)
},
defaultValues: {
min: new Date(2012, 1, 10),
max: new Date(2012, 4, 22)
}
});
Fiddle http://jsfiddle.net/code_snips/Q4YKN/1/
I have a php outputting a chart as Javascript, it all displays properly, however, the datetime function on the x-axis isin't starting on the correct date.
I have set the graph like this:
xAxis: {
title:{
text: 'Day',
style: {
color: '#666666',
fontSize: '12px',
fontWeight: 'normal'
}
},
type: 'datetime',
dateTimeLabelFormats: {
day: '%e.%b'
},
showFirstLabel: false
},
Then at the series data level:
series: [{
name: 'Office',
zIndex: '1',
data: [0, 0, 0, 0, 0, 0, 1.8, 17.67, 17.66, 74.8, 62.45, 71.21, 67.75, 22.28, 16.61, 16.26, 71.79, 72.85, 56.52, 48.68, 47.01, 0, 0, 33.8, 62.72, 40.28, 9.99, 26.06, 8.85, 9.46, ],
pointStart: Date.UTC(2012, 7, 14),
pointInterval: 24 * 3600 * 1000 //one day
}]
So this is clearly set to daily, and to start on the 14th of July 2012. However, when the graph displays, it starts on todays date.
Any help is greatly appreciated.
try
pointStart: Date.UTC(2012, 6, 14),
for July - JS months start at 0