ProductPromotion
Logo

Elixir

made by https://0x3d.site

GitHub - gridpoint-com/plox: Server-side rendered SVG graphing components for Phoenix and LiveView
Server-side rendered SVG graphing components for Phoenix and LiveView - gridpoint-com/plox
Visit Site

GitHub - gridpoint-com/plox: Server-side rendered SVG graphing components for Phoenix and LiveView

GitHub - gridpoint-com/plox: Server-side rendered SVG graphing components for Phoenix and LiveView


Build Status Hex.pm Documentation

Server-side rendered SVG graphing components for Phoenix and LiveView.

Installation

Plox is available in Hex, the package can be installed by adding plox to your list of dependencies in mix.exs:

def deps do
  [
    {:plox, "~> 0.1.0"}
  ]
end

Documentation is published on HexDocs and can be found at https://hexdocs.pm/plox.

Example

Start by setting up your data, scales, and dataset:

data = [
  %{date: ~D[2023-08-01], value: 35.0},
  %{date: ~D[2023-08-02], value: 60.0},
  %{date: ~D[2023-08-03], value: 65.0},
  %{date: ~D[2023-08-04], value: 10.0},
  %{date: ~D[2023-08-05], value: 50.0}
]

date_scale = date_scale(Date.range(~D[2023-08-01], ~D[2023-08-05]))
number_scale = number_scale(0.0, 80.0)

dataset =
  dataset(data,
    x: {date_scale, & &1.date},
    y: {number_scale, & &1.value}
  )

Once you have those, you can build a Plox.Graph struct:

example_graph =
  to_graph(
    scales: [date_scale: date_scale, number_scale: number_scale],
    datasets: [dataset: dataset]
  )

Finally, render the Plox.Graph directly within your HEEx template:

<.graph :let={graph} id="example_graph" for={@example_graph} width="800" height="250">
  <:legend>
    <.legend_item color="#EC7E16" label="Data" />
  </:legend>

  <.x_axis :let={date} scale={graph[:date_scale]}>
    <%= Calendar.strftime(date, "%-m/%-d") %>
  </.x_axis>

  <.y_axis :let={value} scale={graph[:number_scale]} ticks={5}>
    <%= value %>
  </.y_axis>

  <.line_plot dataset={graph[:dataset]} color="#EC7E16" />

  <.points_plot dataset={graph[:dataset]} color="#EC7E16" />
</.graph>

Articles
to learn more about the elixir concepts.

Resources
which are currently available to browse on.

mail [email protected] to add your project or resources here 🔥.

FAQ's
to know more about the topic.

mail [email protected] to add your project or resources here 🔥.

Queries
or most google FAQ's about Elixir.

mail [email protected] to add more queries here 🔍.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory