Contex - a pure Elixir server-side charting library generating SVG output

What is ContEx?

A pure Elixir server-side data plotting/charting library outputting SVG.

It has nice barcharts in particular and works great with LiveView.

Project is here: https://github.com/mindok/contex.

There’s a v0.1.0 package up on hex, but probably to link to github for another week or two.

Samples

The web-site https://contex-charts.org/ has some interactive samples so you can take a look, but there are some screenshots below so you don’t even have to follow a link :wink:

The code for the web-site is here: https://github.com/mindok/contex-samples. This code is currently the best documentation…


rolling
image

Is it ready for production?

It’s pretty early days. I’m announcing I think it may be useful even it it’s a bit raw in places. See limitations below.

Why did you write it?

For a couple of reasons:

  • I had a lot of dashboard & data visualisation work coming up and although I could generate nice charts using Javascript libraries, it’s fiddly and involves quite a lot of boilerplate.
  • I have benefitted immensely from the open source community and decided that this could be a reasonable gift back to the community as a way of saying thanks. I know from reading the forums etc that there is a need for something like this

What are the main limitations?

  • It’s early days, so the API is going to change and that might break any code that relies on it. Plus documentation is somewhere between extremely poor and non-existent.
  • Interacting with the graphics (for example, brushing) isn’t possible without a lot of JS. If you need highly interactive graphics, use a JS charting library
  • Some browsers (notably iOS-based) don’t pick up clicks from SVG elements, so if you rely on this and have no control over the end user’s browser, you may want to use something else
  • There’s no state management in the chart generation at this point, so no smarts to send incremental diffs to the browser as a dataset changes. This may be reconsidered when Phoenix LiveView has better handling of changes to lists, although it is quite complex when it comes to managing and adjusting axes as data change.

Enjoy!

Thanks for early feedback from @elcritch & others (suggestions not yet implemented, but will be very shortly)

51 Likes

I suggest to read :timer documentation:
https://erlang.org/doc/man/timer.html

Hi @Eiji,

Any hints as to why?

@mindok Oh, I thought you would quickly get it.
Hint is really simple: look again at suggested module documentation and re-check your duration_* module attributes:

For example instead of:

{:hour, 12, @duration_hour * 12}

you can use:

:timer.hours(12)
1 Like

Ah! I was looking at the dynamic aspects of the :timer module thinking I’d messed up the animated barchart!

Yep - that might simplify things a little thanks, but the tricky thing with calculating nice looking timescales is knowing the type of interval you are dealing with, not just its size, so I would still need to carry :hour and 12 in the tuple in order to calculate a nice boundary for the interval (i.e. 00:00 and 12:00 in this case - the internal round_down_to functions handle this for different combinations of period size and period type). This becomes particularly important for longer time periods where the size of the period varies (e.g. 28 days for Feb and 31 for March). The millisecond estimate is just used to guess at the best time period.

4 Likes

looks amazing! great work :heart: :blue_heart: :purple_heart:

fyi: the changelog link on the website is 404 - should be https://github.com/mindok/contex/blob/master/CHANGELOG.md

Thanks - fix on its way…

2 Likes

Very cool!

Looks awesome!

v0.2.0 out now and pushed to hex.

The big news is documentation and type specs, which shouldn’t really be news!

There are notes in the changelog in the git repo, but the main breaking change is a rename of BarPlot to BarChart (more generally acceptable terminology).

7 Likes

This looks pretty cool! Definitely going to watch progress

This is really neat! I was able to integrate it into a little tool I’m making to see Language Server Protocol requests:


5 Likes