https://github.com/gridpoint-com/plox
Server-side rendered SVG graphing components for Phoenix and LiveView
https://github.com/gridpoint-com/plox
Last synced: about 2 months ago
JSON representation
Server-side rendered SVG graphing components for Phoenix and LiveView
- Host: GitHub
- URL: https://github.com/gridpoint-com/plox
- Owner: gridpoint-com
- License: mit
- Created: 2024-01-23T21:23:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-12T00:33:45.000Z (5 months ago)
- Last Synced: 2025-07-14T03:39:56.659Z (5 months ago)
- Language: Elixir
- Homepage: https://hex.pm/packages/plox
- Size: 588 KB
- Stars: 96
- Watchers: 6
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-elixir - plox - Server-side rendered SVG graphing components for Phoenix and LiveView. (Data Visualization)
- fucking-awesome-elixir - plox - Server-side rendered SVG graphing components for Phoenix and LiveView. (Data Visualization)
README
---
[](https://github.com/gridpoint-com/plox/actions) [](https://hex.pm/packages/plox) [](https://hexdocs.pm/plox/)
Server-side rendered SVG graphing components for Phoenix and LiveView.
## Installation
Plox is [available in Hex](https://hex.pm/packages/plox), the package can be
installed by adding `plox` to your list of dependencies in `mix.exs`:
```elixir
def deps do
[
{:plox, "~> 0.1.0"}
]
end
```
Documentation is published on [HexDocs](https://hexdocs.pm) and can be found at
.
## Example
Start by setting up your data, scales, and dataset:
```elixir
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:
```elixir
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:
```html
<.graph :let={graph} id="example_graph" for={@example_graph} width="800" height="250">
<:legend>
<.legend_item color="#EC7E16" label="Data" />
<.x_axis :let={date} scale={graph[:date_scale]}>
<%= Calendar.strftime(date, "%-m/%-d") %>
<.y_axis :let={value} scale={graph[:number_scale]} ticks={5}>
<%= value %>
<.line_plot dataset={graph[:dataset]} color="#EC7E16" />
<.points_plot dataset={graph[:dataset]} color="#EC7E16" />
```