Genie Discord forum

Hi all,

I have a few questions related to plotting. I would like to use Genie to create a dashboard with various plots. Where do I find information about plotting options, such as adding axis labels, turning of grid, setting x and y ranges, ticks etc? Based on a cursory look of the source code, it seems like those are not options that can be passed to the PlotData function.

I am fairly familiar with Plots.jl. Is there a way to use that instead?

Update: I found PlotLayoutAxis in an example in the app gallery, but it seems like an old version of Genie. Its not clear to me how to add axis labels.

I see you've already been through the source, but let me share the links to the PlotData and PlotLayout structs that set the plot options

https://github.com/GenieFramework/StipplePlotly.jl/blob/ad1651fb6fc7e50990581e8634b155254fb2cb74/src/Charts.jl#L370

https://github.com/GenieFramework/StipplePlotly.jl/blob/ad1651fb6fc7e50990581e8634b155254fb2cb74/src/Layouts.jl#L1088

Here are a couple of examples using PlotData and PlotLayout

https://github.com/GenieFramework/GenieFrameworkDemos_NewAPI/blob/f95d68fc99bdd0baddf98c597fbf770a0e2bb28c/StipplePlotlyExamples/scattermap.jl

https://github.com/GenieFramework/GenieFrameworkDemos_NewAPI/blob/f95d68fc99bdd0baddf98c597fbf770a0e2bb28c/GermanCreditsNewAPI/dashboard.jl#L36

If you can generate the plot with PlotlyJS, then porting it to Genie should be a matter of copying the fields over to the PlotData object

Thanks for your help. I tried to add a layout for the axis labels but it doesn't work. Do you have any recommendations?

  using GenieFramework
  using Distributions

  @genietools 
    @handlers begin
      @in mu = 0.0
      @in sigma = 1.0
      @out pdf_plot = PlotData()

      layout = PlotLayout(
                      xaxis = [PlotLayoutAxis(title = "x")],
                      yaxis = [PlotLayoutAxis(xy = "y", title = "density")])

      @onchange isready, mu, sigma begin 
        dist = Normal(mu, sigma)
        q1,q99 = quantile(dist, [.001, .999])
        x = [range(-5, q1, length=5)..., 
            range(q1, q99, length=100)..., 
            range(q99, 5, length=5)...]
        y = pdf.(dist, x)
        pdf_plot = PlotData(;x, y, mode="lines", layout)
      end
    end

  @page("/", "app.jl.html")
  Server.up()
  wait(Condition())
end

can you post the output screenshot?

I think you need to mention

xy for first as well

[PlotLayoutAxis(xy= "x", title = "my-x-title")]

@abhimanyuaryan , thanks for your help. This raises a different but related point. Yesterday, I did not receive an error. Now that I have restarted the server (and implemented your suggested change), I receive an error indicating PlotData does not have a keyword layout. After removing layout I continue to receive the error until I restart the server. This slows down the development process dramatically. Is there somewhere I can file an issue?

I uploaded a screenshot in case it is still useful.

Where should I pass the layout argument? One example shows that it is passed to PlotData , but the source code does not show that layout is a keyword.

By the way, part of my goal here is to construct a MWE showing how to add axis titles, remove the grid lines, and specify limits on they x and y axis values. If this would be useful, I can add it somewhere to the documentation, or at least file an issue with the finished example.

layout should passed separate in plot(data, layout, ..)

can you upload your complete MWE(current) so I can just run and test it?

