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
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
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.
I'm working with highcharts char. I need to show the yaxis labels H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.).
Here is my code (full code in this fiddle):
LiveFeeds = {
init: function(tab)
{
var tab = tab || '#calling-intensity';
$(tab+'-chart').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,minRange: 0.1,
title: {
text: chartYaxis
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: tooltipData,
series: seriesData
});
}
};
This is a example but on Flot chart https://jsfiddle.net/p41d165j/14/.
Use http://api.highcharts.com/highcharts#xAxis.labels.formatter to format the labels as you wish.
To change date format of labels you could use dateTimeLabelFormats like:
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
Example: https://jsfiddle.net/hzjbb848/10/
Axis by default will display labels for each day, because of axis range, but if you zoom in - you will see hours.
You could consider using different format for day or use tickPositioner to set ticks not on days.
To fully control what is displayed in axis labels set up formatter function.
This code generates a highchart with 2 Y axis and 1 X:
$('#main_chart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Overview'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Y2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Y1',
data: y1Data
}
,{
name: 'Y2',
data: y2Data
}
]
});
y1Data and y2Data are the arrays of arrays [[1426525200, 2], [1426611600, 0], [1426698000, 0]...] where the 1st element is date. The dates are sequent with a step of 1 day:
1 Mar 2015, 2 Mar 2015, 3 Mar 2015....
However, I see only time from 12:00 till 12:55 on X and nothing else:
What I want to see is the dates 1 Mar 2015, 2 Mar 2015, 3 Mar 2015.... EndDate. Moreover, why is there minus $20? There're no negative values in the data set.
When defining data, either provide timestamp in miliseconds (not seconds) or use JavaScript Date object instead:
var y1Data = [[new Date(), 2], [1426611600000, 0], [Date.UTC(2010, 2, 1), 0]];
To answer your $-20 question, Highcharts use their own algorithm to guess the most appropriate axis minimums a maximus. If you're not happy with it, simply set
yAxis: {
min: 0,
...
}