Genie Discord forum

Hi, I try to build a little web app, which just plot a 3D scatter. and here is my code to generate the x,y,z data for plot.:

@app begin
    @in n = 0
@out dataToPlot = []
@onchange n begin
x = rand(n)
y = rand(n)
z = rand(n)
dataToPlot = xxxx # <- I need to send these data to frontend.
end

in GenieBuilder, I can easily add the UI placeholder, just drag "Scatter3D" into the frontend web, and the below code will be added to the app.jl file:

<plotly :data="[{
      x: [1,2,3,4,5], 
      y: [1,1,1,2,3], 
      z: [5,4,4,3,2],
      mode: 'markers',
      type: 'scatter3d'
    }]"></plotly>

but I do not know how to use my data to replace the :data here.

the setting in geniebuilder have a data setting, but it is not clear to how to use it for me.

hope could get some help here.

You have two choices:

1. define the data object entirely in the julia code and replace the HTML tag with

<plotly :data=plot_data_from_julia_code> </plotly>

To define the data in Julia, check out the documentation for the PlotlyJS.jl package, and this guide

https://learn.geniecloud.io/docs/reactive-ui/plotting

2. Define the x, y and z variables in the julia code and then bind them in the HTML as

The plotting guide also has an example on how to do this

Thank you!! I could build my first web app with the GREAT Genie builder now.

I also found some demo code using the PlotData Array to hold the data, as example:

@out d = PlotData[]
# some other code
d = [PlotData(;x=x, y=y, mode = "markers" )]
# ....

then with the html tag

<plotly :data="d"></plotly>

It will put a scatter plot on the web base on x, and y vars.

but it seems the docstring and usage about PlotData Array is missing in the document. https://genieframework.com/docs/stippleplotly/api/charts.html

so, does the PlotData a retired method to hold the data for plotly figure? or any where could I get a usage for it?

Thanks for your time.