Contex - a pure Elixir server-side charting library generating SVG output

Thanks for letting us know you find it useful @haubie!

3 Likes

First, awesome work. Really thank you for providing this.

Unfortunately the chart I’m interested in is the line and I cannot get the git dependency to work. As soon as I add it I get

Build failed for unknown reason. See output log.

I guess that is not much of help to you but it is all I got. Hex dep is working fine.

Do you have any clue as to what it could be?

Edit Edit
I checked out the repo and get the same result at first. It works if I back to 0.3.0. But if I then switch back to master and build (dunno if it could actually make any difference) I can use it as dependency.

Hi @otuv - so where did you end up? If you are still having problems, let me know and I’ll make another release with the new features in the next couple of days.

Hi,

Made a fresh start today and now everything works just fine.

Thank you for rapid response. I got a question and an observation but will take them in two separate posts.

First:
Is there a way to put data dots on the line?

Second:
The name is a bit unfortunate when it is a bit hard to search in the forum and elsewhere as things regarding phoenix context swamps the results

Hi @otuv, re: dots on a line, there is currently no way to do it, but I have developed the code in a private repo that generates markers, injects them into the SVG defs section, and adds them to the line using SVGs in built line marker capability. If the following options makes sense, let me know and I’ll add it:
type: circle, square, diamond, triangle (default circle)
size: (with SVG it’s all relative, but I’ll figure out a sensible default)
filled: true or false, default true
colour will be the colour of the line

3 Likes

Re: the name - yeah, naming is hard. I had a better name all sorted when I started out, but getting domain names was super tough and this was the best I could come up with one Sunday afternoon. If you’ve got any better ideas, feel free to pm me (most things considered so long as they are not offensive, and don’t end with ā€œlyā€ or ā€œifyā€).

Maybe I should pick up on endangered Australian marsupial mascots - something like ā€œeqchartsā€ with an eastern quoll as the mascot.

1 Like

Have done the same type of search twice and it is surprisingly hard. Especially if you don’t just settle for something cleverly misspelled :slight_smile:

Don’t feel rushed about that. I just had a thought it could make it a bit more readable in some circumstances.

To have full flexibility I think it would be nice to have
colour: line or ā€œcolour xā€
size: small, medium (default) or large

The rationale behind that being that perhaps you want a colour that is the same but with a slightly darker tone to increase contrast (or just black) and if you say have a chart with denser data it could be useful to make them more of a dot.

As stated, those are just my thoughts and I have no expectations of someone else freely taking their time to do stuff for me.

It would be handy to be able to mix the line and point types - e.g., to fit an equation to a set of points, and plot both the points and the resulting line. But the points wouldn’t necessarily be on the line.

1 Like

just a quick question. @mindok

Contex doesn’t seem to have the ability of plotting a secondary y-axis on the right of the graph, and we were thinking on adding that feature. Are you working on it??

2 Likes

second y-axis would be great.

Hi @JoeZ99 - I’m not working on that, and would be more than happy if you took it on. Probably a good idea to raise an issue on github and describe your approach as allocating ā€œseriesā€ to axes needs to be clear to users of the library.

Hi, @mindok . I tried your library out and it is awesome. However I was trying to color my Gantt graph categories with my own palette but it doesn"t seem to work. Although when I inspect the GanttChart struct it shows it has my custom CategoryColourScale, it doesn"t display as such on the rendered svg. How do we apply category colors?
Thanks!

Hi @Cleemzy - looks like a bug crept in when we refactored the options. The colours should be set with the :colour_palette option (as per docs), which in turn should cause the correct colours to be used when the CategoryColourScale is created at the start of the rendering.

I have just pushed a fix to github, so if you are using a github dependency, run mix deps.unlock contex, mix deps.update contex and you should be good to go. Sample code in the contex-sample project in github has also been updated to use a custom colour palette.

2 Likes

Thank you very much! You fixed it in a blink of an eye!
Is the fix applied to the hex version as well ?

Hi @Cleemzy - the fix isn’t on the hex version as yet.

1 Like

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.
12 Likes

very cool!

1 Like