Using a Javascript Snippet to edit Bubble Chart Widget
0
I’m working on utilizing a Javascript Snippet widget to add the capability to a Bubble Chart widget to return the current X and Y coordinates whenever a mouse click occurs (so the click event occurs, and then the X and Y coordinates of the click are relayed back). I figured out the Javascript code on a CodePen, and then tried to convert it to work with the desired bubble chart by retrieving it with the following code: const chart = document.getElementsByClassName('mx-name-bubbleChart8').item(0); Following the retrieval, I then created a new Promise, and created a function that would be called within it: const prom1 = new Promise((resolve, reject) => { resolve('Success!'); }); promise1.then(attach); function attach() { chart.addEventListener('mousemove', function(evt) { const bb = evt.target.getBoundingClientRect(); const x = chart._fullLayout.xaxis.p2d(evt.clientX - bb.left); const y = chart._fullLayout.yaxis.p2d(evt.clientY - bb.top); //Plotly.relayout(chart, 'title', ['x: ' + x, 'y: ' + y].join('<br>')); console.log(`X: ${x} Y: ${y}`); }); } The code I was working with had attached the “.then()” call to a “Plotly.plot()” function call, however with the Bubble Chart widget, the point plots are already handled, so I created the Promise as something that the “.then()” call could be attached to. The Plotly.relayout() call did not change the title, and I tried to simply log the X and Y values to the console, however that proved unsuccessful as well. I am fairly new to utilizing these Javascript snippets, so I just want to see if there is something that I am missing with trying to use this code to modify the Bubble Chart widget. Combining all the lines of code outlined above produces exactly what was copy-pasted into the Javascript snippet, is this code something that is even implementable within a snippet, or do modifications to the widget itself have to be made to achieve my goal? Any feedback or guidance on this topic would be greatly appreciated. Please let me know if further clarification is needed. Thank you so much!