0

How VegaLite charts can be rendered in Elixir, Phoenix, SurfaceUI component ?

alias VegaLite, as: Vl

# Initialize the specification, optionally with some top-level properties
Vl.new(width: 400, height: 400)

# Specify data source for the graphic, see the data_from_* functions
|> Vl.data_from_values(iteration: 1..100, score: 1..100)
# |> Vl.data_from_values([%{iteration: 1, score: 1}, ...])
# |> Vl.data_from_url("...")

# Pick a visual mark for the graphic
|> Vl.mark(:line)
# |> Vl.mark(:point, tooltip: true)

# Map data fields to visual properties of the mark, like position or shape
|> Vl.encode_field(:x, "iteration", type: :quantitative)
|> Vl.encode_field(:y, "score", type: :quantitative)

So far, I tried in this way.

defmodule CfiAppWeb.Dashboard do
  @moduledoc """
  LiveView for the dashboard
  """
  use Surface.LiveView
  alias VegaLite, as: Vl

  def render(assigns) do
    ~F"""
      <main class="container mx-auto p-4" >
        <div>
          <h1>This is dashbaord</h1>
          <div>{render_graph()}</div>
        </div>
      </main>
    """
  end

  def render_graph() do
    Vl.new(width: 400, height: 400)
      |> Vl.mark(:line)
      |> Vl.encode_field(:x, "x", type: :quantitative)
      |> Vl.encode_field(:y, "y", type: :quantitative)
  end
end

I also use Surface LiveView Components. Usually we can render this kind charts by id in Javascript but in here I can't find a way to render Vega Charts.

suppa
  • 1
  • 1
  • What exactly does not work? In what way? What do you get back? What errors do you get back? Also, please remove your previous post which is a duplicate of this one. – Aleksei Matiushkin Dec 28 '22 at 04:19
  • I setup the VegaLite chart by using alias but now I want know how can I display the chart which is the out put of Vl alias. I'm having this error. protocol Phoenix.HTML.Safe not implemented for %VegaLite{spec: %{"$schema" => "https://vega.github.io/schema/vega-lite/v5.json", "encoding" => %{"x" => %{"field" => "x", "type" => "quantitative"}, "y" => %{"field" => "y", "type" => "quantitative"}}, "height" => 400, "mark" => "line", "width" => 400}} of type VegaLite (a struct). – suppa Dec 28 '22 at 04:30
  • I deleted the last question. thank you for letting me know it. :) – suppa Dec 28 '22 at 04:33
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Dec 29 '22 at 06:32

1 Answers1

0

According to the error you receive

protocol Phoenix.HTML.Safe not implemented for %VegaLite{…}

you attempt to render a VegaLite struct where HTML is expected.

VegaLite documentation states that one can use to_html/1 to get html back, but I’d better implement a protocol Phoenix.HTML.Safe for %VegaLite{…} myself and provide a PR to VegaLite for everyone to enjoy it.

Aleksei Matiushkin
  • 119,336
  • 10
  • 100
  • 160