Page MenuHomePhabricator

Evaluate to switch from C3.js to Plotly.js
Closed, ResolvedPublic

Assigned To
Authored By
kleina
Sep 14 2018, 2:50 PM
Tags
Referenced Files
F1224141: image.png
Nov 20 2018, 11:49 AM
F1224140: chart3.mp4
Nov 20 2018, 11:47 AM
F1220053: chart2.gif
Nov 15 2018, 11:48 AM
F1215547: chart2.gif
Nov 9 2018, 9:19 PM

Description

Further evaluate, if it makes sense to switch from our current implementation in C3.js to plotly.js. We need some additional features (like error bars), that are not supported in C3.

Chart requirements for usage within MITK (not yet complete):

Optional:

Event Timeline

kleina triaged this task as Normal priority.Sep 14 2018, 2:50 PM
kleina created this task.

First simple bar example: http://jsfiddle.net/jav8t3ey/ with layout object to modiy title, axis labels
Heatmap example: http://jsfiddle.net/uyqdnscx/ (array value representation, but origin in heatmap is in the bottom left corner)

Adding data in different ways as interface should be possible, but in the end plot.ly relies on seperate value-arrays for x and y.

Zooming into the chart is always possible, as well as resetting view.

@steint thanks, thats already valuable information!

Supported chart types are:

  • line plots
  • scatter plots
  • bar charts
  • area plots
  • heatmaps
  • bubble charts
  • histograms

and more, but they can be mixed in one plot.

Cheat Sheat for Plotly: https://images.plot.ly/plotly-documentation/images/plotly_js_cheat_sheet.pdf?_ga=2.54925035.151830093.1541752710-846478422.1540374067

Error bar functionality: https://codepen.io/plotly/pen/VvEVgq
The error bars are supported for scatter and bar charts.

Adding data in different ways like mentioned above is manageable in javascript without changing the c++ interface.

Layout is styleable: https://plot.ly/javascript/#layout-options ( enable/disable legend, or position changes)
Interaction with legend (if displayed) leads to enable or disable single plots by clicking on the dataset in the legend.

Features like color, linestyle are supported. Here is the reference page: https://plot.ly/javascript/#style-options

Mixed plots example: https://codepen.io/plotly/pen/KpERZx

Axes: https://plot.ly/javascript/axes/#logarithmic-axes

  • logarithmic support
  • inverted axes
  • categorical axes
  • ticks editable

@steint : Cool thanks for following up on this! Very valuable.

If I understand it correctly, @steint research shows that all features listed above could be covered.
@all: So in theory we have green light to start a migration project. Correct?

I talked to @hentsch and already started the migration.

Here is a quick preview what happend. There is also now a redirection of javascript console output to the mitk output which is very helpful for debugging nasty javascript bugs.

chart2.gif (645×1 px, 669 KB)

Nice!
That's cool. Thanks for the effort! Will be very usefull also for our model fit and CEST work!

FYI: Instead of GIFs you can also use MP4s in Phabricator, which tend to be much smaller in file size while having a decent framerate.

Thanks, i will keep an eye on the file size and test it with MP4s ;) hope you like the moving images.

Do we need the subchart feature? Maybe the interactive zoom option with plotly is sufficient?

The idea behind that feature was, that it should be obvious to the user, that he is only looking at a part of the data. A zoomed view can lead to misinterpretation if the user is not aware of it. At least that is what I thought when I added that feature.

@steint great work. That already looks really good, thanks!!
Personally, I am no fan of the subchart feature, but see the rationale of @kleina. It is possible without great effort in plotly?

I do not think, that the subchart feature is a blocker or even critical. It was very easy to implement with C3 and I personally liked the idea as described above. I assume there is something to achieve that in plotly as well? I'd be happy to discuss this with you in person.

You are right, Plot.ly has something similar which is easy to activate.

I like it.

So what's the status bottom line? Switching to plot.ly is fine, isn't it? It seems to fullfill all requirements.

What's next then?

  • Check in the branch, if all Plugins that use MITKChart still work fine
  • Bring the branch to the master
  • Finish the other sub taks of T23104: Deprecate QmitkPlotWidget

Something for friday?

The branch is checked into the master and tested with the image statistics plugin.
The complete API of QmitkChartWidget is not tested in detail, for example more than one labels with different chart type...

I have documented the JS API, which should help to fix more advanced things. Maybe you can check your plugins which are using the chart widget and report things which won't work as expected.
Also new features like a heatmap plot would be a new task.

steint claimed this task.

Maybe you can check your plugins which are using the chart widget and report things which won't work as expected.

OK. Thanks.