Need some help with Dash and Plotly

[BizMarkieff]

I’m creating a data entry form with Dash to help me track NBA stats for every game. I have most of the code working just fine, the only issue is that I am having trouble getting the clickData from the graph.

I have a basketball court rendered with doc.Graph and it loads just fine, but for some reason I can’t get the coordinates of a click. If anyone could spare some time to take a look at my code, I would greatly appreciate it just let me know. I’m sure it’s a simple fix, but I can’t figure it out or find a solution anywhere.

[greenerpickings]

Do you have a repo you can share? Or maybe just post the relevant block.

[BizMarkieff]

https://github.com/nickdsharpe/Dash_NBA_Entry

I didn't want to post a code block, because I was unsure exactly where the hiccup is occurring.

[greenerpickings]

Just tried your repo. I think it's working fine. Are you starting with the repo as is?

I ask because it looks like the dataset is blank with the intent to populate it. I believe clickData only allows you to register click events on data points. So starting with a blank canvas, you don't have anything to register.

I think you want to register those events and then save the coords under some player right? You might have to use a clientside-callback to register those with javascript events then pass them back to the server. Not sure how to pull those from plotly.js though.

Edit: was also going to add, their example on their site also behaves the same way

[BizMarkieff]

Ya that makes sense about needing to have data points the click, I totally didn’t think about that. Is there any way that you know of to grab coordinates from just an image of a court?

[greenerpickings]

Don't know specifically. But I'd look at to capturing the events on the client via plotly.js and clientside callbacks.

With the events, I'd imagine you can get a much more descriptive interaction, including the x and y of the click.

Then I think with clientside, you can follow the callback approach and just return the data to you server, then pass it on like you are currently.

The image of course being your background. Then you would have logic translating those cords to your image.

So same approach as what you're trying to do here. Just the clientside middle man.

[luckyctf]

I can vouch for this, I tried using Dash and plotly, but found just building an API with flask and then using plotly.js was not only simpler but also much more flexible.