Genie Discord forum

Problems with <plotly> component

9/13/2023, 3:35:24 PM

I'm trying to create a graph with more than one collection of data on it. When I look at some example code on https://github.com/BuiltWithGenie/GermanCredits/tree/main I see the following code:

good_bad_plot = [
   PlotData(
       x=age_slots,
       y=collect(values(credit_no_by_age(filtered_data; good_rating=true))),
       name="Good credits",
       plot=StipplePlotly.Charts.PLOT_TYPE_BAR,
       marker=PlotDataMarker(color="#72C8A9")),
   PlotData(
       x=age_slots,
       y=collect(values(credit_no_by_age(filtered_data; good_rating=false))),
       name="Bad credits",
       plot=StipplePlotly.Charts.PLOT_TYPE_BAR,
       marker=PlotDataMarker(color="#BD5631")
            )
        ]

and in the html file:

<plotly
      :data="good_bad_plot"
      :layout="good_bad_plot_layout"
      :responsive="true"
      :editable="false"
      :scroll-zoom="false"
      :static-plot="false"
      :display-mode-bar="true"
      :displaylogo="false"
      :to-image-button-options="{'filename':'newplot','height':500,'format':'png','scale':1,'width':700}"
    ></plotly>

So I figured adding PlotData structs to an array is the way to go so I implemented it as follows:

inequality_data = [
  PlotData(x = x_axis, y = data.bottom_0_1),
  PlotData(x = x_axis, y = data.top_0_1)]

and in the html file:

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

But then I get the following error:

Error: 2023-09-13 17:23:10 Error attempting to invoke handler 3 for field Reactive{Bool}(Observable(true), 1, false, false, "/Users/stef/.julia/geniebuilder/apps/happonomycockpit/app/inequality/app.jl:67") with value true
└ @ Stipple ~/.julia/packages/Stipple/v8vUW/src/stipple/mutators.jl:36
┌ Error: 2023-09-13 17:23:11 
│   exception =
│    MethodError: Cannot `convert` an object of type Vector{PlotData} to an object of type PlotData

Why would it work in the example and not in my code? What's the difference?

jeremiedb

9/18/2023, 11:23:08 PM

In your example:

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

you seem to be missing the required layout component. I'd try to have something like:

<plotly
      :data="inequality_plot_data"
      :layout="inequality_plot_layout"
    ></plotly>

For reference: https://github.com/BuiltWithGenie/GermanCredits/blob/d14856ddf6baec6f873677e04af94fc630185a31/app.jl#L19