Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redraw plot after click event? #47

Open
goralpl opened this issue Sep 21, 2024 · 3 comments
Open

Redraw plot after click event? #47

goralpl opened this issue Sep 21, 2024 · 3 comments

Comments

@goralpl
Copy link

goralpl commented Sep 21, 2024

Hello.

Firstly, this plugin is great! I'm trying to mimic the "data link" feature that's available in the native grafana time series panel. My thought is that when a user clicks on a data point, a dynamic annotation can be built based on where the user clicked and then displayed on the graph.

I'm able to get the annotation to show up on the first click, but then subsequent clicks do not update the location of the annotation in the graph.

Any thoughts on how to accomplish this? Here is the JS in the OnClick input box. I'm on version 1.7.0

var point = data.points[0];

var xValue = point.x;
var yValue = point.y;

var url = "https://example.com/details?x=" + xValue + "&y=" + yValue;
var info = "Value at " + xValue + ": " + yValue;
function dateStringToEpoch(dateString) {
    // Convert the date string to a Date object
    var dateObj = new Date(dateString);
    
    // Get the time in milliseconds, then convert to seconds (UNIX epoch)
    return Math.floor(dateObj.getTime());
}
var annotation = {
x: dateStringToEpoch(xValue),
y: yValue,
xref: 'x',
yref: 'y',
text: "<a href='" + url + "' target='_blank'>More info</a>", // Clickable link
showarrow: true,
arrowhead: 2,
ax: xValue,
ay: yValue
};

parameters.layout.annotations = [annotation]

@jacksongoode
Copy link
Collaborator

Interesting, let me look at this! There are new event handlers for version 1.8.0 that should provide the location of every click. Not sure if that will help, but I'll try now.

@goralpl
Copy link
Author

goralpl commented Sep 24, 2024

It seems like the library would have pass the "graph id" in conjunction with the relayout plotly method? This is a snippit from the Plotly docs:

// update only values within nested objects
var update = {
    title: 'some new title', // updates the title
    'xaxis.range': [0, 5],   // updates the xaxis range
    'yaxis.range[1]': 15     // updates the end of the yaxis range
};
Plotly.relayout(graphDiv, update)

https://plotly.com/javascript/plotlyjs-function-reference/

@jacksongoode
Copy link
Collaborator

jacksongoode commented Sep 24, 2024

Ah no the issue is that changes to the options object from the onclick don't stick. I'm working on fixing this such that the data, layout, config can be modified by the onclick script.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants