Elixir plotting utilities library
Pure Elixir library for producing simple plots time-series plots. Currently it only supports SVG which can be used Phoenix static or LiveView pages.
See units tests for more examples of producing SVG graphs. The SVG can be styled using CSS.
output-dual.html
Supports creating axis and scaling for both numeric and DateTime/NaiveDateTime series from Elixir Streams or Enums. Scaling and sizing can be modified with CSS used for styling everything else including font sizes.
Graph generation is designed to be modular.
def deps do
[
{:plotex, "~> 0.1.0"}
]
end
defmodule ExampleSVG.Graph
alias Plotex.Output.Options
@doc " Create Plotex Graph "
def plot() do
xdata = [
~U[2019-05-20T05:04:12.836Z],
~U[2019-05-20T05:13:17.836Z],
~U[2019-05-20T05:21:23.836Z],
~U[2019-05-20T05:33:25.836Z]
]
ydata = [0.1, 0.25, 0.15, 0.1]
graph_data = {xdata, ydata}
plt = Plotex.plot(
[ graph_data ],
xaxis: [kind: :datetime, ticks: 5, padding: 0.05]
)
Logger.warn("svg plotex cfg: #{inspect plt, pretty: true}")
plt
end
def render(socket) do
plt = plot()
# These options aren't really documented, but
# the plotex_test.ex contains most of the basic
# usages.
svg_str =
plt |>
Plotex.Output.Svg.generate(
%Options{
xaxis: %Options.Axis{
label: %Options.Item{rotate: 35, dy: '2.5em'}},
width: 140,
height: 105
})
|> Phoenix.HTML.safe_to_string()
assigns = [svg_str: svg_str]
~L"""
<html>
<head>
<style>
#{Plotex.Output.Svg.default_css()}
</style>
</head>
<body>
<%= @svg_str %>
</body>
</html>
"""
end
end
Note, SVG uses a "graphics" coordinate system where the X-Y origin are centered on the top-left. Most graphing configurations assume the X-Y origin is in the bottom left. The SVG output adjusts this by setting the Y origin to range from -100..0
and adds a negative sign to the Y-data axis. This turns out to be the simplest general way to adjust the SVG origin.