Plotex

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.

Changes

Features

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.

Future Features

Installation

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

Example


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

Example DateTime Output

Example DateTime OutputExample Dual DateTime Output

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.

TODO