HighCharts: How to display xAxis between a DateTime range? - ruby-on-rails

I am using a line chart with the 'datetime' xAxis. I have pointStart: 'April 08, 2015 07:00 PM' and tickAmount: 12 for a 12 hour display. The graph shows April 8 on the xAxis, but displays 12am to 12pm instead of the 7am to 7pm.
Here is my configuration:
x_axis_start_time = 'April 08, 2015 07:00 PM -700'.to_datetime
#pv_chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart({:zoomType =>'x'})
f.options[{
useUTC: false,
scrollbar: { enabled: true }
}]
f.title({ :text=>"PV Module Temperature"})
f.xAxis [
{
type: 'datetime',
pointStart: x_axis_start_time,
pointInterval: 1 * 3600 * 1000,
tickAmount: 12,
tickInterval: 1 * 3600 * 1000,
}
]
f.yAxis [
{
title: {text: "Temperature ( °C )",
margin: 30},
}
]
f.legend(:align => 'center', :verticalAlign => 'bottom', :layout => 'horizontal')
f.series( :name=> 'PV1', :data=> #avg_pv1, color: '#FF6138', \
pointStart: x_axis_start_time, pointInterval: 60 )
f.series( :name=> 'PV2', :data=> #avg_pv2, color: '#00A388', \
pointStart: x_axis_start_time, pointInterval: 60 )
end
Result: http://i.stack.imgur.com/DinTq.png
I read on another SO thread that passing in UNIX epoch or milliseconds works, but when I convert the DateTime object to int and * 1000, the graph does not display. How can I start xAxis labels from a particular hour?
EDIT:
start_time = '2015-04-02 07:00:00 -0700'.to_time
end_time = '2015-04-02 19:00:00 -0700'.to_time
f.xAxis [{
type: 'datetime',
pointStart: start_time,
}]
f.series( :name=> 'PV1', :data=> #avg_pv1, color: '#FF6138', \
pointInterval: min_inter * 60, pointStart: start_time, \
tickInterval: 1 * 3600, tickAmount: 12, \
min: start_time, max: end_time)
This configuration works the way I want the points to display, but the xAxis is not using pointStart: start_time. It uses the date though.

Related

How to get tooltip to show values for two time series at the same time?

I am trying to have the tooltip show values for both series at the same time like depicted here: https://jsfiddle.net/bcmoney/w2oorj24/.
I have googled and tried different things, but nothing seems to work.
What am I missing? Thanks for a hint in the right direction :).
var tooltip = {
shared: true
};
var series= [{
type: 'line',
name: 'Count Act YTD',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2019, 1, 28),
data: [
0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2
]
}, {
type: 'line',
name: 'Count Plan YTD',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2019, 1, 28),
data: [
0,0,0,0,0,0,1,1,1,1,1,1,1,2,2,2,2,2,2,2,3,3,3,3,3,3,3,4,4,4,4,4,4,4
]
}
];

highcharts x-axis date issue

i'm trying to show dates on x-axis. all dates are showing one day off. here is my dates to be shown 4/23/2017, 4/30/2017, 5/7/2017, 5/14/2017,05/21/2017,06/04/2017 in x-axis. and what it's showing is thisenter image description here. it's show date which is not there or near (5/29/2017) which is overlapping with other. this is my codexAxis: { tickAmount: 5,
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
},
labels: {
style: {
fontFamily : "Open Sans"
},
}
},
time: {useUTC: false },
It happens because you've time.useUTC = true (default option). Change it to false and it should work as expected.
Code:
var data = [
['4 / 23 / 2017', 1], // [date, value]
['4 / 30 / 2017', 2],
['5 / 7 / 2017', 4],
['5 / 14 / 2017', 2],
['05 / 21 / 2017', 3],
['06 / 04 / 2017', 5]
];
Highcharts.chart('container', {
xAxis: {
tickAmount: 5,
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
},
labels: {
style: {
fontFamily: "Open Sans"
},
}
},
time: {
useUTC: false
},
series: [{
data: data.map(elem => {
elem[0] = new Date(elem[0]).getTime();
return elem;
})
}]
});
API:
https://api.highcharts.com/highcharts/time.useUTC
Demo:
http://jsfiddle.net/BlackLabel/cm4azod0

Highcharts: Different tick interval in the same axis

I have a series that is composed of:
Daily values, until a certain date
6-monthly values, from that date
onward
I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.
I'm not sure if Highcharts allows this... I think there can be two different approaches:
Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.
Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.
This is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
animation: false
},
title: {
text: 'Some data'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
type : 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
},
yAxis: {
title: {
text: null
},
maxZoom: 0.1
},
series: jsonData
});
Here's a jsfiddle with a subset of my original data.
Which would be the best way to achieve this?
Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:
xAxis: [{
type: 'datetime',
endOnTick: false,
tickInterval: 30 * 24 * 3600 * 1000,
max: 1536278400000,
width: '65%',
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
}, {
min: 1536278400000,
startOnTick: false,
offset: 0,
type: 'datetime',
tickInterval: 180 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
width: '35%',
left: '65%'
}]
Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/

Highcharts- show all the days of the particular month

I have fiddle here
fiddle
What I want is to display all the days of jan 2012 on X-axis. i.e 1.jan,2.jan, and so on.I dont want interwal between two days.
this is x-axis code.
xAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1),
max: Date.UTC(2012, 0, 31),
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b \'%y',
year: '%Y'
}
},
This can be done with the xAxis.tickInterval property. As it says right in the docs that to get an interval of 1 day you would do:
xAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1),
max: Date.UTC(2012, 0, 31),
tickInterval: 24 * 3600 * 1000, // 1 day
labels: {
step: 1,
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
As you can see it causes an overlap of your xAxis labels. You would then have to find the correct xAxis.labels formatting that suits your needs.

Highcharts dynamic-master-detail chart incorrectly identifies date range at selection

I have a dynamic-master-details Highcharts chart where the master chart has an area and multiple column - type chart series. The issue is that when selecting a date period from the master chart (the smaller chart at the bottom) the actual selection on the master chart shows the originally selected date period incorrectly - not as it was just selected b ythe mouse (usually shows a shorter date period by a few days, but sometimes shows longer ones).
I have created an example from the stock dynamic-master-details chart example from Highcharts by adding additional columns to display on the master chart:
http://jsfiddle.net/XpZWh/3/
series: [{
type: 'area',
pointInterval: 24 * 3600 * 1000,
yAxis: 0,
name: 'USD to EUR',
pointStart: Date.UTC(2007, 0, 01),
data: data
},
{
type: 'column',
yAxis: 1,
pointInterval: 24 * 3600 * 1000,
name: 'USD to EUR',
pointStart: Date.UTC(2007, 0, 01),
data: data2
},
{
type: 'column',
yAxis: 1,
pointInterval: 24 * 3600 * 1000,
name: 'USD to EUR',
pointStart: Date.UTC(2007, 0, 01),
data: data3
}],
Any idea why is this behavior? Any chance this is a Highcharts bug?

Resources