nline / nline-plotlyjs-panel

Plotly.js for Grafana
https://grafana.com/grafana/plugins/nline-plotlyjs-panel/
Apache License 2.0
39 stars 4 forks source link

Redraw plot after click event? #47

Open goralpl opened 1 month ago

goralpl commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.