Here is my situation.
One customer viewed my mail on : 2017 nov 1 8:10
One customer viewed my mail on : 2017 nov 1 8:25
One customer viewed my mail on : 2017 nov 1 8:39
One customer viewed my mail on : 2017 nov 1 9:50
One customer viewed my mail on : 2017 nov 2 10:10
One customer viewed my mail on : 2017 nov 2 11:25
One customer viewed my mail on : 2017 nov 2 11:39
Now I want a Line chart with hour on the X axis.
So first point would be: 2017 nov 1 8 with value : 3
Second point should be: 2017 nov 1 9 with value : 1
The a couple of hours without data so value 0.
Then point 2017 nov 2 10 with value : 1
Then point 2017 nov 2 11 with value : 2
I tried using stack, which allows me to correctly display the chart, but the points are incorrect and the tooltip displays a single value, not the combined total.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
tooltip: {
shared: false
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
min: Date.UTC(2013,4,22),
max: Date.UTC(2013,4,23),
},
series: [{
data: [
[1369206795000, 1],
[1369206795000, 1],
[1369225421000, 1],
[1369225421000, 1],
[1369225421000, 1],
[1369230934000, 1]
],
pointStart: Date.UTC(2012, 05, 22),
pointInterval: 24 * 3600 * 1000, // one day
stacking: 'normal'
}]
});
});
See:
http://jsfiddle.net/elnbado/93Xcu/557/
Instead of using stacking, I would recommend you to use Highstock, force data grouping to group data within one hour and set approximation to sum. I prepared an example presenting this in action below.
API Reference:
https://api.highcharts.com/highstock/plotOptions.series.dataGrouping
Example:
http://jsfiddle.net/Ljemcw2s/
Related
we are trying to create 3 X header lines, one containing the years, other the quarters and the last one containing months... something similar to this:
As you can see in the image above, we have 2 lines, one with years, the other one is quarters (3 months), we would like to add an additional line below each quarter with the months, our code looks like:
NOTE: As 3 months (quarter) is not something that has its label automatically, we created a label using the formatter.
Now when we try to add a third row like this:
What we get is something unexpected... years work right, while quarters are now extended like years, and the list of months is correct as follow:
The following image should give you a better idea of what we would like to achieve:
Thank you for any help you may bring. My code link is below.
Note this line in header it's called the x-axis, is an array of configuration objects. You can use xAxis.tickInterval to set the tick interval in axis units for each object.
In dateTimeLabelFormats, you can change the unit name to the required one.
xAxis: [{
tickInterval: 1000 * 60 * 60 * 24, // Days
labels: {
format: '{value:%e. %b.}',
style: {
fontSize: '8px'
}
},
units: [
[
'day',
[2]
]
]
}, {
tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
/* labels: {
format: '{value:%b}',
}, */
min: Date.UTC(2014, 3, 17),
max: Date.UTC(2015, 11, 0),
currentDateIndicator: true,
units: [
[
'month',
[3]
]
],
dateTimeLabelFormats: {
month: {
list: ['Quater']
}
}
}, {
tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
labels: {
format: '{value:%Y}',
style: {
fontSize: '15px'
}
},
linkedTo: 1
}],
Live demo: https://jsfiddle.net/BlackLabel/w3nb4oqj/
i want to show each day date , but im getting alternative dates ,like
1 feb and 3 feb and 5 feb i need full date like below without missing any dates n y axis.tried tickinterval 1 but its showing x and y values both.
1-feb-2020
2-feb-2020
xAxis: {
tick,
type:'datetime',
dataLabels: {
align: 'right',
rotation: 45,
shape: null
}
},
You need to set tickInterval to one day and use the formatter function:
xAxis: {
...,
tickInterval: 1000 * 60 * 60 * 24,
labels: {
formatter: function(){
return Highcharts.dateFormat('%e-%b-%Y', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4815/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/highcharts/xAxis.labels.formatter
Setting the xAxis to the under config is a solution which you are looking for:
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e-%b-%Y'
}
},
Demo: https://jsfiddle.net/BlackLabel/qmro0was/
API: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
API: https://api.highcharts.com/highcharts/xAxis.tickInterval
I need to create a chart with fixed values xaxis although it contains no data to graph like this:
Is importante the min value for yaxis must be (0) but show 1 grid line
(The color does not matter, and I need to show minute by minute interval, eg 18:50, 18:51, 18: 52, 18:53 ... 10 Total ticks)
as it should be the format xaxis?
as it should enter data values?
You can use showEmpty parameter of your xAxis and yAxis to show them without any data. You can also add min and max values for calculating the extremes of your axes.
If you want to have an interval of your ticks equal to 1 min you can set it using tickInterval: http://api.highcharts.com/highcharts/xAxis.tickInterval
Here you can find code that may help you:
$('#container').highcharts({
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 01, 01, 01),
showEmpty: true,
max: Date.UTC(2016, 01, 01, 01, 30),
tickInterval: 1000 * 60, // one minute
},
yAxis: {
min: 0,
max: 10,
showEmpty: true
},
series: [{
}]
});
And here you can find live example how it can work: http://jsfiddle.net/wys1duhq/1/
Given a date-range, how can I generate a sequential list of
weeks
months
that are included in the date range? For example, if the date-range is Jan 15 - Apr 29, then for the weeks it should be
15 Jan - 17, 18 - 24, 25 - 31 ... 19 Apr - 25, 26 - 29 Apr
where Jan 18th is Sunday, so in this case the week starts on Sunday, but it can also be Monday, doesn't matter. And for the months:
15 Jan - 31, 1 Feb - 28, 1 - 31 March, 1 - 29 Apr
What's the easiest way to do it?
Not sure if this is the easiest way, but it is a way. (Lazy way?)
Months: You start with a range like:
range = (Date.today..6.months.from_now)
Then you can get each month like:
months = range.to_a.map(&:beginning_of_month).uniq
#lookup docs on strftime to get exactly what you want here
months.map { |date| date.strftime('%Y %b') }
For weeks, you can start with months:
weeks = months.flat_map { |date|
m_weeks = [date]
until (week = date + 1.week) && week.month > date.month
m_weeks << week
end
m_weeks
}
#enter some string in strftime (im too lazy to look it up now)
weeks.map { |date| date.strftime('') }
I didn't test this, but I think it should work. Anyway, there are many ways to do this.
Ok so to get all weeks in the month by weeks Monday - Sunday, you can do something like this:
m_days = (Date.today.beginning_of_month..Date.today.end_of_month).to_a
day_offset = m_days.first.wday - 1
day_offset.times { m_days.unshift(nil) }
Then if you want to get an array of strings that have the first day of the week to the last day of the week you could do this.
weeks = []
m.days.each_slice(7) do |w_days|
w_days.compact!
weeks << "#{w_days.first} - #{w_days.last}"
end
You have two problems:
determining the beginning and end of each week between the start date and end date.
formatting the dates for display.
I have addressed the first problem only, but have provided all the information required to format the result in any way desired.
We are given:
start_date = "Jan 15, 2015"
end_date = "Apr 29, 2015"
We then compute the array weeks as follows:
require 'date'
days = (Date.parse(start_date)..Date.parse(end_date)).to_a
weeks = ([days.shift(7-days.first.wday)].concat(
days.each_slice(7).to_a)).map { |w|
[w.first, w.last].map { |d| [d.year, d.month, d.day, d.wday] } }
# => [[[2015, 1, 15, 4], [2015, 1, 17, 6]],
# [[2015, 1, 18, 0], [2015, 1, 24, 6]],
# [[2015, 1, 25, 0], [2015, 1, 31, 6]],
# [[2015, 2, 1, 0], [2015, 2, 7, 6]],
# ...
# [[2015, 4, 19, 0], [2015, 4, 25, 6]],
# [[2015, 4, 26, 0], [2015, 4, 29, 3]]]
Each element of weeks corresponds to a week and contains two arrays, one for the first day of the week (a Sunday, for all weeks after the first); the second for the last day of the week (a Saturday for all weeks other than the last). The arrays for individual days contain the year, month (1-12), day of month and day of week (Sunday: 0, Monday: 1,...Saturday: 6).
You can then use the Date class constants (search for "constants" at Date) to format the results.
In my chart, I try to display end of month performances over one year (at 31 Jan, 29 Fev, ..., 31 Dec). X-axis is defined as follow:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %Y'
}
}
}
The issue is that the scale automatically adjust to the appropriate unit (Months) and display the first day of the Month. As a result, my first element (at 31 Jan) is displayed above "Feb 2012" (same issue for other elements).
I was wondering if I could rather display the end of month day on my x-axis. Any idea?
Thanks,
Example
You can define a custom xAxis.tickPositioner with the positions at which the tick should appear as follows
xAxis: {
type: 'datetime',
tickPositioner: function() {
var ticks = [
Date.UTC(2012, 0, 31),
Date.UTC(2012, 2, 31),
Date.UTC(2012, 4, 31),
Date.UTC(2012, 6, 31),
Date.UTC(2012, 8, 30),
Date.UTC(2012, 10, 30)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
unitName: "month", //unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
}
Customize tick positions | Highchart & Highstock # jsFiddle