mindok

mindok

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: 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 :wink:

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)

Most Liked

mindok

mindok

I have just pushed v0.3.0 to Hex. The changes are listed below. I would first like to thank various contributors for their help in improving the library - @srowley in particular has done a lot of work on getting comprehensive in place, putting together the shortcut plotting API and improving the data mapping into plot elements. @Eiji has provided numerous suggestions to tighten up the code, as has @elcritch. @axelson has added a couple of features, has encouraged use of Elixir standard formatting so that it is easier to contribute and gave me a nudge to get this release out the door (I would have liked to have got line plots in first but things happened and there are lots of valuable improvements since the last release). Thanks too, to @tobstarr for the doco fix and @rodrigues for setting up github workflows.

So what’s new? The changelog has the full list, but here are the highlights:

  1. The DataSet module can now use a list of maps - this reduces translation work from Ecto output and was really a massive oversight in the original version.
  2. Added a short-cut API over the top of the existing API - you can supply the chart type module in Plot.new along with the data and options and have the plot constructed in a single pass, rather than constructing the PlotContent separately and passing it to the Plot to layout.
  3. Big improvements to the code quality, e.g in TypeSpecs & for the SVG generation so hopefully others will be able to navigate the codebase a little easier.
  4. Various bug fixes. Apologies for the clanger in Sparklines that @jimsynz found !
  5. Basic input sanitisation for possible user inputs (e.g. titles, axis labels, category names).
mindok

mindok

A heads up - there are quite a few changes in master ahead of the next release, including:

  • Line Charts (at last)
  • All options can be set in new/2 options parameter for each of the chart types
  • Other ways of setting options have been marked as deprecated - any feedback on this decision would be appreciated. I know there would be some advantage in maintaining the existing option setting functions to allow a pipeline type interface
  • Minimal default style is there so labels show if no CSS is set
  • It is now possible to explicitly set scales
  • BarChart now has phx-target option for events so it can be used in LiveComponents

The changes are reflected in the accompanying sample project, and are up on the https://contex-charts.org/ website.

You can access these changes prior to release by point the dependency in mix.exs to github:

{:contex, git: "https://github.com/mindok/contex"},
mindok

mindok

It’s been a while since 0.3.0. We’ve had some great community contributions and although there is still plenty to do, a 0.4.0 was well overdue so I have just pushed an update to hex.

0.4.0 contains the following changes:

  • Add SimplePie - a sparkline-like Pie Chart. Thanks @zdenal.
  • Add PieChart - a Pie Chart with more control over labels, colour palette, legend generation etc. Thanks @zdenal
  • Added LinePlot (finally). And with smooth lines (sounds easy but the maths gets quite tricky and there are still a few overshoots in certain circumstances
  • Add target option when setting BarChart event handler.
  • Refactor BarChart to honour all options passed in new.
  • Refactor PointPlot to honour all options passed in new.
  • Refactor GanttChart to honour all options passed in new.
  • Provide minimal default style so labels don’t disappear unexpectedly if no CSS is set. Thanks @srowley.
  • XML declaration added to generated SVG so the output can be served as an image. Thanks @srowley.
  • Custom tick formatting enabled for PointPlot
  • Added :custom_value_scale to BarChart to allow overriding of the automatically generated scale
  • Added :custom_x_scale and :custom_y_scale to PointPlot to allow overriding of the automatically generated scales
  • Make stroke width for LinePlot adjustable through options. Thanks @littleStudent.
  • Handle nil values in LinePlot by creating gaps in line.
  • Stop crash on timescales when interval clashes with days in month resulting in invalid date. Thanks @imsoulfly.
  • Fix colour palette option in GanttChart.

Deprecated

  • Most of the options set via functions, e.g. BarChart.colours/2. Use the options in the relevant new functions instead.

Where Next?

Popular in Announcing Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
mspanc
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
New
tfwright
After working on it for a couple of months and using it in production for most of that time, today I’ve released LiveAdmin, a LiveView ba...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
kip
Image is an image processing library for Elixir. It is based upon the fabulous vix library that provides a libvips wrapper for Elixir. I...
622 18474 194
New
wojtekmach
Hey everyone! Req is an HTTP client for Elixir that I’ve been working on for quite some time. There is already a lot of HTTP clients out...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36128 110
New
treble37
Just looking for a little feedback on a tiny helper library I built - Sometimes I find the need to convert maps with atom keys to maps w...
New
josevalim
Hello everyone, We have just released NimbleCSV which is a small and fast CSV parsing library for Elixir. It allows developers to define...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement