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 ![]()
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
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:
- The
DataSetmodule can now use a list of maps - this reduces translation work from Ecto output and was really a massive oversight in the original version. - Added a short-cut API over the top of the existing API - you can supply the chart type module in
Plot.newalong with the data and options and have the plot constructed in a single pass, rather than constructing thePlotContentseparately and passing it to thePlotto layout. - 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.
- Various bug fixes. Apologies for the clanger in Sparklines that @jimsynz found !
- Basic input sanitisation for possible user inputs (e.g. titles, axis labels, category names).
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/2options 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
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
BarChartevent handler. - Refactor
BarChartto honour all options passed innew. - Refactor
PointPlotto honour all options passed innew. - Refactor
GanttChartto honour all options passed innew. - 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_scaletoBarChartto allow overriding of the automatically generated scale - Added
:custom_x_scaleand:custom_y_scaletoPointPlotto allow overriding of the automatically generated scales - Make stroke width for
LinePlotadjustable through options. Thanks @littleStudent. - Handle nil values in
LinePlotby 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 relevantnewfunctions instead.
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance











