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.

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

mindok

Hi all,

Version 0.5.0 of Contex has just been released. Details are in the changelog.

Highlights include:

  • A nifty new auto-generated gallery in the documentation. Look out for module names containing Gallery. Thanks to @l3nz for this. Whether you use Context or not, it’s worth taking a look at the code behind it if you want to jazz up your docs. Github user @travelmissive (sorry - can’t find you on Elixir Forums) provided a number of examples.
  • New Contex.ContinuousLogScale, again thanks to @l3nz. This was a couple of options for handling negative numbers.
  • New legend positioning options
  • A couple of various bug fixes, and fixes to tests & docs - thanks @axelson, gh user @kianmeng, gh user @ruimfernanded
  • With a nudge from @axelson, I finally got around to figuring out how tagging works, so this version is the first tagged release :slight_smile:

Also, CI works now. I thought I’d put this screenshot up as I know I’m not alone!!

mindok

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

Where Next?

Popular in Libraries Top

seancribbs
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
New
woylie
I released Doggo, a collection of unstyled Phoenix components. Features Unstyled Phoenix components. Storybook that can be added to...
New
arkgil
Hi all! I’m happy to announce that Telemetry v0.3.0 is out! This release marks the conversion from Elixir to Erlang so that all the libr...
New
pkrawat1
Presenting Aviacommerce, open source e-commerce platform in Elixir Aviacommerce is an open source e-commerce platform in Elixir. We at...
New
achempion
Hi, I would like to tell about my initiative to further maintain and develop Waffle project which is the fork of Arc library. The progre...
New
Antrater
Hi everyone! I’m thrilled to announce a huge thing. We have been developing Elixir Moon Design System for quite a while. We are finally ...
New
engineeringdept
I’ve just released the first version of Snap, an Elasticsearch client. It borrows ideas about application structure and process managemen...
New
bryanjos
Hi, I just published version 0.23.0 of Elixirscript. Most of the changes are around JavaScript interop now that Elixirscript uses the ...
New
Hal9000
Here is my first stab at this. README pasted below. https://github.com/Hal9000/elixir_random Comments and critiques are welcome. Th...
New
maltoe
Hello! Came here to announce ChromicPDF, a pet project PDF generator I’ve been working on for the past few months. Why another PDF gener...
New

Other popular topics Top

JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
peerreynders
Manning 2016 Halloween weekend sale via Deal of the Day Friday, October 28 - Half off all MEAPs - code WM102816LT Saturday, October 29 ...
326 29600 154
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
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 49522 488
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New

Sub Categories:

We're in Beta

About us Mission Statement