Highcharts: change timeUnit thresholds
I'm looking a way to override Highcharts.timeUnits, which seems the array defining when jump from a unit to another unit. (It's not as simple as that in the source code, but ...)
Why ? Because my need is the following :
I have timeserie data, by 15 minutes, for 3 years.
I want a zoomable column chart (I use highstock in practice), where I have 1 column by month with a given zoom, 1 column by week when I zoom more, then 1 by day, 1 by hour and then 1 by 15min
In the idea, I use plotOptions.series.dataGrouping.units to define these parameters:
units: [
[
'minute',
[15]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1]
], [
'year',
[1]
]
],
But Highcharts use its own rules to jump from an unit to another one, and I find these rules not appropriated to my use-case (switch is too "early", I think)
I can change a bit the behaviour by modifying groupPixelWidth but this is a last resort, because it behaves strangely anyway.
Here is an example. If you click on the various time scales, you'll see that the the timeUnit choosen are often not appropriated.
For example choosing week or with a span from Nov 5, 2018 to Nov 26 2018 : you get data displayed by hour, but data by would be more readable, etc.
https://jsfiddle.net/f4wma38h/
highcharts
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
add a comment |
I'm looking a way to override Highcharts.timeUnits, which seems the array defining when jump from a unit to another unit. (It's not as simple as that in the source code, but ...)
Why ? Because my need is the following :
I have timeserie data, by 15 minutes, for 3 years.
I want a zoomable column chart (I use highstock in practice), where I have 1 column by month with a given zoom, 1 column by week when I zoom more, then 1 by day, 1 by hour and then 1 by 15min
In the idea, I use plotOptions.series.dataGrouping.units to define these parameters:
units: [
[
'minute',
[15]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1]
], [
'year',
[1]
]
],
But Highcharts use its own rules to jump from an unit to another one, and I find these rules not appropriated to my use-case (switch is too "early", I think)
I can change a bit the behaviour by modifying groupPixelWidth but this is a last resort, because it behaves strangely anyway.
Here is an example. If you click on the various time scales, you'll see that the the timeUnit choosen are often not appropriated.
For example choosing week or with a span from Nov 5, 2018 to Nov 26 2018 : you get data displayed by hour, but data by would be more readable, etc.
https://jsfiddle.net/f4wma38h/
highcharts
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43
add a comment |
I'm looking a way to override Highcharts.timeUnits, which seems the array defining when jump from a unit to another unit. (It's not as simple as that in the source code, but ...)
Why ? Because my need is the following :
I have timeserie data, by 15 minutes, for 3 years.
I want a zoomable column chart (I use highstock in practice), where I have 1 column by month with a given zoom, 1 column by week when I zoom more, then 1 by day, 1 by hour and then 1 by 15min
In the idea, I use plotOptions.series.dataGrouping.units to define these parameters:
units: [
[
'minute',
[15]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1]
], [
'year',
[1]
]
],
But Highcharts use its own rules to jump from an unit to another one, and I find these rules not appropriated to my use-case (switch is too "early", I think)
I can change a bit the behaviour by modifying groupPixelWidth but this is a last resort, because it behaves strangely anyway.
Here is an example. If you click on the various time scales, you'll see that the the timeUnit choosen are often not appropriated.
For example choosing week or with a span from Nov 5, 2018 to Nov 26 2018 : you get data displayed by hour, but data by would be more readable, etc.
https://jsfiddle.net/f4wma38h/
highcharts
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
I'm looking a way to override Highcharts.timeUnits, which seems the array defining when jump from a unit to another unit. (It's not as simple as that in the source code, but ...)
Why ? Because my need is the following :
I have timeserie data, by 15 minutes, for 3 years.
I want a zoomable column chart (I use highstock in practice), where I have 1 column by month with a given zoom, 1 column by week when I zoom more, then 1 by day, 1 by hour and then 1 by 15min
In the idea, I use plotOptions.series.dataGrouping.units to define these parameters:
units: [
[
'minute',
[15]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1]
], [
'year',
[1]
]
],
But Highcharts use its own rules to jump from an unit to another one, and I find these rules not appropriated to my use-case (switch is too "early", I think)
I can change a bit the behaviour by modifying groupPixelWidth but this is a last resort, because it behaves strangely anyway.
Here is an example. If you click on the various time scales, you'll see that the the timeUnit choosen are often not appropriated.
For example choosing week or with a span from Nov 5, 2018 to Nov 26 2018 : you get data displayed by hour, but data by would be more readable, etc.
https://jsfiddle.net/f4wma38h/
highcharts
highcharts
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
edited Nov 28 '18 at 15:42
nabellaleen
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
asked Nov 27 '18 at 16:26
nabellaleennabellaleen
258
258
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43
add a comment |
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43
add a comment |
1 Answer
1
active
oldest
votes
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53504025%2fhighcharts-change-timeunit-thresholds%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
add a comment |
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
add a comment |
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
so you are looking for 15 minutes & hour zooming in your chart am i right?
xAxis: {
type: 'datetime',
minRange: 15 * 60 * 1000
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'minute',
count: 60,
text: '1h'
},.....
make the xrange minvalue as 15 in milliseconds & in range selector add the button for 15m & 1h
jsfiddle:https://jsfiddle.net/karnan796/f4wma38h/11/
answered Dec 11 '18 at 11:29
user5872655
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53504025%2fhighcharts-change-timeunit-thresholds%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you prepare a simplified online demo of your chart with sample data? And try to be more clear, please.
– Wojciech Chmiel
Nov 28 '18 at 10:06
@WojciechChmiel : done ! I think it's more clear with the example, but don't hesitate to ask for precision
– nabellaleen
Nov 28 '18 at 15:43