Custom Graphs with Animation

  • I am writing a Qt application (Qt Desktop Widgets, will run on Win7/8/10 and Linux) which has data which can be rendered as stacked smooth radar graphs, sunburst diagram, tree maps and chord/sankey diagram.

    For the sunburst, I will need some animation (as posted in the links below). D3.js provides brilliant sets of APIs to achieve all this and the gallery is a great showcase.

    For the above requirements, I decided to write my own since I checked out several libraries, they do not really provide what I need (Qt Chart, KDChart, QCustomPlot, etc). Also, the budget is not there either to purchase a commercial license (The software is free initially, will get open-sourced).

    I hence plan on writing the charts myself. From what I can see, there are different ways of achieving this:

    • Using QPainter and QWidget APIs
    • Use QGraphicsView (which reduces some complexity like detecting where mouse click occurred w.r.t object hierarchy in graph)
    • Embed Chromium and use D3.js ?
    • Use Qt's SVG to create a graphs. (Does Qt also render SVG?)

    Porting D3.js to C++/Qt is probably be a monumental effort from my side and I do not think I can dedicate that amount of time. I would like to know the ways in which it can be done ? (Striking a balance between effort required, time taken, how interactive graphs are and how visually appealing they are).

    Sunburst Chart
    Chord Diagram
    Smooth Radar Graph?
    Sankey Diagram

  • @ajaxcrypto Search for "D3.js QML" - there is a lot of info

  • Note the application is not a QML based application nor will be ported to. It is a classic C++ Qt Widgets application. So, if I want to use QML, I will have to embed that inside the the application.

  • Moderators

    @ajaxcrypto be aware that doing animations &| continious repaints can be super slow with a QWidgets application. Going QML should be the better option if you want to guarantee smooth animations.

  • If you want to use D3.js without rewriting it in other language, your first options are either to embed browser, or use QML. Sure you can also run JS code in plain QJSEngine and add your objects there, but that's going to be more work

Log in to reply