External event on Highcharts/highstock
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.
javascript
angular highcharts asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
add a comment |
I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.
javascript
angular highcharts asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18
add a comment |
I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.
javascript
angular highcharts asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.
javascript
angular highcharts javascript
angular highcharts asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
asked Nov 16 '18 at 15:17
jaimersjaimers
6161130
6161130
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18
add a comment |
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18
Could you please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18
add a comment |
0
active
oldest
votes
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%2f53340633%2fexternal-event-on-highcharts-highstock%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53340633%2fexternal-event-on-highcharts-highstock%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 please prepare a simplified online example of your app with sample data presenting this issue (codesandbox for example)? Are you using highcharts official wrapper for Angular: github.com/highcharts/highcharts-angular?
– Wojciech Chmiel
Nov 19 '18 at 11:18