@abhimanyuaryan , thanks for taking a look. I tried plot(data, layout, but it lead to an method error with the closest candidate being plot(::Union{AbstractString, Symbol}, ::Any...; layout, config, configtype, syncevents, syncprefix, class, kwargs...).

I uploaded the code.

this is not correct

pdf_plot = PlotData(x, y, layout, mode="lines")

PlotData object doesn't take layout if you see the example here: https://github.com/GenieFramework/GenieFrameworkDemos_NewAPI/blob/main/BasicApplication/app.jl

d₁ = PlotData(
    x = [1, 2, 3],
    y = [4, 1, 2],
    plot = StipplePlotly.Charts.PLOT_TYPE_BAR,
    name = "Barcelona")
    
d₂ = PlotData(
    x = [1, 2, 3],
    y = [2, 4, 5],
    plot = StipplePlotly.Charts.PLOT_TYPE_BAR,
    name = "London")

and there's the handlers

@handlers begin
    @out data = [d₁, d₂]
    @out layout = PlotLayout()
end

full example:

using GenieFramework
@genietools

d₁ = PlotData(
  x=[1, 2, 3],
  y=[4, 1, 2],
  plot=StipplePlotly.Charts.PLOT_TYPE_BAR,
  name="Barcelona")

d₂ = PlotData(
  x=[1, 2, 3],
  y=[2, 4, 5],
  plot=StipplePlotly.Charts.PLOT_TYPE_BAR,
  name="London")

@handlers begin
  @out data = [d₁, d₂]
  @out layout = layout = PlotLayout(
    xaxis=[PlotLayoutAxis(xy="x", title="my_x_axis")],
    yaxis=[PlotLayoutAxis(xy="y", title="density")])
end

function ui()
  [
    h1("GenieFramework 🧞 Data Vizualization 📊")
    plot(:data, layout=:layout)
  ]
end

@page("/", ui)

Server.isrunning() || Server.up()

cd /TestZip

$ julia --project
julia> using Genie
julia> Genie.loadapp()

go to local_ip:port and you'll see the changes

@itzi you can check more JS examples here: https://plotly.com/javascript/

PlotData only takes data. JavaScript examples below. You can convert them into Julia

remove var i.e. var trace1 becomes trace1. Object {} becomes julia object/struct PlotData(....)

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

and

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 12
  }
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  line: {
    color: 'rgb(55, 128, 191)',
    width: 3
  }
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 8
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 1
  }
};

var data = [trace1, trace2, trace3];

Similarly, js var layout becomes a struct PlotLayout object in Julia

https://codepen.io/pen?&prefill_data_id=78ff6efa-3677-4850-8c46-84f7961ba26c

i.e.

var layout = {
  width: 500,
  height: 500
};

turns

my_layout = PlotLayout(width=500, height=500)

and you turn any julia variable into reactive variables using @out in @app (new API) or @handlers(old api)

^ the above is then created into vue data

"data":{"isready":false,"isprocessing":false,"data":[{"y":[4,1,2],"type":"bar","name":"Barcelona","x":[1,2,3]},{"y":[2,4,5],"type":"bar","name":"London","x":[1,2,3]}],"layout":{"xaxis":{"title":"my_x_axis"},"yaxis":{"title":"density"}}}});

Let me know if any issue understanding

@abhimanyuaryan, thank you so much for walking me through these examples. This is very helpful.

I will give it a try soon and let you know if there are any issues.

Please let me know if your example can be leveraged for documentation. I would be willing to open an issue and add it to the documentation if I can figure it out (I had trouble getting Documenter.jl to work in the past).

@itsdfish that would be great! We recently created a repository for short code examples that people can copypaste. You can add yours there in src/2.reactive-ui if you'd like

https://github.com/GenieFramework/CodeExamples

Thank you. I checkout the example abhi created tomorrow morning and add it to the list of examples in the evening.

Thank you again. I was able to simplify the code and figure out how to manually specify the range, turn off the grid and a few other things. I will add the example to the repo tomorrow.

I have one question moving forward: how do I specify plot(:data, layout=:layout) in an html file? I see that I can use <plotly :data="pdf_plot"></plotly> for PlotData, but what should I use in this case?

<template>
  <div>
    <plotly :data="data" :layout="layout" :config="config" />
  </div>
</template>

<script>
import Plotly from 'vue-plotly';
export default {
  components: { Plotly },
  data() {
    return {
      data: [
        {
          x: [1, 2, 3, 4],
          y: [10, 11, 12, 13],
          type: 'scatter'
        }
      ],
      layout: {
        title: 'My Plot'
      },
      config: {}
    };
  }
};
</script>

here's an example from vue and plotly html tag. This is should work

<plotly :data="pdf_plot" :layout="my_layout" :config="my_config" />

let me know incase any issues

Thank you again for all of your help. Here is a link to the PR in case someone comes across this thread and wants a self-contained example.

https://github.com/GenieFramework/CodeExamples/pull/3