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

wmnnd
Hi there, for my project DBLSQD, I needed a file storage solution that is a bit more flexible than Arc. Because I thought others might f...
New
praveenperera
FastRSS Parse RSS feeds very quickly: This is rust NIF built using rustler Uses the RSS rust crate to do the actual RSS parsing Speed...
New
mathieuprog
Hello :wave: Allow me to introduce you to Tz, an alternative time zone database support to Tzdata. Why another library? First and fore...
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
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
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
michalmuskala
Another small library today. PersistentEts Hex: persistent_ets | Hex GitHub: GitHub - michalmuskala/persistent_ets Ets table backed by...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
Crowdhailer
Experimenting with this code. OK.try do user <- fetch_user(1) cart <- fetch_cart(1) order = checkout(cart, user) save_or...
New
anshuman23
Hello all, I have been working on my proposed project called Tensorflex as part of Google Summer of Code 2018.. Tensorflex can be used f...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30048 115
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
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

Sub Categories:

We're in Beta

About us Mission Statement