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

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 29603 241
New
tmbb
I’ve published the first version of my Makeup library. It’s a syntax highlighter for Elixir in the spirit of Pygments, Currently it highl...
New
josevalim
Yes, yet another parser combinator library! Most of the parser combinators in the ecosystem are either compile-time, often using AST tra...
159 19417 141
New
dominicletz
Hi, I thought I had posted my library before but seems I hadn’t. The project is still in early stages but it’s growing and so I think it...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
blatyo
The best overview for how things are tied together is this presentation. Modules and functions are pretty well documented at this point, ...
New
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36352 110
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
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
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
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
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 31013 112
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
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

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement