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

mindok

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: GitHub - mindok/contex: Charting and graphing library for Elixir · GitHub.

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

The code for the web-site is here: GitHub - mindok/contex-samples: Sample web application demonstrating contex features · GitHub. This code is currently the best documentation…

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)

63 comments

/phoenix #library #liveview #plotting #graphing #contex

98 13801 63

2024-01-14 11:00:23 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

Eiji

I suggest to read :timer documentation:

Post #1

mindok

Hi @Eiji,

Any hints as to why?

Post #2

Eiji

@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:
https://github.com/mindok/contex/blob/master/lib/chart/scale/time_scale.ex

For example instead of:

{:hour, 12, @duration_hour * 12}

you can use:

:timer.hours(12)

Post #3

mindok

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.

Post #4

outlog

looks amazing! great work

fyi: the changelog link on the website is 404 - should be contex/CHANGELOG.md at master · mindok/contex · GitHub

Post #5

mindok

Thanks - fix on its way…

Post #6

chasers

Very cool!

Post #7

mazz-seven

Looks awesome!

Post #8

mindok

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).

Post #9