This is really neat! I was able to integrate it into a little tool I’m making to see Language Server Protocol requests:
axelson
Scenic Core Team
6
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).
17
SophieDeBenedetto
Author of Programming Phoenix LiveView
Hey @mindok! I’m working on PragProg’s upcoming LiveView book with @redrapids and I’m hoping to include the usage of your library as our SVG charting library of choice! I’m stuck on rendering a bar chart with the appropriate category labels though and I’m hoping you can point me in the right direction. I’ve tried cloning down your sample repo and more or less copying the bar chart code/data structure but still no dice.
So what I’m after is the application of each column/row label, per the image below:
Could you explain what part of a given Dataset’s structure of BarChart or Plot configuration is responsible for applying those labels?
Thank you!
4
SophieDeBenedetto
Author of Programming Phoenix LiveView
aaaand nevermind! it was a CSS issue (I should know that if I am extremely confused about something it is probably related to CSS!). I copy-pasted your styles from the example repo and my labels are there in all of their visible glory!
5
mindok
Hi @SophieDeBenedetto - that’s happened a couple of times now, so I’ll create an issue to provide a better default.
Pretty excited to hear you’re looking at Contex in the LiveView book! Let me know if you have any more q’s.
2
SophieDeBenedetto
Author of Programming Phoenix LiveView
Definitely will do! So far I’ve been able to make my way through the docs and build out what we need but I’ll keep you posted 
1
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"},
14
haubie
Thanks for making this @mindok and sharing it with the community, a very nice library! I used it today in a live view project, something magical about seeing the chart change dynamically from server events without having to write any JavaScript.
@SophieDeBenedetto your blog on Contex (Real-Time SVG Charts with Contex and LiveView | Blog · Elixir School) was quite helpful as an example, looking forward to the book!
5